I put a div in page, or anything in page and it automatically expand its width to the end as if I set the width 100%. Obviously I need to set a width value (like 100px) for the thing but I just want it to be as wide as the content, not a fixed one. The longer the text is, the wider the content should be. How do I handle this? What's wrong?
By default, a width of auto tells block elements to expand to the entire width of the parent element. You want either display: table or display: inline-block for it to shrink down to the width of its contents.
You can see display: table in action here:
http://codepen.io/cimmanon/pen/FvGxl
You need to set:
width: auto;
display: inline-block;
Related
I have a problem that I have spent many hours on and could not find a solution in any way. I will link the code in CodePen. It is just a subset of my layout. This is the reason for some of the root element's styling.
I basically have a layout where the page/screen/window should not have a scroll, but the inner body of the table widget should, when there are enough elements that go beyond the expected area of the table.
Basically I have a top content on the page, and a table widget. The table widget is to take up the rest of the space of the screen. The table has a title and a header. The body is to take up the rest of the table space and to have a scroll when it has elements that go beyond that space.
I have searched many resources over stack-overflow and tried many things. I will provide the current state of the layout in the pen. Here you can see all that I think is my best try.
https://codepen.io/anon/pen/KLogbJ
The central area of interest is the .body element. Based on things I've read I have styled it:
.body {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
padding: 0.5rem;
min-height: 0;
}
I would appreciate any help on this.
You could add overflow: scroll; to .body and give the .item a min-height
Also give your .table a max-height: 100%;
See this fiddle
The problem is that the contents of the area you want to scroll is set to scale to fit it's container. For the internal scroll you are looking for you would need to have:
A set height for the container so it won't expand to fit the content (in this case you want it to be 100% of the screen)
The content must not scale in height to fit it's container. It has to maintain it's height so that it remain larger than it's container.
If you have those 2 conditions you should find the scroll bars appear.
I've faced a problem with bootstrap table. Basically, my table will be dynamic and at first some columns will be hidden. Some/All hidden column will be showed dynamically based on user's action. When, many/all columns are shown, a scroll-bar will come at the bottom of my browser window. But, I want that scroll-bar come to my table instead of page/browser window. I mean, this is happened now which I don't want:
I want bootstrap .table-responsive feature for my larger screen too when my table's width cross the visible width of the browser:
Also I want vertical scroll-bar when it'll cross a definite height. To make this, I've applied a css like this:
.table-custom {
max-height: 150px;
overflow: auto;
}
which is not working. And for horizontal scroll-bar(when table's width cross the parent's width), I can't apply any fixed width as I've to concern about all large and small screen. So, what can I do to appear scroll-bars(both vertical and horizontal) when the dynamic table cross the width and height of it's parent div?
My fiddle
I think you simply need to apply overflow: scroll; to a containing element of your table, which you already have with .table-responsive.
.table-responsive {
max-width: 150px;
overflow: scroll;
}
fiddle: http://jsfiddle.net/vwrva9L6/11/
I have a problem with content from a div, for example if I put a table inside of a div and set a width (width:200px !important)for that div the table it will overwrite that div. So how is possible to keep all content inside that div?
fiddle example:
http://jsfiddle.net/ebG9N/45/
You set the header to white-space: nowrap; therefore, the browser is unable to break the headers, so the width of the table will be bigger than the container div.
You can set, overflow: hidden; to cut the overflowing parts, or overflow: auto; to create a scrollbar, but without them it's the correct rendering.
There are two solutions.
i) IF you want to STRICTLY contain table WITHIN div then overflow:auto; is the way to go.
ii) BUT if you change your mind and want to WRAP div to the width of table then.
display:table; is the way to go.
Generally its bad idea to contain wider element within explicitly known less wider element.
Try using overflow:auto; in the css of the div.
You can't just expect it to somehow fit within a div of any size you wish. What you can do is, at least allow the browser to scroll (overflow: scroll) it using:
div.divano{
width:200px !important;
border:2px solid yellow;
background:#eaeaea;
height:200px;
overflow: scroll;
}
You may also use oveflow: hidden, but it would just hide the parts that are not visible. Also, overflow: scroll, will always show a scroll bar (with or without clipping). You can use overflow: auto to specify that the content should be scrolled only if clipping occurs.
I know that setting margin: 0 auto; on an element is used to centre it (left-right). However, I know that the element and its parent must meet certain criteria for the auto margin to work, and I can never seem to get the magic right.
So my question is simple: what CSS properties have to be set on an element and its parent in order for margin: 0 auto; to left-right centre the child?
Off the top of my head:
The element must be block-level, e.g. display: block or display: table
The element must not float
The element must not have a fixed or absolute position1
Off the top of other people's heads:
The element must have a width that is not auto2
Note that all of these conditions must be true of the element being centered for it to work.
1 There is one exception to this: if your fixed or absolutely positioned element has left: 0; right: 0, it will center with auto margins.
2 Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".
Off the top of my head, it needs a width. You need to specify the width of the container you are centering (not the parent width).
Complete rule for CSS:
(display: block AND width not auto) OR display: table
float: none
position: relative OR position: static
OR
parent element with display: flex
Off the top of my cat's head, make sure the div you're trying to center is not set to width: 100%.
If it is, then the rules set on the child divs are what will matter.
Off the top of my head, if the element is not a block element - make it so.
and then give it a width.
It will also work with display:table - a useful display property in this case because it doesn't require a width to be set. (I know this post is 5 years old, but it's still relevant to passers-by ;)
Here is my Suggestion:
First:
1. Add display: block or table
2. Add position: relative
3. Add width:(percentage also works fine)
Second:
if above trick not works then you have to add float:none;
Please go to this quick example I've created jsFiddle. Hopefull it's easy to understand. You can use a wrapper div with the width of the site to center align. The reason you must put width is that so browser knows you are not going for a liquid layout.
It's perhaps interesting that you do not have to specify width for a <button> element to make it work - just make sure it has display:block : http://jsfiddle.net/muhuyttr/
In case you don't have a fixed width for your parent element, having your parent element with display: flex worked for me.
For anybody just now hitting this question, and not being able to fix margin: 0 auto, here's something I discovered you may find useful: a table element with no specified width must have display: table and not display: block in order for margin: auto to do work. This may be obvious to some, as the combination of display: block and the default width value will give a table which expands to fill its container, but if you want the table to take it's "natural" width and be centered, you need display: table
I have a wrapper div with a max width of 700px and the only content is an right-aligned image of less than 700px width. Since it doesn't fill it, the wrapper doesn't expand to 700px. How can I make the wrapper expand to the full width when there is space in the browser window? The only hack I have found so far is to also include a zero height span with more than one line of text in...
A div should by default expand horizontally to the width of it's parent object. Try setting a width on the div to 700px.
As CRasco mentioned, a Div will normally expand to fill its container, until we come along with some fancy style and screw that up. Here are the styles I can think of off the top of my head that will prevent a Div from expanding to fill its container:
These will make it the smallest size needed to hold its contents.
float: left;
float: right;
display: inline;
display: inline-block;
And, of course, any of these would set or restrict the size of the Div. I'm betting you'd have noticed if these were causing your problem, but I thought I should include them to be as complete as possible.
width: 100px;
max-width: 100px;
height: 100px;
max-height: 100px;
You can set overflow: hidden on the 700px div, assuming that you are not setting an explicit height.
If you know the with of the image you could add a margin to it.