ElkArte Community

Elk Development => Theme development => Topic started by: Antechinus on August 30, 2015, 07:49:30 am

Title: display: inline-block; rocks
Post by: Antechinus on August 30, 2015, 07:49:30 am
Hey I've just been revamping my old memberlist mod over at the den of iniquity. Managed to get the whole thing supporting RTL perfectly, without using any rtl.css at all.

What I did was recode it so that instead of relying on floats for the member blocks and all the sorting links above them, it all uses display: inline-block. Same for the memberlist search page. The two columns of search items (name, email, etc) under the inputs are also done with inline-block.

This works out really well, since inline elements are ordered according to language direction. Change to an RTL language, and the order of everything flips automatically. This is awesome for saving on frigging around with rtl.css.

The only catch is that, being white-space dependent, inline-block will force a slight right margin (or left margin in RTL languages) which can screw up the total width if that's critical. However, a left and right margin of -0.15em on each box fixes that, without requiring separate CSS for RTL. The actual forced margin seems to be between 0.25 and 0.3 em on one side, so 0.15 each side as a negative margin works fine to compensate.

Short version: if thinking of using floats for a line of boxes, I would now be using inline-block instead, unless there was a pressing reason why only floats would do the job. Most times there probably won't be such a reason.
Title: Re: display: inline-block; rocks
Post by: Flavio93Zena on August 30, 2015, 09:50:26 am
Yup, I had read this on sm.org, good idea!
Title: Re: display: inline-block; rocks
Post by: live627 on August 30, 2015, 10:37:04 am
yep, iz da bomb!
Title: Re: display: inline-block; rocks
Post by: Joshua Dickerson on August 30, 2015, 01:29:47 pm
@Antechinus, any changes Elkarte should make that you can highlight?
Title: Re: display: inline-block; rocks
Post by: Antechinus on August 30, 2015, 07:23:43 pm
Well, just off the top of my head, it's really good for stuff like menus and button strips. I think those all use floats in Elk (I know the main menu does). Linktree would be another thing. Would have to look through it all again, but basically anywhere you want to get a bunch of block level elements sitting in rows.

Or even inline elements sometimes. Like if you want to be able to use margins directly on anchors, you need to convert them to block display. If you want to have a row of them, inline-block ftw.

Could also be used for things like the rows in generic lists, although for those display: table-cell; would be as good or better. If they're already using table-cell I'd leave them alone. If they're using floats, I'd probably change them to table-cell (does auto RTL, like standard tables).