Skip to main content
Topic: Members search options droppy misalignment? (Read 5100 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Members search options droppy misalignment?

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.
Bugs creator.
Features destroyer.
Template killer.

Re: Members search options droppy misalignment?

Reply #1

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.

Code: [Select]
#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...

Re: Members search options droppy misalignment?

Reply #2

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Members search options droppy misalignment?

Reply #3

Actually, have them on the left doesn't look so bad. O:-)
Bugs creator.
Features destroyer.
Template killer.

Re: Members search options droppy misalignment?

Reply #4

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.
~ SimplePortal Support Team ~

Re: Members search options droppy misalignment?

Reply #5

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Members search options droppy misalignment?

Reply #6

Quote from: Flavio93Zena (#OpIsis) – 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.
Ok, well do a comparison between Be_social and Light, because Light is fine.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Members search options droppy misalignment?

Reply #7

Tricky, I'm having a look :D
~ SimplePortal Support Team ~

Re: Members search options droppy misalignment?

Reply #8

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.
~ SimplePortal Support Team ~

Re: Members search options droppy misalignment?

Reply #9

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

Re: Members search options droppy misalignment?

Reply #10

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Members search options droppy misalignment?

Reply #11

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;
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Members search options droppy misalignment?

Reply #12

Quote from: Antechinus – 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.
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.

Re: Members search options droppy misalignment?

Reply #13

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

BBL.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Members search options droppy misalignment?

Reply #14

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