Did you set the amount of columns on your GridLayout? You can configure a GridLayout to only use 10 columns instead of 12 by editing the datatype of your grid under developer. Se image:
If you are using the grid in this manner, you might want to consider creating your own render template. This way you can edit what classes get put where and what containers. Infact, you could probably remove the containers all together as for your scenario they may not be needed.
Then when you call the grid rendering code you just pass in the name of the new template to use to render it.
GridGetHtml defaulted to Partials > Grid > Bootstrap3.cshtml for rendering.
I copied this file (CustomBootstrap3.cshtml) and only changed the class="container" to class="container-fluid". This uses percentages instead of pixels and fixed the problem.
That template can be customised as much as you like, it allows you to use different frameworks if you don't want to be using Bootstrap as well. So other grids like Foundation can be used.
Use GridLayout alongside a vertical navbar
I'm using Bootstrap to construct a vertical navbar on the left hand side 2 columns wide and the body the remaining 10 columns wide.
When I use a GridLayout in the 10 columns, it renders 12 columns wide, because, I think, of the container class in the grid layout mark-up.
Not sure how to fix this problem. I would appreciate your suggestion.
Thanking you in anticipation.
Roger
Hi Roger.
Did you set the amount of columns on your GridLayout? You can configure a GridLayout to only use 10 columns instead of 12 by editing the datatype of your grid under developer. Se image:
Thanks. I had tried this but when adding a row it still inserts a container class which is 1170 pixels wide.
Hi Roger,
If you are using the grid in this manner, you might want to consider creating your own render template. This way you can edit what classes get put where and what containers. Infact, you could probably remove the containers all together as for your scenario they may not be needed.
Then when you call the grid rendering code you just pass in the name of the new template to use to render it.
Thanks, Nik. Fixed!
GridGetHtml defaulted to Partials > Grid > Bootstrap3.cshtml for rendering.
I copied this file (CustomBootstrap3.cshtml) and only changed the class="container" to class="container-fluid". This uses percentages instead of pixels and fixed the problem.
I called CustomBoostrap3.cshtml with:
@CurrentPage.GetGridHtml("gridLayout", "CustomBootstrap3")
Bingo!
no problem Roger.
That template can be customised as much as you like, it allows you to use different frameworks if you don't want to be using Bootstrap as well. So other grids like Foundation can be used.
is working on a reply...