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.
Related
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.
I'm trying to make a menu. I want text to the right of it but I still want the mobile to be 100% width. When it's on desktop, how do I make the column not wrap around the div? I could make this 100% height, but then on mobile it might not work.
jsfiddle.net/La909cq3
Notice that name goes to the right of the menu if you stretch the container to be desktop width.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="col-md-4">
<ul>
<li>
<a ui-sref="manage.newPerson"><b>Groups of People</b></a>
</li>
<li>
<a ui-sref="manage.newPerson"><b>Make a New Person</b></a>
</li>
<li>
<a ui-sref="manage.people"><b>Make a New Manager</b></a>
</li>
</ul>
</div>
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone Number</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I just put clear:both; on your div that wraps around the form. Once i did that your 'name' heading stop floating up to the right of your list of items.
https://jsfiddle.net/6beL3rn5/
It really only has to do with the fact that the menu and the form need to be in separate grid spaces. you have the menu wrapped in col-md-4 which will flowt ot to the left...but no grid class for the div around the form. Doing this will help that
Look at how I added an outer div with
<div class="row">
and the added the col-md-12 class to both the menu and the form divs.
http://jsfiddle.net/gbn4hnw1/
One solution is to put col-md-4 around the second div http://jsfiddle.net/La909cq3/1/
<div class="col-md-4">
Have you tried using word-wrap in CSS?
Try this, I find it works well for me.
word-wrap: break-word;
white-space:normal;
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
I've following markup:
<div class='foo'>
<form>
<input class='bar' type='text'>
</form>
<div/>
<div class='foo'>
<form>
<input class='bar' type='text'>
</form>
</div>
I'd like to fill input in the second .foo container. How I can achieve this in Capybara ?
What about:
within all('.foo').last do
find('.bar').set 'a value'
end
Check within and set.
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;
}