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.
Related
I am using svg with grunticon, and I want to set the hight and width to 100% of svg tag,I know that it can be done with js but can it be done by style or css or grunt options?
If is please add example
I am using the html like this:
<div class="icon-napoleon" data-grunticon-embed></div>
The SVG image is generated inside your div element, so the CSS should look like this:
.icon-napoleon,
.icon-napoleon svg {
width: 100%;
height: 100%;
}
Please note that parent element must have width and height defined. The only exception is when parent element is a block, than you do not need to set the width (it is 100% by default, still the height is required).
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 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/
I have an image that should stretch proportionally using only the HTML attributes. The default behaviour with no css set is that if the height attribute is set to half the natural height, then the width will automatically be half the natural width as well.
Example:
<img height="path/to/image.jpg" height="{half natural height}" />
The problem is that I am inheriting styles from an external library that i do not want to hack in that changes this behaviour.
I am trying to reverse the styles back to the browser default behaviour so that it would appear that the element has not been styled at all.
http://jsfiddle.net/23Hz4/2/
Failed attempts:
Setting width: auto; height: auto does not work. Setting width:
initial; height: initial does not work.
Setting element.style.width and element.style.height to null or empty strings does not work.
delete element.style.width and delete element.style.width does not
work
Any ideas?
You can make it works by using the style attribute instead of height
<img src="path/to/image.jpg" style="{height: half height};" />
The problem is the height: auto; css rule of bootstrap. The height attribute can't override this rule. So only a css rule can override this css rule.
I am having a hard time trying to change the width of my h:outputLabel, but I still could not get it changed.
By using CSS, I can change the color, font, frame, anything but NOT the WIDTH.
Thank you so much.
The HTML label element which is generated by h:outputLabel is by default displayed as a widthless inline element. You need to set its CSS display property to block to be able to change the width.
E.g.
label {
display: block;
width: 150px;
}