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;
}
Related
I want to make the ngx bootstrap datepicker inline instead of it appearing only when you click an input.
ngx datepicker link
Can someone help me achieve this? I've tried to add it in but there is absolute positioning and if I override it with relative positioning it doesn't work properly.
I just want to see this on the page inline without the need of having it inside an input field box:
Thanks
There is a container input in the documentation which says:
container: A selector specifying the element the datepicker should be appended
to. Currently only supports "body".
Any way to get around this?
try this, set the height to 0 with overflow: hidden an leaving it on the page. It'll be there so the picker with position itself correctly but with no height the input will be invisible and still have the picker show up where its supposed to.
And you can set the isOpen property to true so its opened by default
<input bsDatepicker [isOpen]="true" style="height: 0; overflow: hidden; border: none; padding: 0;" />
in you global css style.css file give
bs-datepicker-container {
position: relative !important;
left: 0 !important;
top: 0 !important;
}
!important is required to coz it is having element level style so you need to override it.
Obvious: make toggle disable and show permanently.
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 a background image pulling in but it is taking the height of the text not the image, I will eventually do a text-indent: -99999px but I have tried every CSS property to get the whole image to appear. Can anyone help with this, my website is: http://yesiamshow.biz/ it is the buttons under the slideshow, you can see I have the image for previous pulling but it does not show the whole height. All my CSS properties have a height of 60px and nothing is happening.
The button is actually the right height, but your .window class is cutting off it off. Looks like you can change it to 410px and it will fix:
.window {
height:410px;
}
You should also give the button a display:block or inline-block since you're giving it a width and height.
I took a quick look at your CSS and it seems that you are wrapping your link with a span element. You can still do that, however you need to make sure that you are applying all of your styling to the links.
Example. If your HTML was something like.
<a span="prev_btn">Previous</span>
You would have to style like so.
span.prev_btn a { }
And it should look something similar to the following.
span.prev_btn a {
background: [your url];
display: block;
height: [height];
width: [width];
text-indent: -9999px;
}
Hope that helped.
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.