I found such a situation in my code and can't find an explanation for it. Why does Chrome (and other browsers as well) set width to auto, ignoring my width: 15px?
Here's a screenshot:
spans are inline elements. You can't set the width of an inline element.
In order to set the width you've to change the display property of the element.
.elem {
display: inline-block;
}
I suggest these reading to learn more about CSS box model:
The CSS box model
Understanding inline box model/
Related
I have some html as below- nothing fancy- just a div and a span
<div id="container">Some text to affect the width</div>
<span>A</span>
I'm using eric meyer's css reset. One of the things that he is doing is setting the line-height of the body to 1. Also, he is setting the font: inherit; for every element.
Then, I have a few other styles for the html elements above as follows:
body{background:#912FFF}
#container{background-color:#EDC1C1; width:150px;}
span{background-color:#35D9C4;}
Fiddle: http://jsfiddle.net/probosckie/5pb4794u/
The problem is that my span is overlapping with the div. If I zoom into the page it is all the more evident.
Im guessing is that line-height set to 1 and the font set to inherit is messing this up. Can someone please confirm on this??
Set line-height:normal; in your body element. Setting the line-height to a lower value than its text height will cause overlapping.
Unfortunatly inline element's padding and margins aren't designed for exact pixel layouts, but for the flow of text. In this case You should use a div instead of the span element or put the span inside a div.
I am using ngDialog in AngularJS to create pop-up dialogs in my webapp. ngDialog provides CSS that contains a width parameter. If I override the paramater with width: initial, the block expands to be full-width. I would expect (and desire) it to take up the minimum size necessary to show its contents.
Here is a minimally working ngDialog exmaple on jsfiddle. Click on the text to open the dialog and see it expand to full-width.
How can I adjust the css so that the div is just large enough to fit its contents?
Becuase the css by default is:
.ngdialog.ngdialog-theme-plain .ngdialog-content {
max-width: 100%;
width: 450px;
}
If you override the width: 450px, then as a div - a block level element - it defaults to full width.
You can change it to display: inline-block to make it "just fit"
You can use css property display
display:table;
if you just want to show html table in ngDialog, this will work perfectly and will fit your table into it.
Make sure your table width!
In your JSFiddle, .ngDialog is attached to a div and doesn't overwrite it's CSS display: block; property, which is why box spans across the entire screen; it has nothing to do with the width property. Set .ngDialog to include display: inline-block; and remove any properties for width.
You can customize the ngDialog theme as below:
ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-mine,
scope: $scope
});
I copyed the "ngdialog-theme-default" block from ngDialog-theme-default.css to mine.css, then change "width" and rename it to "ngdialog-theme-mine".
It works.
I have an element which inherits a height of 40px.
However, the element I need to style is a textarea box, with variable height / width. How would I 'cancel' the height of an element, such that there is no height property for the element and it can be resized?
To override a set height in a CSS element, you can simply put this in the inherited element (either in a style block or inline):
height: auto;
This will override the set value inherited, without statically setting a new one.
Another way is to use height auto with !important marker:
height: auto !important;
'important' will make things work, but if this HTML is then imported by someone else, they won't be able to override this marker. So my advice is use only when extremely necessary.
If you simply want to make your textarea element able to be resized, try just applying the following CSS property:
textarea {
resize: both;
}
An example can be seen here where the height is set, but using the resize property, it can still be resized.
I have this CSS and I cannot set the width on a span element. Any ideas what I am doing wrong?
#address-readonly
{
margin-left:150px !important;
padding-left:100px;
}
I am using this in 2 areas in my application. Here is the first area:
<tr>
<th colspan="2">Address Details</th>
<th><span id="address-readonly" class="address-readonly"></span></th>
</tr>
And here is the second area:
<div id="addressHeader" class="addressHeader">
<span>Address Details</span>
<span id="address-readonly" class="address-readonly"></span>
I want the address-readonly span to be more right aligned. The padding/margin combo has almost no effect. What should I be doing here? I don't want to add a bunch of non-breaking spaces, but that's basically the effect I am looking for. This particular client has an office full of IE7 machines, so no FireFox or Safari etc... I have tried setting the width of the span as well.
Try this:
#address-readonly
{
display:block;
float:left;
margin-left: 150px;
width: 100px; /* If you want to set the width */
}
or you could use a div and not set the display attribute.
If applicable, you could try using display: block:
#address-readonly {
display: block;
width: 200px;
}
Without floating, the span will be on it's own row. Hope that helps.
Your only choice is a display value of block or inline-block, because inline elements are resized by their content. Also, please note that inline-block is not that well supported.
Guillaume's and Wicked Flea's answer complement each other, but some points are missing.
Only "box elements" can have its width/height attribute set. Span is a inline element, so it will resize it self to fit content.
So, if you want your elements to have width set, you should use a box element. The problem here is that box elements do not line up in the same row by default. You can then use float and margins to align a box element with another box element.
All that being said, it would be good to use Guillaume's answer. BUT some quirks may appear, check this link link about clearing floats.
What would I do: Use the workaround presented in the link, then use both spans as divs, and have them floated to the left, with your widths and paddings set.
Is there a way to set a minimum height for a div, but still allow it to be expandable?
For example, I want a div to have an exact height of 300px when my page loads. However, if more content is added to the div with javascript, I want it to expand after that.
If I specify a height and the content expands past the div, it either clips or adds scrollbars, depending on the value of overflow.
If I don't specify a height, it only expands as far as the content.
Thanks
Here's the solution I used to fix this on ie6, courtesy of Dustin Diaz
selector {
min-height: 300px;
height: auto !important;
height: 300px;
}
The CSS property min-height does exactly this. Note that it does not work properly in IE6, however IE6 treats the height property as min-height, so you can use IE conditional comments to set a height property in a style sheet that is only loaded by IE6.