FANDOM


  • Struggling to find a way to fix the width of an infobox at a certain width. Here it is: http://jusenkyo.wikia.com/wiki/Template:Infobox_Story

    This looks fine until it is in an actual article at which point it increases in size to the width of the longest cell in the template. So a really long piece of text isn't wrapped to fit the box, but makes the box stretch across the whole page. How do I force the contents of the infobox to fit the predetermined width?

      Loading editor
    • Up the very top of the template, where it says class=" ... ", place the code width:?px;, replacing the ? with however wide you want it to be

        Loading editor
    • Do you mean in the "class" bit: ie.: class="infobox; width:200px" or in the "style" section. The first screws up the template and has no effect on fixing the width. I've tried putting such a code in the "style" section, but that has no effect. On the template page it works, but on actual article pages they still bloat out with unneeded space.

        Loading editor
    • It goes in the "style" section, sorry. I don't understand why it isn't working, as a similar setup works on my wiki.

        Loading editor
    • This is something unfortunate with tables, they scale to their content and not to the parent. You can try setting table-layout:fixed; as a style to the infobox and it should ignore its contents. Anything that's too big will break out of the table, though.

        Loading editor
    • Still not any closer. Here's an example of a page where the infobox has masses of wasted space on the right-hand side: http://jusenkyo.wikia.com/wiki/2010:_Second_Odyssey

      The header for the info box currently reads:

      {| class="infobox" style="table-layout:fixed; max-width:200px; -moz-border-radius: 6px 6px 0 0; font-size:84%; background-color:#fff; margin-bottom: 0px; border-bottom: 0px none #fff;" style="border-top-right-radius:6px; border-top-left-radius:6px; border-bottom-left-radius:6px; border-bottom-right-radius: 6px; font-size:84%; margin-top: 0px; background: #fff;" |-

        Loading editor
    • Almost have it for you. Give me a few more minutes. You can see now at w:c:jusenkyo:2010: Second Odyssey that all that fat has been trimmed away. Just one more little trick to go …

        Loading editor
    • Okay, I think I've done about as much as possible without actually having access to your CSS files.

      Here's the basic deal with most infoboxes.

      In the first place, you have to know what mean when you say class=infobox. That means you have to go to your CSS and see if a class called "infobox" is defined in any way. At your wiki it was, so I just sidestepped it completely to avoid conflicts.

      You also have to know what the basic structure of an infobox is. Most of the time, and certainly in your case, an infobox is is a thing that has two columns — a left side with a label, and a right side with a value for the label. If you want an infobox to be 200px, that means that you have to define at least one of the two sides as being 100px so that the two sides will be equal in width. It's not enough to say that the whole width is 200px. You actually have to say, this one column is 100px.

      So what I've done is split up your variables into two halves — a left sideband a right side. If you look at your code you'll see that I've consistently defined the left side as being 100px, which in a 200px overall width means that the other side is automatically 100px. That's a terribly important step in making sure you have overall width control.

      The other thing I've done is to give proper colspans for the things that go across the whole box — the titles and picture. If your basic structure is a two-column box, then things that span across must have colspan=3 because there's a third column of a few pixels that separates the two main columns. A lot of people assume that in a 2-column setup, things that go across the whole width must be set to colspan=2, but this fails to account for the "separator column". A simpler way of looking at it is that the colspan for things that go the whole way across is total columns + 1.

      And the final thing that was really gunking things up was that you were trying to squeeze things into spaces they just wouldn't fit. In the first place, you had so many different elements set to have at least one margin of 1em that these ultra-wide margins were competing with each other for space, and the table just broke. 1 em is an insanely large margin in any kind of infobox. I mean it's huge. So I pulled all that right back.

      The other big things were your graphical elements. The little templates like 2010, Alt, and Com. All of these had widths in excess of 100px. The real culprit was , which had a defined width of something like 260px. Well, obviously you can't put something like that in a space that's only meant to hold 100px. So I narrowed all these to 90px width and took away their ridiculously large 1em margins.

      Now it pretty much all fits, but there's more tweaking that could be done. There's some issues around your image handling that could be corrected, but that's best done through CSS. And really, there's too much in the way of inline CSS; most of the styling should be pulled back into your Common.css.

      You'll also need to go back and make all sure that all your little type and genre templates have dimensions like those now at and for to work properly in all contexts.

        Loading editor
    • Hi, thanks for all your efforts with this issue. The infoboxes were cobbled together from all sorts of code I had seen on other wikis, probably why it wasn't working as it should.

      One quick query (!): despite fixing the templates as you suggested, the infobox on this page (http://jusenkyo.wikia.com/wiki/*5*_Lights) is narrower than on the one you played with (http://jusenkyo.wikia.com/wiki/2010:_Second_Odyssey). Why is that?

        Loading editor
    • You need to make and all have 90px widths. Every single one of your genre and type templates need to have the same width.

        Loading editor
    • They do have their widths set to 90px, which was why I was puzzled as to why the infobox wasn't the same size. The infobox is visibly narrower on (http://jusenkyo.wikia.com/wiki/*5*_Lights) when compared to (http://jusenkyo.wikia.com/wiki/2010:_Second_Odyssey).

        Loading editor
    • Alright, to be honest, there's so much going on with your little genre and type templates that I don't know where to start. They're all slightly different with different amounts of text in them. The fact that the images are 58px is problematic because that means you only have 32px left for text, out of a 90px total width. Therefore many of them just can't stick to a 90px width and the story infobox gets broken.

      I think I just got lucky with the two I was using at 2010 Second Odyssey cause I was able to redact the text and make it all work. Now that I'm seeing the whole range of these templates you've got, I suggest two courses of action:

      • drop the graphical nature of those templates altogether. Convert them to simple text, and they'll play nicely with the infobox width. At 58px, you're not getting much out of the images. At 45px — which you'd really have to do to get them into half the space of your 90px width, you'll get even less.
      • keep it graphical, but make it much more abstract. Plan out your templates so that they have a very regular pattern to them. For example, take a look at tardis:category:stub templates. Those are all 25px and have pretty much the same ratios working. But they don't have regular wiki text anywhere in them. They're 100% graphics. If you had 90px pure graphics, you'd be fine. It'll take some time, but once you hit upon the template, you can crank 'em out really quick, and your site will have a more regular look to it.

      If you decide to keep the current form of those templates, some of them will work and some of them won't. It'll be highly unsatisfactory.

        Loading editor
    • Thanks again. I'll give it some thought as to what I want to do.

        Loading editor
    • Sorry that this is so far in the future. When editing a specific instance of a run-of-the-mill infobox, the kind that comes default with a newly made Wiki, in source mode, I'm guessing there is not a tweak that will change its width? This one, for example.

      Don't know to what degree paradigms have shifted since all the conversation in this thread.

        Loading editor
    •   Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.