I have a grid view and i want it to take the fix width a give it. for the columns that are too long, I want it to break then into rows and merge my fixed width . So far some one suggested putting the grid in div as below.
.container
{
width : 1000px;
height:auto;
float:left;
overflow:hidden;
display:block;
}
<div class="container">
my grid here
</div>
i did this and it successfully fix the width by cutting the remaining three columns that fall beyond the width. Please i need something that will force the grid to merge in everything in to given width by breaking long columns in to rows. Any help would be apprecaited.
May be this will help you...
You can fix the column width like this
<asp:BoundField DataField="" HeaderText="" ItemStyle-Width="5%" ItemStyle-VerticalAlign="Top" />
but if your data is too big to fit in there then you have to make short your data to fit in there.
Related
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'm new to CSS and gave up trying to make my table working - would like to ask for some help.
What I need to do is to display a table occupying 100% of screen width (single row, for example), containing 24 columns (cells). Each cell contains a value of random length. Because of each value is too wide, cell is being extended to display the value (fit the length), and total width of the table exceeds 100% of screen width. I need each cell to occupy 1/24 of screen width and hide characters which does not fit cell width. Of course this should work for resizing this table.
Any ideas how to implement this? I tried playing with
overflow: hidden
but it didn't help much.
Thanks in advance!
Fixed layout
table{
width:100%;
table-layout:fixed;
}
and to hide the data which overflows
td{
overflow:hidden;
}
if you want all table cells same width, apply following property to table
{table-layout: fixed;}
This property is support by almost all browsers. so, you shouldn't worry about it.
I am trying to create a layout that automatically re-sizes the widths of of container to fit the remaining space of the parent. Sort of like this:
The data will load in from a Database but I wasn't sure how possible this is to do. I tried to recreate this layout, before loading objects from the database but cant work out how to make the last container on each line to fill the remaining space.
CSS:
ul,li{
list-style:none;
}
ul{
width:1000px;
display:block;
height:auto;
}
li{
float:left;
margin:10px;
background:red;
height:150px;
display:block;
}
Simple loop:
for($x = 0; $x < 20; $x++){
echo '<li style="width:'.rand(150,400).'px"></li>';
}
If anyone could explain a way that I could dynamically resize the last container of each line to make it flush I would greatly appreciate it. But I don't want to use a template or a plugin as I would rather learn how to build it from scratch.
Bootstrap is defiantly your best shot here. Bootstrap is a grid layout using divs and used right is fully responsive.
So for example if you wanted a wider column and two smaller columns you could do:
<div class="row"><!--always size of 12 in bootstrap-->
<div class="col-md-6">
wider column content in here
</div>
<div class="col-md-3">
smaller first column content in here
</div>
<div class="col-md-3">
smaller second column content in here
</div>
</div><!--end row div-->
So if we take it mathematically: the row is always taking its own size as 12, so our col-md-6 will always dynamically scale to 50% of the rows width (6 is 50 % of 12) and a our two smaller columns will always dynamically scale to 25% of the row width (3 is 25% of 12).
Here is a great tool for generating snippets of bootstrap html code
Layitout.com
And here you can find all the bootstrap resources you might need
GetBootStrap
Grabbing their CSS is the best place to start, you can link it straight from their site in a CSS href.
Have fun.
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 have a container <div>:
.containerBig{
width:940px;
}
with many small containers in it.
.containerSmall{
width:auto;
height:100%;
float:left;
}
looks like this: [[][][]]
The small containers are filled with items from a database.
I want the small containers to use the full height but only the width they really need
How can I do this?
the big container always takes up the height of the small container that is having the Maximum height among the small containers.
If it is not taking the maximum height of the small containers then there is a float problem somewhere, This can be elminated by giving:
<div style="clear:both"></div>
either inside the big container or before the big container
See this
Fiddle.
Replace 'abcdefghijkl' with your data. And the division will be stretched automatically to the data width with 100% height.