search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
327 stars 12 forks source link

Initial width of inputs not taken into account when placed on a column span #95

Open asuceava opened 7 years ago

asuceava commented 7 years ago

https://jsfiddle.net/vbhb45ou/

We are trying a transition to CSS grid for our application, and this is a scenario that may happen very frequently, since we tend to have complex layouts. The idea is that when all components on a single column are hidden, and the only ones left visible are part of a colspan, they are flattened, and their initial preferred width (based on the size attribute) seems to be ignored. It looks like it's the same in all browsers.

Is there any explanation for this phenomenon, and potentially any workaround? Thanks!

rachelandrew commented 7 years ago

I'm afraid I don't understand the question, what are you trying to achieve?

asuceava commented 7 years ago

By using the 'Toggle visibility' button, you can see what I mean. The blue inputs will all get hidden, and the only inputs that remain visible are part of a colspan.

Since they all start on a column with min-content , shouldn't the size attribute that I specified for them be taken into account? Is there any exception to how the min-content behaves when a grid child spans multiple columns?

rachelandrew commented 7 years ago

I can see the jsfiddle, I don't understand what outcome you want.

asuceava commented 7 years ago

Something like this, after I toggle: capture

rachelandrew commented 7 years ago

I'm afraid I can't make head nor tail of what you are trying to do, maybe someone else will have an idea. It's very hard to see what is going on with all those inline styles etc.

Perhaps produce a simplified test case.

asuceava commented 7 years ago

Sorry for being ambiguous. I simplified the fiddle as much as I could: https://jsfiddle.net/asuceava/Lgsmz88t

I also managed to produce a sample of what I expect should happen. Have a look at what happens when I remove #panel1 and its .cssgrid: https://jsfiddle.net/asuceava/Lgsmz88t/1/

I was really curious as to why my size="50" on #colspanned is ignored in the first sample, but not in the second one.

In theory, computing the width in reverse order (child-to-parent) should give: #colspanned has a size of 50 <- should be the min-content on its track after we toggle #subpanel > .cssgrid is an inline-grid, so it should inherit this width (+ Label 1's width + 4px gaps) #subpanel is inline-block, so it should get the width of its .cssgrid #panel1 > .cssgrid has only 1 column with min-content, so it should get #subpanel's computed width #panel1 is inline-block, so it should get the width of its .cssgrid So the final width should be #colspanned + Label 1 + 4px gaps.

This seems to happen nicely without #panel1, but I can't figure out why.