Members search options droppy misalignment?

Topic: Members search options droppy misalignment? (Read 5157 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

Re: Members search options droppy misalignment?

Reply #15 – February 28, 2016, 05:02:20 pm

Quote from: Antechinus – February 28, 2016, 04:29:34 pmIt's weird though that it's also affecting the last option (search by position) which doesn't break to two lines.

^ this, can't explain it either. Browser weirdnesses maybe?

Quote from: Antechinus – February 28, 2016, 04:33:09 pmY'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;

Yeah perhaps that could do as well.

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

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

Re: Members search options droppy misalignment?

Reply #16 – February 28, 2016, 06:12:58 pm

Yeah I'd just go with:

Code: [Select]

.mlsearch_option label {display: block;}

Should be bulletproof.

Re: Members search options droppy misalignment?

Reply #17 – February 28, 2016, 06:27:10 pm

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

Re: Members search options droppy misalignment?

Reply #18 – February 28, 2016, 06:34:36 pm

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

Code: [Select]

.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.

Re: Members search options droppy misalignment?

Reply #19 – February 28, 2016, 06:43:18 pm

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

Code: (Find) [Select]

#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:

Code: (Replace) [Select]

.mlsearch_option {
	line-height: 2em;
}

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

Re: Members search options droppy misalignment?

Reply #20 – February 28, 2016, 07:05:08 pm

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

Re: Members search options droppy misalignment?

Reply #21 – February 28, 2016, 07:07:02 pm

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.

Re: Members search options droppy misalignment?

Reply #22 – February 28, 2016, 09:19:14 pm

Not clear on what you mean. Screenshot?

Re: Members search options droppy misalignment?

Reply #23 – February 29, 2016, 02:28:40 am

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).

Re: Members search options droppy misalignment?

Reply #24 – February 29, 2016, 02:37:23 am

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.

Re: Members search options droppy misalignment?

Reply #25 – March 23, 2016, 03:41:32 pm

Fixed. See #2398

Re: Members search options droppy misalignment?

Reply #26 – April 01, 2016, 07:25:03 pm

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