search

Financial-Times / o-grid

Responsive grid system
http://registry.origami.ft.com/components/o-grid
93 stars 14 forks source link

Fixed positioned elements #9

Closed wheresrhys closed 10 years ago

wheresrhys commented 11 years ago

This seems to only work if the col is always at it's max-width, I think. If the column were naturally narrower, then when the element became fixed (in the sticky navbar scenario) it would change width. Could this be a case of using Javascript to support that use case rather than complicating the CSS? @triblondon

wheresrhys commented 11 years ago

Yep, the fixed position solution isn't fluid-friendly. I was also entertaining the idea of a js solution, but it would be a decent sized change to the module's inner-workings (sharing values between sass and js) and I doubt there's time/willingness to carry this out right now

triblondon commented 11 years ago

I don't think this is a grid concern though. You can just not support it in the grid module and if someone wants to suddenly turn an inline element into a fixed position element, then it would be up to them to handle any sizing discrepancies that occur as a result.

wheresrhys commented 11 years ago

I'll update the docs with another gotcha and remove (or put in a standalone, not-included-in-the-build file to serve as a reference). Leaving this issue open though to allow users to request this feature

wheresrhys commented 10 years ago

Could add the following to v2 Add a class o-grid-detached, and a js utility that, for each el which has the class, on load and resize or on calling a method creates a dummy copy of the el with position:static, appends to the original el's parent, measures it and sets the width on the real el. @triblondon

manalishi79 commented 10 years ago

Currently trying to create a sticky (fixed) left-hand nav in the UISG. It appears the grid needs to be able to accept JS to do this. Could we have that feature please :)

kavanagh commented 10 years ago

Paul. I don't think sticky should be a feature of grid.

wheresrhys commented 10 years ago

The stickiness itself: no but enforcing the grid widths: yes

triblondon commented 10 years ago

The two issues are separate. You need JS to do sticky nav (which techdocs has), and since the JS is already doing positioning and sizing of the menu it's no great difficulty to also match its width to the width of the grid column that it sits in when it's not sticky. Techdocs already does this, though maybe there's a bug, if so that could be raised against techdocs.

The issue in grid is the ability to have fixed width columns combined with flexible width columns. I don't think we have a strong enough use case for doing that, and it also tends to encourage less responsive solutions.