Ok, using the latest version of Bootstrap
Trying to set a column in my ROR application to a background color.
Here is the code (it's in HAML)
.row.testing
.col-lg-2
= render 'blah/blah_testing/
= yield :sidebar
.col-lg-10
= yield
I am trying to have the col-lg-2 column display a background color in its entirety regardless of how many rows there are, otherwise it stops when the last row stops.
The height is dynamic. And the width is set by bootstrap. And I don't think I can use table settings to set the column's background because that seems to rely on fixed measurements?
EDIT
Have simplified this question extensively .
Instead of height:100% use viewport heights.
You CAN use height:100% for a column, but you must set the body's height to 100% in CSS as well. It's cumbersome, once I discovered Viewport Units I've not used it since.
Alternatively as mentioned above, you can use a bit of a new CSS element called vh (do a quick google of "CSS vh unit" and you'll get a better explanation if you'd want to read more. [there ARE other viewport measurements you could find if you do read into it further])
Anyways back on point, for your row, give it an ID, let's say id="myRow" then set its height in the CSS to height: 100vh
One VH unit is equal to 1% of the screen size. So 100vh would be the full screen height, 50vh would be half screen height. (This unit is -supposed- to be dynamic, BUT I believe only the current version of Firefox has built in support so far...but don't quote me on that, been a while since I read the Viewport measurements doc.)
Here's a handy link/explanation to check out
https://css-tricks.com/viewport-sized-typography/
Related
I want my site to stop resizing (stop being responsive and lock at the desired size) after user minimizes it to a certain point lets say 10inch screen in pixels and when u scroll left of right it is not responsive after that point.
I have tried
body {
min-height:30%;
min-width:30%;
}
But nothing happens at all.
percentage
The percentage CSS data type represents a percentage value. It
is often used to define a size as relative to an element's parent
object. Numerous properties can use percentages, such as width,
height, margin, padding, and font-size.
use min-height:30vh instead of min-height:30% same goes for min-width:30vw for min-width:30%. But if you want to use % you then have to set the width and height of the parent element
:root{width: 100vw; height: 100vh}
or
html{width: 100vw; height: 100vh}
you are looking for media query my friend. check this out:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
you'll use a media query to specify the pixel size (and other options) for example 600px max width is a good measurement for phones. inside the query, you'll write regular CSS to apply under those size conditions.
let me know if you need samples, i'll send you some of my code to help.
here is another good post on stack
Media Queries: How to target desktop, tablet and mobile?
I'm building a responsive website and I'm wondering what unit I should use? I've seen a lot of sites using pixels (px) for measurements and I've seen some using percent (%). Is there a preferred — or right — way of doing responsive design?
I've found percent to be hard to use, since it makes calculations hard and I've ended up with values like 2.754% and so on when setting widths/margins etc. Pixels seems easier, it's just simple addition and subtraction, but I've read that it isn't "future proof" or something like that and wont scale properly if the user zooms in the browser window. Is that still true?
If you have any experience or expertise, please share! I would love to hear what you guys have to say!
Thanks!
For layout type things like the sizes of boxes, you want to use % because you will typically have several columns sized as a percentage of their parent that will stack on top of each other at a certain breakpoint (width:100%). No other unit will allow you to fill 100% of the space like % does.
For padding/margins use em, normally you will want to space your elements out relative to the size of your text. With em (the with of an 'M' character) you can quite easily say I want approximately 1 character spacing here.
For borders you can use px or em, there is a difference though. If you want your border to look like it's one pixel wide on all devices, use 1px. It may not be one pixel on all devices however, high density displays convert 1px into 2px for example. If you want your border to be a size based on your font, use em.
For fonts use em (or %), the use of em carries through parents to children and it just a nicer unit to work with over px.
Of course you must use percentage. But with the min-height, max-height, min-width, max-width CSS keys.
For the next generation
vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height.
For responsiveness they are going to be the new units.
Use percentages along with min-width and max-width in pixels. This stops percentages making your divs too small or too large. eg
div {
width:100%; //full width of browser
max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding
}
For layouts vh and vw are good because they are relative to the device's view port. They give you the possibility of designing with the view port of the device in mind. With this said you know what will show on the window and what won't without being too careful.
For text em is best because if it's responsive features.
I would like to know if it's possible, in a table where width=100%, and where each column width are % value, to get for the last column a fixed width?
If yes how?
The short answer would be no, not with CSS in a simple way. It is quite troublesome to mix fixed and relative width for obvious reasons.
There is however a new CSS3 feature calc() that can be used to let the browser calculate the proper width.
Notice Unfortunately it is still just experimental, and has limited browser support.
You could do it using CSS:
#mytable td:last-child {
width: 50px; /* change to whatever you want */
}
If your site requires JavaScript anyway, you could manipulate the width after rendering.
Let the browser render your table with relative column widths close to an ideal but without setting the last one to be fixed.
Read the width of the rendered table.
Subtract the width you would like the last column to have from the table width.
Calculate the width for the remaining columns by percentage using the value from 3. as 100%
Set all column widths programatically
I am using Yahoo's UI Grids to structure most of my pages. One of my pages is a Google map and I need about a 400 pixel fixed left column to put map legend information into. YUI Grids however only offers 3 columns for their 100% page layouts, namely 160px, 180px and 300px.
Is there a way that I can customize their 'template 3' which provides the 300px column to get my 400px column I need?
I've determined how to do this. Kudos for Nate in the YUI forums for pointing me in the right direction.
To set a fixed left column, you need to divide the column pixel width by 13 to determine the em's for all non-IE browser's. For IE, divide the column width by 13.3333
e.g. wanting a fixed 480px width, 480/13 gives me 36.9231em for non-IE and 480/13.33 is exactly 36em for IE
Using template 3, the CSS is:
.yui-t3 .yui-b {
float: left;
width: 12.3207em; *width: 12.0106em;
}
.yui-t3 #yui-main .yui-b {
margin-left: 36.9231em; *margin-left: 36em;
}
Also, if you want to tweak margin's e.g. zero margin, you can do something like:
#doc3 {
margin: auto 0;
}
Grids is presently deprecated in YUI 3 - a bit of a shock when I saw that. There will be some browser(s) that drop off the A category in July and as a result, Grids will be reworked given that some of the initial design decisions were based on older browsers of course.
There is definitely a way. I think its just a matter of tweaking the CSS to either add in another 400px column, or modifying an existing column to fit your needs. If you are adding another column, be sure to account for the additional width (plus margin) and either reduce width on other elements, or increase the width of your containing element.
If the layout is using 100% width of the browser, width may not be an issue, but if your content is wrapped in a container element which holds all of your columns, be sure to adjust the existing elements to make up for the size of your new column.
EDIT: Also if you are dealing with 100% width layouts, its probably better to size your columns using percentage, instead of a fixed pixel size. Since the containing element for your columns will be the user's screen, if you use percentage then the column sizes should adjust relative to their resolution/window size.
If you want your new column to appear on the left of the your other columns, typically you would place it before the other columns in your markup, and apply a "float:left" property. But, take a look at how the other columns are set up in the YUI CSS, and follow their method.
I hope that helps.
Acorn
I'm displaying some tabular data on my website so I decided to use some tables. Is it a best practice to use fixed width for your table columns (i.e., 100px) or to use percentage based widths?
I would not recomment fixed widths, as the browsers text size may be different.
The correct thing is to do nothing at all! Leave the table to size itself. Forcing the table to be 100% wide is an option, but can leave alot of whitespace.
How big will the table be on my mobile phone, TV set or desktop PC? The more you force a layout the worse it looks on unexpected platforms.
I agree with Quigley, however the "right" approach depends very much on your specific context. If you have to just display plain data on a website, basically just printing out HTML formatted data, I would also leave the table as it is. What you should do is to set it's width to 100% s.t. it expands on the whole width of the page. If it resides inside another container (such as div or other tag), it will expand to the width of that container.
If however you want to have your table just expand to a certain width, I would go for percent values instead of fixed tables, mainly because of the fact that your users will have different display sizes and resolution and therefore the according browser window with may vary. In such a case I would however consider attributes such as min-width that specifies the minimum width that your table will get. The attribute works perfectly on Firefox, Safari etc.. however on IE (as usual) you have to do a trick to achieve min-width by adding something like the following to your CSS class (which you add to the enclosing container of your HTML table or to the table itself):
width: expression( this.scrollWidth < 70 ? "70px" : "auto" );
This is just an example that specifies a minimum width of 70px, otherwise it doesn't set any width. You can customize it to your needs.
Fixed pixel widths are definitely the worst option. Percentages are much better. If you want to define column widths relative to other elements on your page, the best option is to use CSS and a unit like em that is relative to the text size.
For tabular data, I think relative (percentage) should be good.
But if u feel screen size may screw up your tables, go for the fixed approach.
I use(d) proportional widths extensively with HTML that has to work in browsers and CSS2XSLFO.
However Firefox 3.x has removed support for PCW widths in table columns.
See https://bugzilla.mozilla.org/show_bug.cgi?id=333352
So you'll have to use % widths.
I never use fixed widths (such as 50px), however I do use em or ex units in addition to pcw or percentage widths.
In regards to DeadAccount's answer, don't use W3Schools, they have a habit of having half-correct information.
http://w3fools.com/
Also, I'm pretty sure best practice is making a percentage instead of a fixed width, because as others said fixed will mess up in other browsers if they're using different settings than yours. Best practice could just be to leave it alone, however.