asked on
Displaying Many Boxes (Portlets) On A Large Display
Hi,
I am building a new web application for a client. They currently manage their business using a large excel sheet on a 27" monitor.
This allows them to view 8 shops (data) on one excel sheet.
I am using Bootstrap to build their web app and their no. 1 requirement is that the dashboard can display data for 8 shops on one screen, in a card / portlet format.
Do you think this is possible in Bootstrap? For example I could use an 8 column grid but how can I stretch each column so they are big enough for a portlet (shop) on the 27" monitor?
Any help or advice on this would be greatly appreciated. Thank you.
I am building a new web application for a client. They currently manage their business using a large excel sheet on a 27" monitor.
This allows them to view 8 shops (data) on one excel sheet.
I am using Bootstrap to build their web app and their no. 1 requirement is that the dashboard can display data for 8 shops on one screen, in a card / portlet format.
Do you think this is possible in Bootstrap? For example I could use an 8 column grid but how can I stretch each column so they are big enough for a portlet (shop) on the 27" monitor?
Any help or advice on this would be greatly appreciated. Thank you.
BootstrapCSSHTML
Last Comment
Michel Plungjan
ASKER
Thank you.
I guess what I'm trying to explain is that each portlet (shop) will be 300px wide, so it will probably display 4 across on a normal screen but how can I get it to display 8 across on the large screen?
I guess what I'm trying to explain is that each portlet (shop) will be 300px wide, so it will probably display 4 across on a normal screen but how can I get it to display 8 across on the large screen?
Don't think in terms of pixels. You'll drive yourself crazy!
Bootstrap has a much more elegant solution.
In Bootstrap, you create a div with a class name. The name of the class corresponds to the number of columns.
In other words - all you have to do is tell Bootstrap you want 4 columns (or 8 columns, whatever you prefer). Bootstrap will calculate the width automatically.
Make sense?
Another added bonus ... while it's true that everyone in the company will view your app in all its glory on a 27 inch screen, once your app is built using the Bootstrap framework, view that exact same web page on your smart phone, and like magic, the boxes are now stacked on top of each other instead of shrinking to 4 or 8 microscopic columns, side by side.
With responsive design you'll be thinking in terms of percentage, not hard-coded pixels.
Bootstrap has a much more elegant solution.
In Bootstrap, you create a div with a class name. The name of the class corresponds to the number of columns.
In other words - all you have to do is tell Bootstrap you want 4 columns (or 8 columns, whatever you prefer). Bootstrap will calculate the width automatically.
Make sense?
Another added bonus ... while it's true that everyone in the company will view your app in all its glory on a 27 inch screen, once your app is built using the Bootstrap framework, view that exact same web page on your smart phone, and like magic, the boxes are now stacked on top of each other instead of shrinking to 4 or 8 microscopic columns, side by side.
With responsive design you'll be thinking in terms of percentage, not hard-coded pixels.
ASKER
Great, thanks.
Yes i understand the responsive grid but i can't seem to get my head around how a portlet that needs 300px (i know you said not to say that but that's the minimum amount i can get away with for each portlet).
I just can't get my head around how i can set it to show 8 across on a large 27" screen and 4 across on a normal 15" screen.
Yes i understand the responsive grid but i can't seem to get my head around how a portlet that needs 300px (i know you said not to say that but that's the minimum amount i can get away with for each portlet).
I just can't get my head around how i can set it to show 8 across on a large 27" screen and 4 across on a normal 15" screen.
> i can't seem to get my head around how a portlet that needs 300px...
What is this 300px requirement? Are these iframes that are hard-coded to 300px and there's no way to resize them?
> how i can set it to show 8 across on a large 27" screen and 4 across on a normal 15" screen
Modern browsers have the ability to automatically detect the width of the window. If it sees you have a 27 inch monitor, it will automatically dispaly 8 across. If you view that exact same web page on a 15 inch screen, it will automatically display 4 across. Media Queries make this possible, and is the foundation of Bootstrap.
What is this 300px requirement? Are these iframes that are hard-coded to 300px and there's no way to resize them?
> how i can set it to show 8 across on a large 27" screen and 4 across on a normal 15" screen
Modern browsers have the ability to automatically detect the width of the window. If it sees you have a 27 inch monitor, it will automatically dispaly 8 across. If you view that exact same web page on a 15 inch screen, it will automatically display 4 across. Media Queries make this possible, and is the foundation of Bootstrap.
ASKER
300px is not the exact requirement but when i design the shop portlet, i need to use a minimum of 300px in order to capture everything that they want displayed.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Great help Eric. I'll try Bootstrap on a large screen next week and try get a feel for options. Thank you.
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.
I have recommended this question be closed as follows:
Accept: Eric C (https:#a41730282)
If you feel this question should be closed differently, post an objection and the moderators will review all objections and close it as they feel fit. If no one objects, this question will be closed automatically the way described above.
mplungjan
Experts-Exchange Cleanup Volunteer
I have recommended this question be closed as follows:
Accept: Eric C (https:#a41730282)
If you feel this question should be closed differently, post an objection and the moderators will review all objections and close it as they feel fit. If no one objects, this question will be closed automatically the way described above.
mplungjan
Experts-Exchange Cleanup Volunteer
By default, Bootstrap is based on a 12 column grid system (but you can customize that).
Take a look at this page - it gives an overview of the default grid system and how you can break up 12 columns into 2 columns of 6, or 3 columns of 4, etc.
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
If you've got 8 "boxes" that you want to arrange in Bootstrap, using the standard 12 column layout you can stack them into 2 "rows" of 4 boxes.
In other words:
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
or if it's more desirable to have all 8 boxes in a single row (from left to right), then you can generate and download a custom Bootstrap configuration, where you tell Bootstrap you want to use an 8 (or 16) column grid system instead of 12.
To do that, just go to http://getbootstrap.com/customize/ ... scroll about half-way down the page, look for the 'Grid System' section and change the 12 to an 8 (or maybe better, 16).