The CSS worked perfectly fine with the old HTML, but i have to change to the new HTML (nested checkbox.
I cannot figure out how to change my CSS to make that happen.
/*Old CSS:*/
.cl1 .clChk:checked ~ .cl2 {
opacity: 1;
height: auto;
}
<!--OLD HTML-->
<div class="cl1">
<label class="clLabel" for="chk_1">some text</label>
<input class="clChk" type="checkbox" id="chk_1">
<article class="cl2">
..some text..
</article>
</div>
<!--NEW HTML-->
<div class="cl1">
<label class="clLabel"><input class="clChk" type="checkbox">Some text</label>
<article class="cl2">
..some text..
</article>
</div
I have tried many variations, but i cannot seem to get it to work; so if the checkbox isn't nested in the label, there is no issue, but i need the checkbox nested in the .
Thank you so much for your help!
deduijk! You miss the dot at the begning on cl1Chk element.
.cl1 clChk:checked {
}
to
.cl1 .clChk:checked
Related
I've got basic css problem.
I want to add display: none; property to input-group_details element in my div class="textAdd".
divs from the console:
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
<!---->
</div>
</div>
When I write sth like:
.input-group__details{
display: none;
}
It works, but I want address only the element in my textAdd class. I cannot simply add new class to my <div class="input-group__details"> because it's actively rendered by the framework.
I think this is what you are expecting
.textAdd .input-group__details {
display: none;
}
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
This is hidden .... Some text here
</div>
</div>
<div class="input-group__details">
This is not hidden ... Some text here
</div>
I'm a beginner at this. I have text and input buttons in a div on a tumblr theme, intending it to show up only on the homepage, but it shows up on all pages at the bottom. Is there a way to hide it for all others, set some sort of parameter, etc?
There is more than one way to achieve this. The easiest one is to add at the head section <style> #id, or .class {display: none}</style> you use either class or id or hide the div that contains them.
You could slice your page content like this:
There are three types of HTML models :
Layouts (or Templates, Grids), which represent a structure to hold Components.
Components (or Modules) which represent a sufficient and consistent auto part.
Contents (or Datas) which represent data could be found into HTML, JSON or MongoDB (database).
e.i.
<body class="layout-class">
<section class="component-class-1"></section>
<section class="component-class-2"></section>
<section class="component-class-3">
<input class="input" />
</section>
</body>
So if you have an input like this:
<body>
<div>
<input class="input" />
</div>
</body>
with this CSS
.input {
display: inline
}
you could only hide this on the homepage layout like this:
<body class="home">
<div>
<input class="input" />
<div>
</body>
and
.home .input {
display: none;
}
or only on the overview component
<body>
<div class="overview">
<input class="input" />
<div>
</body>
and
.overview .input {
display: none;
}
or only on overview into homepage, etc.
<body>
<div class="overview">
<input class="input" />
<div>
</body>
.homepage .overview .input {
display: none;
}
I want to style the following CSS classes; is there any short styling technique for this?
.test-0 { }
.test-2 { }
.test-3 { }
/* etc. */
I am looking for something like:
.test-%d% { }
I want to dynamically create many test-* classes with different numbers and common styles.
Update
here is my actual situation
<input type="button" value="click" class="button_class" />
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
<div style="clear: both;"></div>
</div>
</div>
When user click the above button then same structure will clone and append to the end of the form
so the form will be as
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
</div>
<div id="form_container-1">
<div class="placeholder">Add your form fields here</div>
</div>
</div>
the css class form_container-[%d] will be created dynamically by jquery.
so i want to add style to this class.
also it would be great if you share optimised code for cloning the structure with
different ID.
Please do let me know if you still have doubt.
thanks
You can use an attribute selector.
div[class*='test-'] {...}
I think #Ed W have the right solution BUT I have an extra idea while is not straight forward is shorter than what you have. And will help to make different testing that is waht I think you want... fiddel http://jsfiddle.net/ncubica/2sj9W/
css
.test-1,
.test-2,
.test-3,
.test-4,
.test-5{
color:#F60;
display:block;
}
.test-5{
color:blue
}
html
<span class="test-1">One</span>
<span class="test-2">Two</span>
<span class="test-3">Three</span>
<span class="test-4">Four</span>
<span class="test-5">Five</span>
span five will be in blue color... so you can override the class you want to test and play with it.
Also you can use selectors like
HTML
<div>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span class="test-1">I'm red</span>
</div>
CSS
div > span{
color:pink;
display:block;
}
div > span.test-1{
color:red;
}
and the last span will be red. I hope this help.
My two cents...
I got a following set up using the lastest twitter bootstrap framework:
http://jsfiddle.net/hfexR/2/
I now want that the input field takes the maximum width when there is no button next to.
How can I do this with pure css or with twitter-bootstrap itself?
Something like inline-block should go, I just don't get it at the moment...
You can use te class input-block-level like in this fiddle
<div class="container">
<div class="span4 well">
<form class="form-search">
<input type="text" class="input-block-level search-query">
</form>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Cancel</button>
</form>
</div>
</div>
EDIT : since bootstrap v3, classes have evolved so use col-xx-X classes to obtain the result explained below (further changes may be necessary)
Live demo (jsfiddle)
You could use a .row-fluid and use .spanX to make the inputs fill their container :
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span12">
</div>
</form>
<form class="form-search">
<div class="row-fluid">
<input type="text" class="input-medium search-query span8">
<button type="submit" class="btn span4">Cancel</button>
</div>
</form>
It appears that a little fix is needed for the button/input combination :
/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
float: none; /* Remove the */
display: inline-block; /* floating */
margin-left: 0; /* Stick it to the left */
}
Last thing, you shouldn't combine .spanX and .well because of the padding and borders and other things, here is an example of why (jsfiddle).
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.