ElkArte Community

Not sure if it is just me or not, so I'm asking here:
1) go to http://www.elkarte.net/community/index.php?action=memberlist
2) click inside the input box for searching members
3) a dropdown with few choices will appear
are the checkboxes in the dropdown correctly aligned when using BeSocial?
I see them like in the picture.

It's a template problem, the checkboxes are placed before the text string, so you can float them on the right for a million years, but they won't give a damn (or they will, but in the way you would want them to). The fix is to either reverse the template position and put the checkbox AFTER the string, or float them on the left, as you see fit.

#mlsearch_options .mlsearch_option .input_check {
    margin: 0 .5em;
}

For example like this, it will look like this (see attachment)

ETA: and it's for these reasons that I'd have liked to have GitHub up...

Um, no. The positioning is fine in the Light variant, so it's not a template problem.

And floating things to the right when they are before another element in the markup is standard practice anyway.

Actually, have them on the left doesn't look so bad. O:-)

I am all in for the left, because when you click the search box you will have the cursor on the left side, too. (Or at least, I tend to do that ;D).

EDIT: ant, yes, but in this case they are wrapped into the same element, so it will float them according to that element width, which varies according to the text length.

Well, since it's only a minor CSS tweak you can have them on either side, as you like. Suit yourself.

Incidentally, which browser was the screenshot taken in?

And offhand I can't see why it matters which side the cursor is on. The whole lot is clickable anyway.

Ok, well do a comparison between Be_social and Light, because Light is fine.

Tricky, I'm having a look :D

Got it. It's because the email address goes on new line in BeSocial, and screws it up. It's the only difference, although it took me a while to notice.

I think both themes have problems with the drop down.  :)

Firefox 39

I have seen this in a number of place on the _light version. In some of the areas I believe I fixed with with vertical-align: %

Yup, you look to be running larger than default font size in Light, which is breaking the text to two lines.

It's weird though that it's also affecting the last option (search by position) which doesn't break to two lines.

Y'know what would probably fix it for all cases? Setting the label width to 100%*. There are no horizontal paddings involved, so it shouldn't bork anything.

*Or even just display: block;

I had to look to see.  :D  No zoom set on the browser and the default size is 14 but I also have the option checked to use the site fonts.  So not sure.  Might go to a smaller font and see what I see.

Me thinks the check boxes should be lined up in a vertical row as well.

I've thought of a fix anyway. See my previous post. ;)

BBL.

:)  Yep..seen it.   Works great if I select no minimal font in FF; then can +zoom the screen and it works.

I think your solution is better.   :)

^ this, can't explain it either. Browser weirdnesses maybe?
Yeah perhaps that could do as well.

OT: damn glad I am finally understanding what the heck you are saying and replying to it :P

@derived I think FF is at version 44 or something, I updated it like yesterday. So yeah you are quite a bit behind ;D

Yeah I'd just go with:

.mlsearch_option label {display: block;}

Should be bulletproof.

Meh. Just tested it on local. Doesn't work. :P

AHA! Got it. It's the height settings. This fixes it:

.mlsearch_option {min-height: 2em;}

Explanation: the li's were collapsing to a bit less than the height of the checkbox under some circumstances, with the result that the floated checkboxes staggered themselves.

ETA: Better solution in next post.

Ok so went digging. The first declarations are here in default/css/index.css:

#mlsearch_options .mlsearch_option .input_check {
	margin: 0 0 0 0.5em;
	float: right;
}
#mlsearch_options .mlsearch_option {
	padding: 0.2em 0;
}

These are excessively verbose. There should not be any need to declare that long a descendant chain. Also, just thought of another trick, namely setting line-height on the li's.

AFAICT this works. Should be bulletproof. Try it out on your browsers/boxes and see what you think:

.mlsearch_option {
	line-height: 2em;
}

.mlsearch_option .input_check {
	margin: 0 0 0 0.5em;
	float: right;
}

Had already figured that, but went with an easier fix to just move it to the left ;D

Yeah but that always looks crappy if it breaks to two lines, because the first word of the new line ends up under the checkbox.

And anyway, really the excessively verbose declarations in index.css should be fixed.

Not clear on what you mean. Screenshot?

Match the options length is not always an option, since these options may include custom fields as well, and here there is close to no way to line anything with anything... I think. And that is another reason to consider move the checkboxes on the left (i.e. those are always at the same place no matter what the length of the text is).

Well, if you want checkboxes on the left all you have to do is remove the float and change the margin. I like them on the right myself, because the label is clickable (bigger target, I never click the actual checkbox) and it feels more natural to me to read the label first (like oh yeah, I want that option).

The other point is that perhaps you should consider setting a maximum width on the droppy anyway, because depending on forum width settings, screen res and length of label text, the way it is now the droppy could overflow off the right edge of the screen sometimes.

Makes no difference to me what you do, since if I something different in a theme of my own I'll just rewrite whatever is necessary. Suit yourselves. :)

Fixed. See #2398

Should have pushed it myself, been too busy. #%&$ it again...