I have used 960gs to get a first version of some pages going (I am not the designer, but would like to have an approximate layout before handing it to one). It has helped me greatly, but now I am wondering if there is a CSS grid framework where the columns will expand/shrink to make use of all available space in the browser window. Using a 960 pixel top-level container in 960gs, even in my humble 1280-pixel-wide screen there are large empty bands on both sides.
Are there alternative grid systems where I can define a certain column to "grow" if the browser window is larger than expected?
Many thanks!
lara
There is a Fluid 960 Grid System too.
See this ala article on fluid grids and example. Also see this example.
I'd use Unsemantic it's from Nathan Smith who developed 960.gs.
Either that, or you can customize Twitter Bootstrap so that you only take the responsive grid and leave out all the other features that might be unnecessary for your project.
Try the Dead Simple Grid. You can set the columns to have fixed or percentage widths. Setting to percent will dynamically fill the available space. It is very simple (the entire css code is 250 bytes!) but surprisingly powerful.
Cascade Framework's grid system can do exactly what you want... and lots, lots more.
If you use the tag <div class='site-center'></div>, you get a centered div with a fixed width for desktop (width is different depending on browser width) and the full available width for mobile. You can, however, just drop that tag and use the full available width on desktop as well. See this website as an example of an implementation thereof.
The grid elements themselves are percentage based. That means that they fill up a certain percentage of the available width. Out of the box, Cascade Framework's grid system supports 60%/40%, 25%/75%, 33.33%/66.66%, 20%/20%/20%/20%/20%, 43.75%/31.25%/25%, 30%/30%/40% and far more combinations. In fact, you can even use combinations like 42.8571429%/{fill to 100%}, {fit content}/{fill to 100%} or {fit content}/30%/{fill to 100%}.
To be able to use Cascade Framework's grid system, I recommend you use either the file 'build-full.min.css' (about 8kb minified + gzipped) or the file 'build-full-no-icons.min.css' (about 10.8kb minified + gzipped) in the folder 'assets/css/cascade/production, depending on whether you want to include support for its icon set. You can also create your own build and pick only the modules you want. For the sake of brevity, I'm skipping details on how to do that. If anything isn't clear about creating your own build and you'd like to know more about this, please send me a PM to avoid derailing this thread by going too far off-topic.
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your builds include the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.
See also http://www.cascade-framework.com/grid.html and http://jslegers.github.io/responsiveness/ .
Related
I use a Grid Layout inside my app. The grid layout I set to some fixed sizes.
myBootGridLayout->setContentsMargins(3,0,0,0);
myBootGridLayout->setRowMinimumHeight(0,25);
myBootGridLayout->setRowMinimumHeight(1,25);
myBootGridLayout->setRowMinimumHeight(2,25);
wdgBootFeatues->setFixedHeight(80);
For the QPushButton I use a size rule:
btnSelBootImagePath->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::MinimumExpanding);
But as you can see on the image, the ComboBox and Buttons have the same size but the LineEdit field is smaller. What I do wrong? Is there a trick to bring them on the common same size (Height) like in the QT documentation?
In case your question is to understand how to make sure that elements will have the same height, we should consider the following:
Layout might not necessarily ensure that some elements will have same height you would like, since it also relies on the size (horizontal and vertical) policy of the element in layout itself. In case you want to have QLineEdit and QPushButton instances to have the same height, you should set minimum height for each of them. Probably, it would even make sense to make the height fixed (i.e. set both minimum and maximum height to be the same values) for such elements to fit your needs, since both of these elements by default have fixed vertical size policy. This is for the reason, since most apps treat buttons and one line text fields in the same way.
In most cases, combining QVBoxLayout, QHBoxLayout and then QGridLayout is not necessary at all, since QGridLayout is much more flexible, and combines QVBoxLayout and QHBoxLayout features in a single layout under the hood at the first place, this it will probably satisfy all your needs (i.e. to represent you elements in a grid manner). Also, construction of UI elements will be slightly faster if less elements will be used.
Qt documentation might have such an effect because of the following reason - elements were tested on a different device. Qt does not try to make identical style sheets for widgets' elements across all platforms, thus visual differences will be everywhere. On some operating systems, button height is smaller than text field height by default, and this is completely normal.
One approach to make sure that size will get bigger than by default is to change size policy (vertical in your case). Code snippet changing size policy is correct basically. However, size policy is different thing than fixed height across elements. However, if your button and line edit would be in the same row, and both would have minimum expanding vertical policy, probably these elements would have the same height in that row.
Thus, probably to make sure the height of your elements remains the same is to set some minimum (and maximum as well in case vertical size policy is fixed) height through code or Qt Creator. This would be the easiest and least painful from thinking perspective approach. I am not sure if I have answered the question (it looks like that you answered yourself in your own way), but I am sure that I have introduced some thoughts that might come in handy when understanding Qt layouts.
I am trying to achieve something, I want a main container and a sidebar at the rightside. which should deal with mobile layout as well, I was unable to find such thing or make it. The blue print is given in the image below. Thanks
BluePtint of what im trying to make
You can create this layout using div's with different ids or classes- your main body(red) could go in a div with class "#mainbody" and your sidebar(blue) would go in another div with class "#sidebar", then you can specify the dimensions in CSS.
Have you checked out a CSS framework like Bootstrap? Bootstrap makes it super easy to specify column widths with their grid system, so instead of having to state px or % width in CSS, you can add the class "col-md-3" to a column for a width of "3". Their system is based on units of 12, where 12 would be a full bar, 6 would be half etc: https://getbootstrap.com/docs/4.0/layout/grid/
I'm using ReactDatepicker and massively impressed by the number of customizations they offer right off the box, thank you very much for that.
Here is a real world problem I'm struggling with. As you can see there are three columns:
choose a show
pick a date
find tickets
Ideally, I would like datepicker to have a width equal to the width of the column.
There is some documentation provided:
https://reactdatepicker.com/#example-28
https://popper.js.org/popper-documentation.html
But maybe there is a magical modifier allowing me to say "take 100% width of the parent container"?
Currently I can modify the size by changing the width of an individual item:
$datepicker__item-size: 1.7rem !default;
https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/variables.scss#L16
But modifying that doesn't work for me - the column width as defined as % of the parent.
Here is code example: http://jsfiddle.net/gubvw/3/
If you'll slowly change screen size by dragging sizer in testing window you'll see that number columns scattered.
What can I do to fix this trouble?
UPDATE: This is for FLUID CSS GRID system to make layouts for webapps. I don't want to get table. And the example is for testing this grid on resize and other dimensions.
I think that the problem is in browser which calculates .cx1 to 55+43px and round it to pixels,
and .cx5 calculates to 449+43px not watchind that .cx1 rounded to 55px.
Specially for Dexter Huinda:
There is 100% width? and 12 columns with 3.8% margin right (except the last).
So for cx1 = (1*(100+3.8))/12-3.8 = 4.85%
for cx2 = 4.85*2+3.8 = 13.5%
for cx3 = 4.85*3+3.8*2 = 22.15%
and so on.
The main formula to calculate any column width from 1 to 12 is
(a*(100+b))/12-b (where a = number of spanned columns and b is margin)
Any questions to math?
And the question is why: width(4.85%+3.8%+4.85%+3.8%+4.85%) <> width(22.15%)
So if you need nothing to explain please find the mistake in any .cx width. Can you?
Either you should use div with fixed width that you may provide in your css file or you can make it via table. Actually your divs are not properly tightened together. This is the main reason.
I think your approach could do with some rethinking.
If you need to align columns, use either a table or use fixed width divs. You are using classes, so why not apply fixed widths via the class, and not the percentage widths that are there.
Using a fixed width font in conjunction could also give a desired effect.
Solution is here: http://jsfiddle.net/NwkPz/.
Thanx to Vasiliy Aksyonov (Web Standards Days) && Vadim Makeev (Opera Software)
))
Alright, so here is the situation...
Say I have a navbar for a site, and I allow users to change the number of links they want on this navbar. This means they could have 3, 5, 10, etc.
What I want to do is make it so that if one link is up, it only takes up, say, 1/5th of the space on the navbar. If I weren't using borders, I might do something like:
width: 18%;
padding: 0 1%;
However, I have two problems with this:
1) For 4 buttons, that's fine that it doesn't fill up the whole row. It would look ugly if the links were too wide... but when I have 6 or 7 buttons, it's got huge overflow!
2) Since I have borders, I can't use a percentage value for the borders or the widths, because I can't properly estimate how much of the percentage it will be.
Now, I know I don't have to use percentage values, but what I would ideally prefer is that the first button is the smallest possible size necessary for all the other buttons to fit properly, meaning that if I have 950px and 6 links, the first link can be about 150px while the others are 160px... that's fine. I want all the other buttons on the navbar to be equally sized, regardless of how many links there are.
I also need for it to accept a border... I figure the way to do this is to put a border in the nested div, so that way it doesn't effect the overall width of the button? This is all well and good, but I'm still plagued by the issue of not being able to design a dynamic site using the style I want if I can't get all the nav buttons to fit the width properly.
Are there some js tricks I could use? I don't even know...
Thanks
Edit: Here is my demo fiddle
A pure CSS solution, based on justification of the links, though still as semantic list items:
See demo fiddle.
Tested on W7 in IE7, IE8, IE9, Chrome 12, SafariWin 5, Opera 11, FF 4.
Update:
Concerning the width: Since you dynamically inject the navigation links into the HTML page, it likely is also possible to classify the navigation bar style.
See updated fiddle.
Here's a solution with jQuery
http://jsfiddle.net/pxfunc/kKJcr/
The menu is dynamically sized based on number of menu items and the width of the nav ul
var $nav = $('#nav');
var formatNav = function() {
var menuItemCount = $nav.children().length,
// base width
menuItemWidth = $nav.children().width(),
// border + padding + margin + base width of the menu item
menuItemOuterWidth = $nav.children().outerWidth(true),
// border + padding + margin only for the menuItem
menuItemDiff = menuItemOuterWidth - menuItemWidth,
// menu item container width (the <ul>)
navWidth = $nav.width();
$nav.children().width(Math.round(navWidth / menuItemCount) - menuItemDiff);
};
I did something like this at a previous job, but it did require a blend of JS and CSS.
One way to do it with JS - you need to simply take the total width of the navbar (minus padding, borders, etc, of course) and divide the number of buttons shown - then dump that out as the css width:width/numbOfbuttons%; on each button.
Just be careful not to hit exactly 100% cause this may cause wrap.
However - ideally (and the way we did it) this is much easier if you have a known number of potential buttons, or combinations.
Then, the solution is to set up a series of css classes designed to each scenario:
.oneButt a{width:widthThatLooksNotStupid%;}
.twoButt a{width:49%;}
/* etc */
And then just have the JS evaluate and set the specially designed class on the parent. Yeah..this requires a bit more CSS writing, and requires that you don't have an infinite number of potentials...
.ninehundredsevetyfiveButt a {width:FFFF;}
.ninehundredsevetysixButt a {width:UUUUU;}
...right. BUT - you get to set up a nice styling that actually fits various scenarios.
UPDATE from my comment below. Use general uh...classes...of situations, and apply these via JS:
.notEnoughToFillSpaceCruizer {width:wide;}
.enoughToFillSpaceCruizer {width:notAsWide;}
.jekPorkins {color:fuschia; font-size:99em; content:"You've got a problem..."; /* the user has failed, administer punishment*/}
Maybe you should question your design of trying to fit a dynamic number of buttons onto single row. I think the best design for you is a drop down navigator (like a window menu). That way it doesn't matter how many nav options the users adds, the design is still useable.
If you simply must have a nav bar with no drop downs, the short answer is to use a <table> if you need to support older browsers. At least a table will not wrap, but at some point the design of your site will look awful if it's squashed too much.
I'm sure there could CSS3 answers but I dont know them.