Search dialogue can overflow inappropriately

[Arantor]

In the search dialogue, you get the ability to select a board or boards to refine the search to, and the hierarchy is shown - boards that are sub-boards get indented.

So, with a hypothetical structure of:
General Discussion
  New Board
    New Board 2
      New Board 3
        New Board 4
          New Board 5

you get the indentation.

Now, in the search dialogue, boards are shown with <li> tags, with a width of 93% of their container, and the indentation is 1em per child level of indent (so General Discussion is 0em indented, New Board is 1em indented, etc)

This is fine all the time the indentation is less than 7% of the width of the container (which is 45% of the width of the area to make the two column bit work), but once it goes beyond that, you can see it overflows out of the container.

With 5em indentation as shown, you need to have something ike 1450px wide browser window before the indentation drops below 7% of the container width. 8em indentation doesn't even fit in 7% of the container on 1920px wide (I tried)

Admittedly this is not that huge a deal in most cases because most people don't have ridiculous hierarchies going on, but the bigger the hierarchy the more chance the bug will surface. (For the record I found this out with my gallery which reuses the same code for style purposes and I have an 8em indentation with 9-level nesting of galleries, never seen it on SMF itself because no-one, presumably, would be that insane?)

Affects both 2.0 and 2.1.

[Antes]

You can fix this in SMF 2.1 with;

Search.template

Code (Find) Select Expand

                        <li class="board" style="margin-', $context['right_to_left'] ? 'right' : 'left', ': ', $board['child_level'], 'em;">
                           <label for="brd', $board['id'], '">

Code (Replace) Select Expand

                        <li class="board">
                           <label for="brd', $board['id'], '" style="margin-', $context['right_to_left'] ? 'right' : 'left', ': ', $board['child_level'], 'em;">

SMF 2.0

Code (Find) Select Expand

                        <li class="board" style="margin-', $context['right_to_left'] ? 'right' : 'left', ': ', $board['child_level'], 'em;">
                           <label for="brd', $board['id'], '"><input type="checkbox" id="brd', $board['id'], '" name="brd[', $board['id'], ']" value="', $board['id'], '"', $board['selected'] ? ' checked="checked"' : '', ' class="input_check" /> ', $board['name'], '</label>
                        </li>';

Code (Replace) Select Expand

                                <li class="board">
                                    <label for="brd', $board['id'], '" style="margin-', $context['right_to_left'] ? 'right' : 'left', ': ', $board['child_level'], 'em;"><input type="checkbox" id="brd', $board['id'], '" name="brd[', $board['id'], ']" value="', $board['id'], '"', $board['selected'] ? ' checked="checked"' : '', ' class="input_check" /> ', $board['name'], '</label>
                                </li>';

[Arantor]

Thanks (Though I had alternatives for fixing it myself, none of them the same as this but this works pretty durn good)

It was more for fixing in 2.1 though.

[Antes]

Thanks (Though I had alternatives for fixing it myself, none of them the same as this but this works pretty durn good)

It was more for fixing in 2.1 though.

if it fits I sits...

I was thinking about creating a small pack for those small problems found in SMF 2.0 (palemoon support etc...), I'll commit changes to main repo for 2.1 later.

I think you can also solve the issue with adding overflow: hidden; to board class but didn't try that.

Thanks for the report, moving as fixed.

[Arantor]

A small pack for such changes would, logically, be the basis for the next 2.0.x patch yes?

Yes you could fix it with adding overflow:hidden (or class flow_hidden) but long board names might get truncated if they don't otherwise wrap properly.

Alternatives include indentation by way of nbsp tags, too.