I'm trying to align a radio button, an input and some text inside one of my list-group-items, it looks good #desktop but #mobile it goes one on top of the other.
This is my code so far
<div class="panel panel-default">
<div class="panel-body">
<span style="color: #990000; font-size:17px;"><strong>8,55 €</strong></span> text
<ul class="list-group">
<li class="list-group-item"><input name="1" type="radio"> 1 text <strong>8,55 €</strong></li>
<li class="list-group-item"><input name="2" type="radio"> 3 text <strong>8,55 €</strong></li>
<li class="list-group-item"><input name="3" type="radio"> 6 text <strong>8,55 €</strong></li>
<li class="list-group-item">
<div class="container-fluid">
<div class="row">
<div class="col-md-1"><input name="n" type="radio" ></div><div class="col-md-3"><input type="text" name ="text" id="amount" class="form-control" placeholder="12"></div><div class="col-md-8" >text<strong>8,55 €</strong></div>
</div>
</div>
</li>
</ul>
</div>
</div>
Is there anything I can do to have it responsive and aligned in mobile as well as dekstop?
You can use col-xs-* in place of col-md-*: fiddle example
<div class="col-xs-1">
<input name="n" type="radio" >
</div>
<div class="col-xs-3">
<input type="text" name ="text" id="amount" class="form-control" placeholder="12">
</div>
<div class="col-xs-8" >
text<strong>8,55 €</strong>
</div>
Related
I'm trying to make a checklist in a more time saving way.
I have to do this thing underneath for every page like 17 times.
So to save some time I was hoping for Emmet to be te solution.
Important to say, I want to select the three names and do everything at once. I work with Coda 2.
What's the abbreviation to produce the following code after selecting the lines below:
Video
DVD
CD
To produce:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item1" value="Done" /> Video
</label>
</div>
</div>
</div> <!-- form-group -->
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item2" value="Done" /> DVD
</label>
</div>
</div>
</div> <!-- form-group -->
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item3" value="Done" /> CD
</label>
</div>
</div>
</div> <!-- form-group -->
And why doesn't this work: (div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$])*
When I try this I get:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item1" value="done"></label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item2" value="done"></label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item3" value="done">Video
DVD
CD</label></div>
</div>
</div>
Okay I came A little bit further.
Now it works with multiple lines.
But de Video, CD, DVD stay with the last form-group.
I used this one again:
(div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$])*
My result:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list1">
<input type="checkbox" name="item1" value="Gedaan" id="list1"/>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list2">
<input type="checkbox" name="item2" value="Gedaan" id="list2"/>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list3">
<input type="checkbox" name="item3" value="Gedaan" id="list3"/>Video
DVD
CD
</label>
</div>
</div>
</div>
This worked for me:
(.form-group>.col-sm-12>.checkbox>label>input[type=checkbox][name="item$"][value="done"])*
And the generated HTML:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item1" value="done">Video
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item2" value="done">CD
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item3" value="done">DVD
</label>
</div>
</div>
</div>
I tried yours and it works too, except for the part value=Gedaan:
Found the answer:
(div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$]){}*
{} lets the txt go on the back
First experience with bootstrap. Want 2 panels next to each other using the col-lg-6 class. Left panel will be a link to an article while holding an image. Right will be a signup/login box.
When loading the site the 2 panel goes underneath?
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body"><img class="img-responsive" src="images/warning.png"</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>
</div>
This is all inside a container.
Before adding img
After adding img
Please use this HTML
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">
<img class="img-responsive" src="images/warning.png"/>
</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>
Hello I am familiar with Bootstrap, but not very experienced with it. I am using it to create a static form, but I can't seem to get these panels to sit side by side with the "col-md-6" class tag inside of the rows.
I've been trying to read the Bootstrap documentation as well as look at other examples, but so far no luck. I've been spinning my wheels modifying classes, changing divs, adding divs, and just having no luck what so ever.
Below is the code I have extracted from my form which is the probelmatic area.
<div class="container">
<div class="form-group col-md-6">
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="strategy" class="control-label">Strategy</label>
<input type="text" class="form-control" id="strategy" placeholder="Strategy" />
</div>
<br/>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<label>Type of Service:</label>
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Transport
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Storage
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Balancing
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Park/Lend
</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="row col-xs-3">
<label for="internalBusinessUnit" class="control-label">Internal Business Unit</label>
<input type="text" class="form-control" id="internalBusinessUnit" placeholder="Internal Business Unit" />
</div>
<br/>
<br/>
<br/>
<div class="row col-md-6">
<ul>
<li class="checkbox">
<input type="checkbox" value="" />
Hub/Wheel
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Exchange
</li>
<li class="checkbox">
<input type="checkbox" value="" />
Pooling
</li>
<li class="checkbox">
Other:
<input type="checkbox" value="" />
<div class="col-xs-2">
<input type="text" class="form-control" id="other" placeholder="" />
</div>
</li>
</ul>
</div>
</div>
</div>
Now I have had form tags in here and tried form-inline as well as form-horizontal, but I am basically trying to have each panel sit side by side with one another. I also seem to be having an issue with the "Other" label appearing after the input box.
Fiddle for good measure : Fiddle
*There is probably a better way for me to position the elements on the next line as opposed to the break lines that I used, but like I said, I am new to Bootstrap and will only learn by doing. I assumed using the "row" would stack them vertically.
I had a quick fiddle with it. I think you should be able to use this to work with.
JSFiddle here
Note: I used
form-group
and tidied up the col's to help layout the form elements.
Wide space between label for vertical radio button and first choice. In an ideal world, I would love it to be the same amount of space as between the field labels and the top line on the fields. Any thoughts or ideas? Thanks in advance.
http://jsfiddle.net/steveadams617/MgcDU/8543/
<div class="container">
<form>
<div class="row">
<div class="col-sm-6">
<div class='form-group'>
<label for="provider_id">Provider</label>
<div>
<input class="form-control" type="text" maxlength="255" value="" name="provider_id_auto" id="provider_id_auto"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<label for='phone_us'>Phone</label>
<input class='form-control phone_us' type='text' maxlength='14' value='' name='phone_us' id='phone_us'/>
</div>
</div>
</div><!-- .row -->
<div class='row'>
<div class="col-sm-6">
<label for="med_coverage_id">Insurance Coverage</label>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="1" checked />
Pending
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="2" />
Covered
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="3" />
Needs Prior Approval
</label>
</div>
</div>
</div><!-- .row -->
</form>
</div><!-- .container -->
Your div .radio has a margin-top of 10px. You can manually adjust this like so
<div class="radio" style="margin-top: 0px;">
<label>
<input type="radio" name="med_coverage_id" value="1" checked="">Pending </label>
</div>
or of course edit the stylesheet or add your own style to the .radio-class (eg if you are using a CDN).
JSFiddle for code, then screenshot of what I see on my screen, since JSFiddle is displaying it wrong :
(entire code in link, brief view below)
http://jsfiddle.net/WeDLR/1/
<div class="col-lg-3">
<form method =post action="/UnitInfo/TSMServlet" NAME="form01">
<div class="form-group">
<label for="terminalname" class="col-lg-3 control-label">Terminal Name</label>
<div class="col-lg-3">
<input type="checkbox" class="checkbox" display="inline-block" name="checkbox_tname" onclick="checkbox_tname_click();">
<input type="text" class="form-control" name="tname" placeholder="Terminal Name">
</div>
</div>
</div>
Currently, my check box is partially under my textbox. I want to make it so the center of the check box is on the same line as the center of the text box. How can I do this?
PS. If I don't use a bootstrap textbox, it seems like my alignment is just fine.
Try following css...
.checkbox {
width: 100%;
}
.form-group {
white-space: nowrap;
display:inline
}
.form-control {
display: inline-block;
}
Demo Fiddle
Try this, if its ok I will explain. I did not change any css. See Fiddle.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<font class="header">
<center>
<b>Unit Information Filter </b>
</center>
</font><br>
<br>
<br>
<div class="container">
<div class="col-lg-3">
<form method="post" action="/UnitInfo/TSMServlet" NAME="form01">
<div class="form-group">
<label for="terminalname" class="col-xs-12 col-sm-12 col-lg-12 control-label">Terminal Name</label>
<div class="col-xs-2 col-sm-1 col-lg-2">
<input type="checkbox" class="checkbox" name="checkbox_tname" onclick="checkbox_tname_click();">
</div>
<div class="col-xs-10 col-sm-11 col-lg-10">
<input type="text" class="form-control" name="tname" placeholder="Terminal Name">
</div>
</div>
<br>
<div class="form-group">
<label for="tbid" class="col-lg-2 control-label">TBID</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="tbid" placeholder="TBID">
</div>
</div>
<br>
<div class="form-group">
<label for="version" class="col-lg-2 control-label">Version</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="version" placeholder="Version">
</div>
</div>
<br>
<div class="form-group">
<label for="lastconnect" class="col-lg-2 control-label">Last Connect Time</label>
</div>
<div class="form-group">
<label for="from" class="col-lg-2 control-label">From </label>
<div class="col-lg-10">
<input type="date" class="form-control" name="timefrom" placeholder="FROMdate">
<label for="to" class="control-label">To</label>
<input type="date" class="form-control" name="timeto" placeholder="TOdate">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default" ONCLICK="checkValue();" value="search" CLASS="BTN_MENU" >
Submit
</button>
</div>
</div>
</div>
FIDDLE