I have a table that I'd like to override the row height of, as the rows are just too tall. I tried setting a class on tr on my own css and setting the height value.
CSS: No seriously, that's all the css for this template. And html
tr.unitGridRow {
height: 20px;
}
<tbody>
{{#each unitInService}}
<tr class="unitGridRow">
<td>
<div class="chip" style="background: {{unitColorCode}}; color: {{unitTextColorCode}};">
{{callSign}}
</div>
</td>
<td>{{currentStatus}}</td>
<td>{{timeInStatus}}</td>
</tr>
{{/each}}
</tbody>
but the row height never changes. I'm using Meteor 1.5.0 and Materialize 0.98.2 currently.
Any help is greatly appreciated,
This might come too late, but may help for future googlers.
The row height is fixed because of the padding. Manually modify the padding in css, that should do the work. At least it worked for me.
The unit vh stands for 'viewport height', and the number represents a percentage of the viewport height. So 1vh means 1% of your window height. Thats very small, and a table row doesn't want to be smaller than the height of its content. Set this to 50vh and see what happens. Not sure what you are trying to achieve, but vh doesn't seem like the right unit for a row height. If the rows are too tall, there must be something inside them making them tall.
Ok, after digging in and messing with this a bit more, I found that the (column in the row) also had to be overridden for the height setting.
Related
Good morning everybody!
I'm trying to make a table with size based on %. The width works fine, but i'm having some problems with height. When te user resizes the screen to a certain size the table just stop decreasing it's height, growing outside the div. Below some prints:
Normal size
Resized screen
I've already tried to change the display, the overflow, the position, all without success. When it comes to a certain size the table just stop decreasing it's height.
Below the css to the table and the parenting div:
.tblMotivos {
table-layout:fixed;
border: 0 solid white;
-moz-box-sizing: border-box;
width: 100%!important;
min-height: 100%!important;
}
.divFundoMotivos{
padding: 0 !important;
background-color: white;
height:88%!important;
}
And the HTML:
<div class="col-sm-12 divFundoMotivos">
<table class="tblMotivos" border="1" id="tblMotivos" style="table-layout:fixed;">
<thead style="background-color:darkgray;">
<tr style="border-color:white;">
<td class="tdHeaderMotivos" style="width:44%;padding-left:1%;">Motivo</td>
<td class="tdHeaderMotivos" style="width:16%;">#</td>
<td class="tdHeaderMotivos" style="width:20%;">Meta</td>
<td class="tdHeaderMotivos" style="width:20%;">Perf.</td>
</tr>
</thead>
<tbody>
#if motivos.Count > 0 Then
#for each motivo As motivoRetencao In motivos
#<tr>
<td class="tdBodyMotivos" style="padding-left:2%;">#motivo.motivo</td>
<td class="tdBodyMotivos tdBodyMotivosValor">#motivo.qtde</td>
<td class="tdBodyMotivos tdBodyMotivosValor">#motivo.meta %</td>
<td class="tdBodyMotivos tdBodyMotivosValor fontWhite" style="#(If(motivo.performance >= motivo.meta, "background-color:green", If(motivo.performance >= ((motivo.meta * 85) / 100), "background-color:yellow;color:black!important", "background-color:red")))">#motivo.performance %</td>
</tr>
Next
End If
</tbody>
</table>
</div>
Thanks in advance. Best regards.
i agree with using media query
here is the default media query used by twitter bootstrap
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
implementing that media, you will need to adjust some properties such as font size, etc based on screen size to fit your need
I've had similar issues with css display: table; mixed with the height property also in the past. Most browser consider the height on browser property to be actually min-height. If the table require more height, it will simply take it... And min + max-height are not considered by Firefox (but they are by Chrome).
Your best bet would be either doing responsive content INSIDE the table, using inline-block or flexbox instead of table or try to use some javascript for responsiveness...
Hope it help.
Guides that might help you:
Guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Guide for centering in css: https://css-tricks.com/centering-css-complete-guide/
References:
min-height and table cells
from: http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.
from: http://www.w3.org/TR/CSS21/tables.html#height-layout
The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height). CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values. CSS 2.1 does not define the meaning of 'height' on row groups.
In CSS 2.1, the height of a cell box is the minimum height required by the content. The table cell's 'height' property can influence the height of the row (see above), but it does not increase the height of the cell box.
You could try making the text responsive, this would give you some more space.
or you could use a media query to remove the margins between the cells at certain heights.
I'm curious to know how you resolve the following problem.
Using Bootstrap 3 with 24 columns and grid-gutter to 30px.
In wide display, I use col-7 for the sidebar left and col-17 for the main content. The problem is bootstrap is calculating the widths with percentage. So I have 339.5px (29.16667%) for the sidebar, and 824.484px (70.83333%) for the content.
<div class="row">
<aside class="col-lg-7">[sidebar]</aside>
<div class="col-lg-17">[main content]</div>
</div>
Now, I use some scripts like lazysizes and lazyaspectratio to lazy-load my pictures and have the image container kept the same dimensions even if the image is not already loaded. With lazyaspectratio, the width must be 100% to recalculate the height to keep.
BUT... because there is a but... if my main content is 824.484px width, the picture is 824.484px width too, and picture quality is bad. Assuming my picture display must be 824px, the final picture display is shitty and I lost quality, even if the ratio is respected.
My question is : how to bypass this problem with img > width=100% ?
I saw on several threads that people "fix" the width of the row children, like this :
div.row > aside.col-lg-7 {
width: 340px;
}
div.row > div.col-lg-17 {
max-width: 824px;
}
It seems a good solution to keep img > width = 100% and have integer columns width, but with this solution, I must add lot of css rules to manage for multiples col-* and multiples media-queries...
And you ? how do you solve this kind of problem ? Because I think using img-responsive class with width=100% cause quality loss on percentage based width with Bootstrap 3... I'm sure that I'm not the only one to encounter this problem.
Thanks in advance for any suggestion.
Andrejs: You can customize bootstrap at: http://getbootstrap.com/customize/
titouille: You could create a Javascript that rounds the images widths down based on their classes or parents.
For each image element you read in the width of the col or parent and set it (rouded down to 1 px) as it's max-width
I have HTML such as:
<html>
<body>
<table>
<tr>
<td>
<img style="width: 300px; height: 300px;"></img>
<img style="width: 300px; height: 300px;"></img>
</td>
<td>
hello world
</td>
</tr>
</table>
</body>
</html>
When the page/window is decreased in width, the second image is pushed below the first image.
My question is: Why doesn't the TD cell shrink to to 300 width with the images are stacked? It seems to stay unnessarily large - causing an ugly gap to be between the images and the text of the next cell. Is there any way to force the cell to either 600 or 300 in width depending on how much room there is?
To understand the behavior of the table layout in your example, you need to review
the table width algorithms used by CSS to visually lay out the table:
http://www.w3.org/TR/CSS21/tables.html#auto-table-layout
The table width algorithm looks at the content in the cells making up each column and
determines a mininum and maximum value for the column width. The algorithm then tries
to allocate enough space to each column taking into account any specified column width
values, specified table width and so on.
In this case, the browser tries to allocate 600px (plus a bit for the white space between the two images) and some width for the text in the second column.
If the window is wide enough, all the content fits in a single line in each table cell.
However, as the window width shrinks, the algorithm will shrink each column width (the details here will vary among browsers since the CSS specification does not prescribe a detail algorithm).
The algorithm appears to be shrink each column proportionately. For the first column, this forces the images to wrap with the gap to the right. In this case, the algorithm
does not do a second pass to redistribute the excess space. The algorithm works pretty
well if you are wrapping words. However, when the content is a 300px wide image, the
result is big (ugly) gaps.
So, the table is working as it should, but the results are not ideal.
The table width algorithms try to be efficient by minimizing the number of times it
loops through the content to determine widths and heights. In this case, a more
sophisticated algorithm would be needed to get more pleasant results, but it would also
be a bit subjective.
Note: To fix the layout problem, you would have to build a JavaScript function to do the
math to get the column width to work out. I think this could be quite difficult to make
it foolproof.
You could add style='white-space: nowrap;' to thetd element to prevent the wrapping.
http://jsfiddle.net/mpWn3/
Take the widths away from your image tag. Add them in css for a start...
table img {max-width:100%;}
but yes - you would be better off with making it responsive. This is possible with tables. Read this article: http://css-tricks.com/responsive-data-tables/
My short answer would be to stop using tables and dive into a responsive div layout.
<div class='con'>
<div class='picture_con'>
<img src='img1.jpg'></img>
<img src='img2.jpg'></img>
</div>
<div class='text_con'>
Your text here
</div>
</div>
And then make it work with css
.con {
width:100%;
}
.con .picture_con {
display:inline-block;
}
.con .picture_con img {
width:300px;
display:inline;
}
.con .text_con {
display:inline;
}
This is all very well for big screens but now we need to deal with smaller screens. To do this we use #media css queries
#media(max-width:600px) {
.con .picture_con {
width:300px;
}
.con .picture_con img {
display:block;
}
}
Edit: If tables are really necessary
Here is an example of a responsive table design that does the job aswell
http://jsfiddle.net/4VHd5/
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
This isn't really a problem as such, but I would like to know what's going on so I can understand it. I'm currently coding a new website which has required me to use a single table in the footer of the design. (I don't often use them, but this table just makes life a lot easier for this project.)
I am using a CSS class for the tables td with the only element being width:%; but for some reason I just can't understand, increasing the % from 10% to 20% actually makes the td's smaller in width. totally backwards.
I'm really stumped by this one, can anyone explain this?
HTML:
<div class="footertable">
<table border="2">
<tbody>
<tr>
<td valign="top" class="footer">
<div class="footerheading">SHOPPING</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">CUSTOMER SERVICE</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">PAYMENT OPTIONS</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">SOCIAL</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">ORDER</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}
Notes:
The strange behavior happens for percentages lower than 24: from 15 to 23 the total width decreases, and from 23 to 24 it suddenly expands. For percentages higher than 24, you have normal behavior.
It doen't matter if you specify max-width or just width for the table
The problem is reproduceable in chrome, firefox, opera and IE9
jsFiddle here: http://jsfiddle.net/BPygA/
Table layout has its fans and haters, but one thing is for sure, it's an advanced maneuver. It's like a combination of forces, some weaker, some stronger, that ultimately determine your column widths. And there's a lot of input variables:
table-layout:fixed or not
Table has a specific width (in pixels or percent or not at all)
Do all columns have widths?
Is there a colgroup element in the table?
How much space is available for the table?
Do any cells have non-breakable content?
It's kind of a nightmare for the inexperienced.
In your particular situation you table has no specific width, meaning it'll be the sum of the widths of the columns. But the columns are sized in percentages, which would be percentages of the total table width. You can see this is a chicken-and-egg problem.
Also using percentages that don't add up to 100% is kind of undefined.
I'd take a step back and think about what you're trying to achieve exactly.
I can see the behavior switching between 10 and 20% width on the table cells.
Adding a width to the table itself (not the containing DIV) changes the behavior:
http://jsfiddle.net/BPygA/2/
Without a width on the table itself, the browser is making a best guess on how to display the cells based on their content. I'm not sure why it chooses a smaller width when the percentage is set to a larger number, but it's a non-deterministic calculation so the browser is free to do what it wants (see spec below).
In other words, without a width on the table you are telling the browser that each cell is 10% of a variable value that it is free to determine.
Another consideration may be that the table has 5 cells. Setting each one to 10% results in a total width of only 50%. Once again, the browser has to guess about the total width, but also has to determine what to do with the remaining 50% that is not accounted for.
As #Jacob pointed out the W3 defines recommendations (but only recommendations) to guide user agents in how to render tables.
This algorithm reflects the behavior of several popular HTML user
agents at the writing of this specification. UAs are not required to
implement this algorithm to determine the table layout in the case
that 'table-layout' is 'auto'; they can use any other algorithm even
if it results in different behavior.
The UA should try to use the requested percentage, but it may not always be possible.
A percentage value for a column width is relative to the table width.
If the table has 'width: auto', a percentage represents a constraint
on the column's width, which a UA should try to satisfy. (Obviously,
this is not always possible: if the column's width is '110%', the
constraint cannot be satisfied.)
http://w3.org/TR/CSS2/tables.html#propdef-table-layout
I would be curious as to a better explanation.