Flexible box model. It's easy, until it gets hard.

Nao

  • Dadman with a boy
  • Posts: 16,077
Flexible box model. It's easy, until it gets hard.
« on February 26th, 2013, 10:28 PM »
So... I've already spent two days on this. After implementing support for flex in Wedge, I was going to commit this, but stopped at the last minute.
I wanted it to be a surprise, but it just can't. I can't commit until it's fixed. And I can't seem to fix it... So I might as well ask for opinions.

My idea was to reset the message layout to what we had in SMF 1.1, i.e. a 100% table-like layout. In CSS, display:table works quite well, but it doesn't support rowspan and colspan. This 'oversight' was fixed by the W3C in the form of flexbox, where you can precisely force an element to take all of the available height.

All right.

So, I set display:flex on the post wrapper. This works just fine.
Then I set display:flex on the postarea class, with a width set to 100% (otherwise the child divs don't fill the postarea width, whatver!) Again, works normally... Then I'll set flex:1 on the .post class, meaning it gets priority on whatever fills the space.
As a result, the first post in the screenshot shows that the action bar is at the BOTTOM of the post, with extra space in between. This is what I wanted. I was so happy when I got to that point...

Except that right before committing, I noticed a problem with some posts. See second post in screenshot...

So, what is it due to..? Very simple. Just do "code { display: none }" or equivalent, and it starts working again.
To be clear: the post with the code block acts like if postarea was 'wrapped' on line two (flex-direction: column on the post wrapper), then it gets reset to the desired position (on the right of the poster area), but it keeps the same dimensions.
This is 'fixed' by forcing .post width to 70%, but the first post will then show a postarea that's 70% of the expected width... i.e. whatever I do, the body that contains the code block, will always be ~30% wider than the body with regular text.

I've always hated code blocks and their silly devilish implementation (WTF really?! Just look at the bbc PHP for it...), but this is not just that... Any item that would usually get overflow:hidden like a gallery preview, will now overflow:visible out of the post div, and extend their post width just the same, so that postheader overflows as well.

This is with Chrome... Even if it works in Opera 12 and Firefox 21 (haven't tested), there's no point in keeping that tech around if it's going to fuck up like this on a whim. I mean, it's actually worse than using floats at this point...

Who got this wonderful idea, already, that only tabular content should use table tags..?!

 flexproblem.png - 46.81 kB, 670x786, viewed 240 times.


Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Flexible box model. It's easy, until it gets hard.
« Reply #1, on February 26th, 2013, 10:43 PM »
I have no idea why the code bbc is fundamentally so complicated. I have never really understood the need for the complexity but there must have been a reason for it :/

The use of flexbox is great, and will solve an ongoing complaint, but I got no idea how to fix it, sorry :(
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

MultiformeIngegno

  • Posts: 1,337


Nao

  • Dadman with a boy
  • Posts: 16,077
Re: Flexible box model. It's easy, until it gets hard.
« Reply #4, on February 27th, 2013, 08:09 AM »
overflow:auto in .post does nothing, in .postarea and .post_wrapper it forces the entire post to be inside the colored background, BUT it simply adds scrollbars to the post to achieve that, so everything is still distorted the same... I guess it's a bit 'better', but it also breaks mini-menus (don't ask me why... they get cut off. And yes they're absolutely-positioned.)

Re: Flexible box model. It's easy, until it gets hard.
« Reply #5, on February 27th, 2013, 03:06 PM »
Nao,

Sorry but off the top of my bean, that's what I think of, I have nothing to work with, except SMF you know!, but I will be thinking about it, this morning!

regards,
Maxx
Re: Flexible box model. It's easy, until it gets hard.
« Reply #6, on February 27th, 2013, 03:42 PM »
The bbc body code in the CSS( Style) I know you may be using something other than this, But it goes something like this

 and playing with the quote and or code portion of the BBC css code, i find these typical:

Code: [Select]
  border-style: none solid solid;    border-width: medium 1px 1px;    font-size: 0.9em;    line-height: 1.3em;    margin: 0 5px 8px 0;    overflow: auto;    padding: 8px;

However if you are working with the PHP coding to control this, that would bbe another story I guess!
and yes it does add scroll bar if you limit it to 70% or + or - 100 percent>

Overflow hidden did not work for me, on SMF, and you already have it wrapping so that's probably not the issue.

Please keep in mind, that my mind set is within the SMF index.css to control these things!

I will dig deeper in this today though!

regards,
maxx

Nao

  • Dadman with a boy
  • Posts: 16,077
Re: Flexible box model. It's easy, until it gets hard.
« Reply #7, on February 27th, 2013, 03:48 PM »
Yes! Yes!!!! YES!!!!!!! YEEEEEEEEEEEES!!!!!!!!!!!
Fixed!! At last!

Okay, ready guys...?

.postarea
   min-width: 0

That's all it took...

Thanks to this solution posted at http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text?rq=1
-- of course, finding it took me days... The closest I got before, was a tip to use 'width: 0', but it wouldn't work.
So, that's basically a hack... For a bug.

That's for the good news.

Now, the bad news: I've tested in Firefox, and the bug is just the same... Even worse, the horizontal scrollbar for the code block shows up, but it's showing like 99% of the very long line, and the code block is overflowing across the entire sidebar and even after... Now that's completely silly...

I'm not exactly back to square one, but it's not really encouraging... We're talking about a feature that's in Candidate Recommendation status, i.e. it's fully standardized, the algorithm is out, and... It's not working well.

Of course, when it comes to posting demos of the feature, I don't know if you ever looked, but authors usually just put a short place-holder like "Hello, world" in the box... This isn't exactly going to help spot any problems, like here... ::)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278

Re: Flexible box model. It's easy, until it gets hard.
« Reply #9, on February 27th, 2013, 04:08 PM »
OK for Firefox, if you set the max-width to 80% it stays inside some, but gives scroll bar ( H) !

But one thing I notice, even though you have the wrap tag, but the code I just posted does not wrap on Fire fox!

But your getting very close, it's hard to pleas all the browser, I know!

regards,
Maxx

Nao

  • Dadman with a boy
  • Posts: 16,077
Re: Flexible box model. It's easy, until it gets hard.
« Reply #10, on February 27th, 2013, 04:37 PM »
Nope, not getting anything with max-width, it just doesn't follow it.

I've also got a funny one with .postheader, where I'd removed the display:table stuff (you can see it here in action by watching the DOM...), in Chrome it works fine, in Firefox the div's height extends to a larger than expected height, making the border-bottom show up like 30 pixels below the actual text... Silly, silly, silly. I tried various tricks, to no avail for now. I can only get it to work with a max-height, but I don't want to set a max-height, obviously, because it can be shown over three lines...

So, I'm thinking that either I'll get rid of flexes altogether (not cool...), or I'll just drop Firefox from the list of browsers that we can mark as fully supporting flexbox. I don't like this either, though...

Re: Flexible box model. It's easy, until it gets hard.
« Reply #11, on February 27th, 2013, 04:45 PM »
this is how I see it in FF set at the following:

Code: [Select]
.bbc_code code, .php_code code {    background: none repeat scroll 0 0 rgba(240, 235, 255, 0.5);    border-bottom: 2px solid #999999;    border-top: 2px solid #999999;    display: block;    font: 8pt/1.5em Consolas,"Dejavu Sans Mono",Menlo,"Lucida Console","Courier New",monospace;    max-height: 24em;    overflow: auto;    padding: 3px 1em;    white-space: pre;    word-wrap: normal;}

I no your looking toward flex box, but not sure like say the FF is it for it! :)

regards,
maxx

 wedge bbc.png - 30.21 kB, 880x327, viewed 160 times.


Nao

  • Dadman with a boy
  • Posts: 16,077
Re: Flexible box model. It's easy, until it gets hard.
« Reply #12, on February 27th, 2013, 05:32 PM »
And... Fixed! (Again.)

So... After I confirmed that the original 'bug' was in all 3 implementations (tested in Chrome 27 (sic), Firefox 21 and Opera 12.14), and that min-width only 'fixed' it in Chrome, I started looking elsewhere...
Turns out that Firefox and Opera not only need the min-width hack, but they also need the contents to be devoid of any inline blocks.
And it just turns out that Wedge's implementation of .bbc_pre is an inline block.
Turning it back into a regular block makes it behave correctly in all three browsers. (Removing min-height breaks it again, so I had to leave it in.)

Now, the only issue is to determine whether it's thinkable to get rid of all inline-blocks that might overflow the post box...?
It may be 'only' due to some inline-block + nowrap combination, mind you. I haven't seen any issues with other inline blocks in the post area. (Buttons, etc.)

Still... Is it 'ready for prime time'..? I don't know. I'll test with my gallery previews, too.
Posted: February 27th, 2013, 05:25 PM

Nope, gallery items don't get cut off when overflowing, but apparently it's also the case in the regular CSS table style, so... I may have been wrong about that one. Same for videos... :-/
I don't know if it's best to cut them off on the side or have them overflow. I mean, it's less elegant, but it's probably more elegant than a scrollbar... I don't know.

Re: Flexible box model. It's easy, until it gets hard.
« Reply #13, on February 27th, 2013, 05:34 PM »
Well,

Looks like you have a plan in the works so Will bother any more unless I find something special LOL!

But no rush for me it's best to iron out the miner stuff, they seem to be the heart breakers, until it dawn ones mind, that it was a simple thing, (I hope)  :)

regards,
Maxx
Re: Flexible box model. It's easy, until it gets hard.
« Reply #14, on February 27th, 2013, 06:09 PM »
OK lets try another approach:

let play with the "inner" css code:

Code: [Select]
.inner {    border-top: 0 none;}.inner {    margin: 0 1em 0 0;    overflow: auto;                  <! ---- ad this --->
    padding: 0 0.7em;}

then try your bbc variations!

regards,
Maxx