Is there a reason why the padding-top is not working for the tag? See http://jsfiddle.net/MMwdR/
<b>hello world</b>
b {
padding-top: 100px;
}
display it as a block.
display: block;
To add on to what was said, update your CSS to:
b {
display: block;
padding-top: 100px;
}
Otherwise the element is displayed as a part of the line, so you cannot add padding-top, etc.
Related
I have a bunch of html output that I receive like this
<div>
<h4>This</h4><p>Value 9.6 m.</p>
<h4>That</h4><p>Value 9.6 m.</p>
<h4>The other</h4><p>Another 7.69 m.</p>
<h4>And yet</h4><p>Another value 4.8 m.</p>
</div>
and I want to have it rendered something like this
This: Value 9.6 m.
That: Value 9.6 m.
The other: Another 7.69 m.
And yet: Another value 4.8 m.
I think it probably should have been created as a definition list, but i don't control the html generation.
I can get the first h4 p 'block' to render correctly with the following but I can't seem to get subsequent 'blocks' to render as desired.
h4:after {
content: ": ";
display: inline;
white-space: nowrap;
}
h4 {
display: block; }
h4~p {
display: block; }
h4:first-child {
display: inline;}
h4+p {
display: inline;
}
Any suggestions on how to achieve the desired output?
TIA
If you don't need a tidy column or grid layout for these, I found Ye Olde Floats worked best:
// normalize the spacing and stuff between the h4 and p
h4, p {
display: block;
line-height: 1.4;
padding: 0;
margin: 0;
}
h4 {
// honestly, this got the most sturdy result
float: left;
// add the colon and a little space
&:after {
content: ": ";
margin-right: 10px;
}
}
// break the line after each P
p {
&:after {
display: block;
clear: right;
content: "";
}
}
I also threw this into a CodePen.
Also if you would like a more tabular or column-y version, I had some luck with flexbox and css grid.
Hope this helps, happy coding!
I have a code that I can't change:
item.left,
item.centre,
item.right{
.MIXIN();
}
.MIXIN(){
width: 100px;
}
I need to apply width only to .right element. I can only change contents of MIXIN(). I was thinking of using &but it will result either in .right item.right or item.right .right which is not what I want. Is there a way to apply styling only for .right element using contents of MIXIN()?
You can use the negation CSS pseudo-class :not().
item.left,
item.centre,
item.right{
width: 20px;
&:not(.left):not(.centre) {
width: 100px;
}
}
Fiddle: https://jsfiddle.net/e0nd7pk4
You can not do it. The only way is to override the first declaration.
item.left,
item.centre {
width: inherit;
}
How about & but without the space:
.MIXIN() {
width: 100px;
&.right { color: red; }
}
It compiles down to item.right.right which is a bit weird but won't match left and center.
Fiddle: http://jsfiddle.net/c0634wg2/
When using the jsTree plugin, I need to have a node which displays its full content. Right now, the nodes only display approximately one line of text each. How can I get the nodes in a jsTree to display all of the text in the node without truncating the node's content?
The following CSS code will do the trick:
.jstree-default a {
white-space:normal !important; height: auto;
}
.jstree-anchor {
height: auto !important;
}
.jstree-default li > ins {
vertical-align:top;
}
.jstree-leaf {
height: auto;
}
.jstree-leaf a{
height: auto !important;
}
This is a modification of the solutions here (height changed to auto) and here, neither of which worked for me on their own.
This question already has answers here:
Why my inline-block divs are not aligned when only one of them has text? [duplicate]
(4 answers)
Closed 8 years ago.
I am curious to know why following elements have various heights:
<i class="icon"></i>
<i class="noicon"></i>
i {
display: inline-block;
width: 1em;
height: 1em;
}
i.icon:before { content: 'Ω'; }
i.noicon:before { content: ''; }
That case may be illustrated by http://jsfiddle.net/pJw9d/ (hover the symbols with pointer to view the difference in sizes).
PS: I know how to fix such problem (e.g., by using non-breaking space ( or \00a0), or by defining CSS positions), but I would like to know why it behaves that way.
Try adding "vertical-align" to your css attributes for i:
i {
display: inline-block;
width: 1em;
height: 1em;
background: green;
vertical-align: top; //add this
}
Updated Fiddle
As #anddoutoi correctly pointed, that behavior is explained in W3C Recommendations:
If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
That fiddle demonstrates, that it is not that empty element's size increases, but that it is risen for the baseline height.
Such jumps can be avoided either
by replacing the empty content with non-breaking space, e.g.:
i.noicon:before { content: '\00a0'; }
or by defining the vertical-align property.
Hi Please let me know this is what you need?
html
<div><i class="icon"></i><i class="noicon"></i></div>
<div><i class="icon"></i></div>
css
body {
font-size: 2em;
}
div {
float:left;
}
i {
display: block;
width: 1em;
height: 1em;
background: green;
float:left;
}
i.icon:before {
content:'Ω';
}
i.icon:hover:before {
content:'';
}
My css for a tree node icon is the following:
.icon {
background: url(http://dummyimage.com/100x100/ccc/fff);
width: 100px;
height: 100px;
position: relative;
}
.icon:after {
background: url(http://dummyimage.com/32x32/f0f/fff);
width: 32px;
height: 32px;
display: block;
content: ' ';
position: absolute;
bottom: 0;
right: 0;
}
I set iconCls to "icon" but it does not work, I also tried "icon icon:after" and "icon:after" but with no luck.
I use a modern browser and my overlay css is valid, but extjs doesnot seem to understand it. How can I overcome this problem?
The icon element is by default an <img> element. It's contents are replaced by the image. You can't use :before or :after with it, because they form part of the contents that get replaced. You will need to override the treeRenderer in Ext.tree.Column to apply your second image.
looks like you forgot the class prefix in one of youre tests try .icon:after {}