When you specify the column-width property in CSS for a div with a bunch of text in it, the actual width seems to be automatically adjusted so that an exact number of columns fit the page. If a column-width of 400px, for instance, is specified and there's actually 1000px of space then instead of showing 2.5 columns of text (with the .5 column overflowing to the right to invite the user to pan), it instead shows an even 2 columns of text.
I found in the dev.windows.com that if you specify values for all of the width properties involved (width, column-width, column-gap, and column-rule-width) then you can achieve this, and that works, but it requires that you determine the width of your containing div and that seems silly since you want that to flow.
Here's my CSS that's not working as I'd like...
.csscolumns .columns {
columns: 400px;
overflow-x: scroll;
height: 600px;
padding: 20px;
}
Have you tried tweaking with 'overflow' in your CSS? Try the following for the selected elements:
overflow: hidden;
This will hide any 'overflowing' content of the selected elements, behind the parent elements.
Related
I have a simple table control that I have created using javascript dynamically when the website runs.
I have fixed widths for the columns using the bootstrap classes (eg col-xs-3 etc).
One of the columns in the table is a description field for which there are many entries in my data with longer text.
On a large screen it is just a single line of text so everything is fine, but when reducing the size of the window, and when using smaller devices, the width is too narrow to show the description on a single line and so will wrap around and cause the whole row to grow to fit the entire text.
Showing the entire text is not a requirement and I need to make sure the table row doesn't grow and stays a fixed height no matter the screen/window size.
Is there a way to do this in css as I do not want to insert an extra div within each cell element if i can avoid it, which i have already seen suggested on other posts.
Also, this needs to be compatible with safari and chrome.
Try this
td {
white-space: nowrap;
max-width: 200px; //or adjust for however wide you want max width to be,
//could also use % widths like max-width: 20%;
overflow: hidden;
text-overflow: ellipsis;
}
This will create a ... whenever the text is wider than the table cell.
.tr {
max-height: 50px;
overflow-y: auto;
}
You can set a text-overflow to the td element, to hide the content when it overflows the size. You just have to set a max-width to it...
Also, set the property white-space:nowrap to keep all the text in a single line.
Here's an example: http://jsfiddle.net/ev7227bd/
So if I take a div and add this to it:
<div class="dongs">test</div>
<div class="dongs">test</div>
<div class="dongs">test</div>
.dongs {
background-color: blue;
max-width: 500px;
display: inline-block;
}
It will make the div's line up beside each other with a blue background BUT the max width will
appear to not be working for some reason.
The reason why I need max-width to work is because if I have those beside each other and lets say
a user comes a long with a small browser it will resize the div's and squish them in so that they
are smalled which is what max-width does. Allows the container to become smaller but not larger.
However, if I remove the inline-block; the div's wont be next to each other BUT the max-width
will work and they will resize. Please, I need help. Thanks
EDIT: I did research a lot but cannot seem to find the answer. I did see one stackoverflow post but
it did not make sense to me and didnt help. Here
You can achieve what you want by using the below code:
.dongs {
background-color: blue;
max-width: 33%;
display: inline-block;
}
Explanation: Since we are not setting any explicit width at start, the browser will assign the minimum width required to fit the contents of the element for all the elements (like you can see for the 2nd and 3rd div's the width is different based on content). However, setting the max-width: 33% means that the browser at any point of time would only allocate a maximum of 1/3rd of the parent element's (or body if no other parent) width to this element. So, if the content is anything more it would start wrapping around.
You would also want to set either overflow: hidden; or word-wrap: break-word; in addition. The first makes the overflowing content get hidden (would be helpful when they are very lengthy words) while the second break's lengthy words and then wraps it around to the next lines. Either one can be used depending on the needs.
Demo | W3C Spec for Min/Max Width
I believe it's because you haven't specify the actual width, and instead of using display: inline-block, it would be better to use float: left and add some margin if you need any space between those div. But, don't forget to change the width property.
Check out my JSFiddle...
I want to do this without JavaScript. I already have a JS solution but want to know if this is possible with pure CSS.
Let's say you have a page showing products off. When the page resizes I want to have those product boxes flex with the page layout. Each one should have a max-width and min-width. A table won't work because I can't have a fixed number of columns. Depending on the browser width, there could be between 1 to 6 products on a single row. The following doesn't work, but it's the closest I've got.
#prducts > div {
float: left;
max-width: 200px;
width: auto;
min-width: 100px;
background-color: #3333FF;
height: 250px;
margin: 5px;
}
Here's the fiddle: http://jsfiddle.net/79CBq/2/
Is it possible to make a DIV do auto width and still adhere to the min/max values I set? Unfortunately width: auto only changes the width if there is content inside making it bigger.
This is just really dumb to me, because a DIV with "display: block" has the right kind of auto-width but I can't find an option to give that to an inline-block or float DIV.
What you want is a grid-system.
For your information: you can set the width of your divs in percentage (based on the width of the parent container).
If you want all <div> elements in #prducts to be 1/6 of the screen width, you should remove the width of prducts (set it to auto) and then do this:
#prducts > div {
width: 16.666%;
}
Beside the typo in #products you should know that you are using the id identifier. You can only have one html element width the id "products". If you plan to have more then one, you should change that to a class name.
I don't really unterstand what you want to do in your fiddle. You should not use tables for layout reasons. With my anweser and your fiddle, you will run into problems width the margin of the > div items, which you could easily avoid using a box based layout.
You can use bootstrap grid system, bootstrap takes care of the media queries. You need to give the div classes such as "col-md- " depending on the columnwidth and the screens you want to support. If you do not want to use the full library you could mimic bootstrap implementation for fluidic layouts.
http://getbootstrap.com/css/
I have have some dynamically created divs in a fixed width parent div and I would like to have them distributed horizontally. As they are dynamically created so I wont know how many are in the container unless I count them with JS, which I am trying to avoid.
I was originally trying out the "Using inline-block and justified text" technique on this page; however it seems to behave a bit erracticly when there are more children than will fit ( ie when there are two rows ), ( see the second row here ) so I don't think that will work.
*Edit: Actually I just realise now that it's not actually erratic, it IS spacing the second line correctly, but what I want instead (in this particular instance anyway ... ) is for the three red boxes on the second line to take up positions under the first three of the first line, leaving two positions free at the end, rather than spacing them out too ) .... so I think in general this technique is not likely to ever work for me.
Are there any suggestions of other ways to achieve the above. I would rather not have to use JS but if there is no other way then I am open to suggestions.
It's not failing, that's the native behaviour of floats.
If you want more to fit per line, made the container bigger or the boxes narrower.
If you don't want them wrapping at all, add overflow:auto to your container's CSS and you'll get a scroll bar.
You need to make remove the width of your container and add display: inline-block; to allow the dic container to have a width of whatever the content inside has. Also add overflow: auto; in order for the div to size to the amount of generated divs in it
#container {
display: inline-block;
background:olive;
overflow: auto;
height: 180px;
}
Perhaps use relative widths rather than fixed widths for the interal divs....
#testcontainer div {
width: 19%;
height: 30px;
display: inline-block;
background: red;
float: left;
margin: 2px;
}
DEMO
I ended up conceding that I need to use JS. I added id's to the fourth child and then in CSS I was able to remove the margin from the fourth child ( all of this I presume could have been done in CSS using nth child if I hadn't needed IE8 support ).
Edit: Finally ended up getting what I want - http://jsfiddle.net/byronyasgur/kUgBA/14/
I have table with width: 100% and an element in that table with width: 40em; max-width: 100%, but the element is still stretching the table when the browser window gets too small.
I want this element to be a fixed width but not be larger than the container if the container gets too small. If there's not enough room for the fixed width, max-width: 100% should make it smaller to fit the available space. This works outside of a table.
Note that the max-width is not on the table itself. It is actually on an <input> element, although the code I've linked includes a separate table with the same problem on a <span> element. It also includes an <input> field outside of the table which behaves correctly.
link to jsfiddle
You should use table-layout: fixed for the table element to get the max-width properties of <td>'s descendants to work.
From the MDN:
The table-layout CSS property defines the algorithm to be used to
layout the table cells, rows, and columns.
fixed value:
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in
subsequent rows do not affect column widths.
table {
table-layout: fixed;
}
WORKING DEMO.
if you put it on the element, the element gets stretched to max-width: 100%.
If you want fixed width, use width: 40px (instead of %, percentages are used in liquid layouts)