Skip to main content
Topic: display: inline-block; rocks (Read 2479 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

display: inline-block; rocks

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.
Last Edit: August 30, 2015, 07:55:09 am by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

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

Re: display: inline-block; rocks

Reply #1

Yup, I had read this on sm.org, good idea!
~ SimplePortal Support Team ~

Re: display: inline-block; rocks

Reply #2

yep, iz da bomb!
LiveGallery - Simple gallery addon for ElkArte

Re: display: inline-block; rocks

Reply #3

@Antechinus, any changes Elkarte should make that you can highlight?

 

Re: display: inline-block; rocks

Reply #4

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

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