I have an editable body with a div:
<body contenteditable="true">
<div class="paragraph">Text</div>
<body/>
And a :before style:
div.paragraph:before {
content: "☑";
}
Fiddle: http://jsfiddle.net/uy9xs5p0/
In Firefox I can put the cursor at the beginning of the text and press backspace and the check mark gets deleted. How to prevent that?
You are setting the contenteditable in the parent div, therefore when erasing, you are deleting the div.paragraph, so the pseudo will be gone.
See that if you set the property in the child div instead, you can make it work.
div.paragraph:before {
content: "☑";
}
<div>
<div contenteditable="true" class="paragraph">Text</div>
</div>
When this issue is reproduced, (via this fiddle, for instance) the developer tools show that div.paragraph is removed. Only a text node remains.
becomes
To stop the div from being removed, don't give its parent contenteditable. Use this instead:
<body>
<div class="paragraph" contenteditable="true">Text</div>
</body>
Fiddle: http://jsfiddle.net/5y00q6ya/3/
You are not editing the :before content.
It just removes the whole .paragraph element once it gets empty, or if you backspace when you are at the beginning of the tag.
The other answers explain the problem. If a div inherits its edit-ability from its parent, it is possible to remove the child div itself and together with the div also the before-content.
In order to prevent this, it is necessary that the editable div must not be placed in an editable parent. This makes it necessary to put every editable div into a non editable parent div to preserve the editable child div.
The following example shows this
div.node {
margin-left: 1em;
}
div.paragraph:before {
content: "☑";
}
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Major</div>
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Minor</div>
</div>
</div>
Possible workaround this problem. This seems to working as you want it to be.
<div contenteditable="true" class="upper-div">
<div class="paragraph">Text</div>
</div>
div.upper-div:before {
content: "☑";
display:inline-block;
}
.paragraph{display:inline-block;}
Related
So, I am basically having this problem where I am trying to change the font color of all the child elements inside a tag- direct or indirect.
I don't know if it shouldn't be inheriting that property but it is not working in my case. I am putting the style of the parent color:"white" but unless it is a direct child text it is not changing the color.
export const NgoBar = () => {
return (
<div style={{backgroundColor:"red", width: "55vw", margin:"auto", color:"white"}}>
Some text
<div style={{display:"flex",flexDirection:"column",backgroundColor:"red", padding:"10px"}}>
<span>Some different text</span>
<span>From somewhere</span>
</div>
<div></div>
</div>
)
}
This gives the result
It doesn't change the text of the children element - just the direct text of itself. And I find it a bit odd. So just to change the color of all the text inside a parent element, I have to go to all the element and add a personal styling to give it a white text. Just wanna know is it usual ? If yeah then how to turn all the text inside a parent element to white.
In your way you apply color only to the current tag. It's an inline style. See below. Font color is inheritable:
.container {
color: green
}
<div class="container"> Some text
<div> <span>Some different text</span> <span>From somewhere</span> </div>
<div></div>
</div>
Then try this:
.container div,
.container span {
color: green
}
I have added the "clear:both;" css command to my responsive theme,however it doesn't work,elements wrap around my block.
Here is the HTML of my block:
<div id="block-views-categories-normal-view-block-1" class="block block--views contextual-links-region block--views-categories-normal-view-block-1">
<div class="contextual-links-wrapper contextual-links-processed">
<div class="block__content">
<div class="view view-categories-normal-view view-id-categories_normal_view view-display-id-block_1 view-dom-id-4d6cdd2580eef8f5826096ea0f8157c1">
<div class="view-content">
<div class="responsive-table-wrapper">
<div class="responsive-table-scroller">
<table class="views-view-grid responsive-table-processed">
etc
I have tried
#block-views-categories-normal-view-block-1{
clear:both;
}
and
.views-view-grid {
clear:both;
}
Am I missing something?
Need to see some more code and corresponding CSS to answer.
My guess is that you're not clearing the float of the proper element.
By putting clear: both on the table class, you're telling it to clear the float of some child table elements.
Unless you altered the display property of the table elements, your clear is in the incorrect place.
You need to clear the parent of your floats to fix the painting issue in the browser.
Sure this is a too easy question but incredibly I did not understande why this code does not run as desired.
HTML:
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
CSS:
div:not(.remember) .foo
{
color:red;
}
Here the JsFiddle.
I would like that every item with class .foo OUTSIDE a parent with class .remember will be red, but it seems that "not" clause does not fire.
Where is my error?
Your upper most <div> doesn't have .remember, it passes your selection and so .foo has styles changed. Use the child combinator.
Your selection requires that the parent that isn't .remember is also a <div>, because you haven't given your second .foo a parent, in this case, its parent will be <body>. If you don't make this restriction, it is black in colour, as expected.
:not(.remember) > .foo {
color:red;
}
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
Here is a working jsfiddle
The a.foo was not inside a div, it is fixed. The div:not(.remember) .foo expects the link to be inside of a div.
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be inherited)</a>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
</div>
There was no style for div.reminder .foo, it should specifically inherit from the parent style.
div:not(.remember) .foo
{
color:red;
}
div.remember .foo { color: inherit; }
In the above fiddle, I added the first line which should represent any styles already set to the page (parent containers and etc). Its purpose is to play with it in order to see how the inner content behaves. You can remove it safely, the behavior will be as expected.
The div.remember .foo will simply inherit them rather than force something else. However
a.foo{color:red;}
.remember a.foo{color:black;}
This will cause all .foo elements to be red, unless it is nested inside the parent .remember, it will then be black.
http://jsfiddle.net/92gnt7qt/
I am trying to adjust the CSS so the "product" and product information is centered and not floated to the left I cannot adjust the HTML as its given via a shortcode thats added into the WP post but maybe I could wrap it in a div?
HTML:
<ul class="products ribbon">
<li class="product last first">
<a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/">
<div class="thumbnail">
<span class="onsale">Sale!</span>
<img width="325" height="325" src="http://dailybabydeals.co.nz/wp-content/uploads/2013/02/Front-Page-325x325.jpg" class="attachment-shop_catalog wp-post-image" alt="Front Page" />
<div class="thumb-shadow"></div>
<strong class="below-thumb">Estella Rose Designs</strong>
</div>
<span class="price"><span class="from">From: </span><del><span class="amount">$25</span></del> <ins><span class="amount">$19.95</span></ins></span>
</a>
<div class="buttons">
Select options</div>
</li></ul>
CSS:
CSS
Okay, let's try this again now that I understand your question better. So you want to center the <ul> element as a whole? That is a lot simpler than what I originally thought you were going for.
To do that, all you need to do is wrap the <ul> element in a span tag that is set to display as an inline-block. Then set the containing element so that its text is centered.
Try this:
<html>
<head>
<style language="text/css">
/*<![CDATA[ */
#test1 {
text-align: center;
}
#test2 {
display: inline-block;
text-align: left;
}
/* ]]> */
</style>
</head>
<body>
<div id="test1">
<span id="test2">
<!-- Place your <ul> element here -->
</span>
</div>
</body>
</html>
how it works
The "test2" element is set to display as an inline-block, which means it displays inline with the text. This means that it can then be affected by properties that manipulate lines of text, such as "text-align".
Setting "text-align" to "center" on the "test1" element makes the inline content -- the "test2" element in this case -- within it become centered on the screen.
The standard way to center a block is to set the "margin-right" and "margin-left" properties to "auto", but that only works for elements that are displayed as blocks and that have a width that is less than 100%.
I would just put it in a div and float it next to another div with nothing in it.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Like in step 8 in this link.
The reason that it looks like the text "Sale!" is floated to the left is that <img> elements display as inline blocks by default, so the image is on the same line of text as the words "Sale!". A <br /> tag immediately following the text "Sale!" would solve that problem; but you said you can't modify this HTML, right?
Given that restriction, here is how I was able to solve the problem...
Surround the HTML from your example in a <span> tag and assign it a class. I used "test" as my class name".
Then Place this CSS in the head of the HTML document:
<style language="text/css">
/*<![CDATA[ */
.thumbnail img {
display: block;
}
.test {
display: inline-block;
}
.test .price, .test .below-thumb {
display: block;
text-align: center;
}
/* ]]> */
</style>
why it works
The selector for making the image display as a block solves the problem of the missing <br /> tag.
The span tag with which you surrounded the HTML displays as an inline block. This means that it will collapse around its contents, giving you a box within which you can center the text.
Making the items that contain the text display as a block causes them to take a width of 100%, filling the surrounding box
The inclusion of "text-align: center" is what finally makes the text display as centered within its container
#main .container > div:not(.sites):not(.default) {
display: none;
}
The <h1> tag is visible while the below yui-ge div tag is hidden. If > only applies to immediate children how come my yui-ge is having the above CSS applied to it (both in Chrome and Firefox).
<div class='container'>
<div class='default selected'>
<h1>Page Title</h1>
<div class='yui-ge'> //for some reason, this tag remains hidden cause of the above CSS
//more div tags
</div>
</div>
//more HTML here
</div>
update
Look here: --LINK REMOVED--
Click the "Woot" tab.... no results are shown on the default woot tab - they remain hidden.
You have this CSS rule:
#main .woot > div:not(.sites):not(.default) {
display: none;
}
This rule applies to all DIVs inside the #main element, that do not have the classes sites or default and are children of a .woot element.
Your structure is:
<div id="main">
<div class="woot">
<div class="woot default selected">
<div class="yui-ge"> ... </div>
</div>
</div>
</div>
As you can see, the .yui-ge DIV does not have the class sites nor default and it is inside a .woot element. Therefore, it will be hidden.
The problem is that you have two DIVs in the ancestor chain that have the class woot.
If you hide an element, all it's child elements get hidden too.