I have the following HTML:
<div class="row">
<div class="col">
<div class="wrapper">
<input type="radio" value="value-0" />
</div>
</div>
<div class="col">
<div class="wrapper">
<input type="radio" value="value-1" checked="checked" >
</div>
</div>
</div>
Is there a way in SASS to select .col, closest to a checked radio button?
Unfortunately no, you cannot select an element based on the presence of any child element.
A solution for your problem would be to use JavaScript. You can select all your radio buttons, traverse up the DOM tree to find the parent .col element (for example, with jQuery's .closest() function if you're using jQuery, and add a new class to those col elements.
E.g. (if you're using jQuery)
$(".col > input[type=radio]").closest(".col").addClass("col-with-radio")
...and then you can style the .col-with-radio class.
Not unless they are siblings. In the current hierarchy you posted, this is not possible with SASS.
Related
I have the follwing html
<div class="listing listing--with-margin">
#foreach($recipients as $recipent)
<span class="listing__item">{{ $recipent }} <input type="checkbox"></span>
<span class="listing__item">{{ $recipent }} <input type="checkbox"></span>
#endforeach
Should the class on the checkbox be
<input type="checkbox" class="listing__input">
or
<input type="checkbox" class="listing__item listing__input">
I think option 1 which allows me to write is a lot cleaner in the sass with less nesting.
If you take a look at the Naming page in the BEM documentation, at the bottom you'll see an example section, with a form block.
In the example, you will find the <form> element, with a couple of <input />s.
Each <input> has its own element class of either .form__input or .form__submit, both inheriting from the block .form class. They do not inherit more than one class.
However, you will notice that they have multiple modifier classes, which is acceptable.
There are 3 options for grandchildren element.
Flattening grandchildren
<article class="post">
<div class="post__meta">
<div class="post__category">...</div>
<div class="post__date">...</div>
</div>
...
</article>
Creating new blocks
<article class="post">
<div class="post__meta">
<div class="category post__category">...</div>
<div class="date post__date">...</div>
</div>
...
</article>
Extending the BEM naming convention
<article class="post">
<div class="post__meta">
<div class="post__meta__category">...</div>
<div class="post__meta__date">...</div>
</div>
...
</article>
I have some forms which mostly consist of input controls, but there are times when the horizontal form has a variant like the following:
<div class="form-group">
<span class="col-md-3 control-label">Features</span>
<div class="col-md-9">
<span>This is not available.</span>
</div>
</div>
Or sometimes I have multiple controls:
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
The label content doesn't quite line up at the same level as the control-label. I've tried to mimic the css class for form-control to get span content to line up, but it never quite worked out so well in my scenarios. Any recommendations on getting the content to line up?
If you just want to print a static text you could use a static form control (http://getbootstrap.com/css/#forms-controls-static).
If you want to use multiple checkboxes and radio buttons, you can also use what bootstrap provoides. See http://getbootstrap.com/css/#forms-controls.
Would you like to have something like this? http://www.bootply.com/ztbj1dCJrP
Its Simple add class to the div (here my-label)
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9 my-label">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
and css
.my-label{
display:inline-block;
}
fiddle http://jsfiddle.net/harshdand/a4n4nc1r/
for multiple http://jsfiddle.net/harshdand/a4n4nc1r/2/
Is there any CSS selector for selecting a parent div only if it directly contains a select inside ?
Example code:
<div class="top_level">
<input type="radio"></input>
</div>
<div class="top_level">
<input type="text"></input>
</div>
<div class="top_level">
<select name="namehere">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
</div>
Suppose I only want to select the third 3rd top_level class div, since it contains a select directly inside it, how would I do that ?
I did try to search around for an answer, but couldn't find any. It would have been a lot easier if parent selection was possible in CSS.
If you're using jQuery, then you can use :has :
$('div.top_level:has(select)')
If you're using only CSS, then the answer is simple : No, you don't have anything similar to select a parent.
You can use :empty pseudo class to check whether your container is empty (excluding line breaks).
You cannot check whether it contains a type of element. But you may be able to restructure your markup to use :empty selector
eg :
<div class="top_level">
<input type="radio"></input>
<div class="list"></div>
</div>
<div class="top_level">
<input type="text"></input>
<div class="list"></div>
</div>
<div class="top_level">
<div class="list">
<select name="namehere">
<option>...</option>
<option>...</option>
<option>...</option>
</select>
</div>
</div>
Now you may query like
.list:not(:emtpy) {
// to select all lists that are non-empty
}
I am new to Twitter Bootstrap and am starting to fumble my way through its use. While certain aspects of the framework are starting to make sense I am still struggling with form styling. I am trying to setup several different sections of a form which will have elements that are styled utilizing .form-inline. In one such instance I am also attempting to use .input-append with little luck.
<div class="row">
<div class="well span12">
<div class="row">
<div class="span12 form-inline input-append">
<label for="assetSearch">Asset Search</label>
<input type="search" id="assetSearch" placeholder="">
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
<div class="row">
<div class="span12 form-inline">
<label for="service">Service</label>
<input type="text" id="service" autocomplete="off" />
</div>
</div>
</div>
</div>
The above markup renders like this:
As you can see "Asset Search" is not inline with the form input. If i remove the .input-append class from the containing div things line up. However, the search icon is no longer embedded in the text box, but instead to the right of text box.
How can I use .form-inline in cunjunction with .input-append?
You should not put inside a input-append (or prepend) anything else than inputs, buttons or .add-ons (this might not be exhaustive).
Try wrapping the whole thing into a div.input-append and let the .form-inline handle the floating : Demo on jsfiddle
<div class="span12 form-inline">
<label for="assetSearch">Asset Search</label>
<div class="input-append">
<input type="search" id="assetSearch" placeholder="" />
<span class="add-on"><i class="icon-search"></i></span>
</div>
</div>
Here's a fiddle of working alignment: http://jsfiddle.net/Jeff_Meadows/xGRtL/
The two fixes are to set vertical-align of <label> elements inside elements of class .input-append, and to reset the font-size of your element to 14px (it's set to 0 somewhere else in bootstrap). Rather than create a rule based on .input-append, I created a new class that you can add to your containing element. That way, you won't get unexpected results elsewhere.
.input-prepend label, .input-append label {
vertical-align: middle;
}
.fix-text-spacing {
font-size: 14px;
}
I'm trying to assign margin-left:20px to all divs inside a form, whose class contains edit, with the following:
form.edit > div {
margin-left:20px;
}
My idea was that: form identifies the element, .edit identifies all the forms with the edit class assigned, and that > div sets the style for all the div child items. but it is not working, so I must be wrong! Any idea of how achieving this?
PS here's the html, I would like to assign the above style to the last div in the following code (id="address"):
<form class="edit" action="edit.php" method="post" name="edit" id="edit" enctype="multipart/form-data">
<div class="row">
<ul class="breadcrumb">
<li>Data</li>
</ul>
<div class="span8 well">
<input type="text" name="lastname" id="lastname" class="span7">
<div id="address">
// many more divs after this one
> is the identifier for direct descendants, so in the following only the top level would be assigned by your css:
<form class="edit">
<div>
<div>
</div>
</div>
</form>
Removing the > will cause the style to apply to all divs under the form.