I Have a horizontal modal form defined similarly to:
<div id="formElements" class="modal-body form-horizontal">
<div id="catTemplate" class="form-group" style="display:none">
<div class="controls col-sm-1">
<span class="glyphicon glyphicon-minus"></span>
</div>
<div class="controls col-sm-7">
<input class="form-control" placeholder="Category">
</div>
<div class="controls col-xm-3">
<input class="form-control" type="number" min="0" max="100" style="width:100px;" placeholder="Weight %">
</div>
</div>
</div>
But my link floats a little bit above the horizontal line of the other form elements. I attached a screenshot. Is there a way to properly align them?
You can use line-height See this link
Or you can use this one too
Related
I am trying to do something like this. http://www.lolnexus.com/
I am trying to build the search module but cannot get my form to vertically stack. How can I go about this better using bootstrap. I am trying to build the part where it says enter summoner name and under that the radio buttons but I cant seem to figure how to get that alignment at least the vertical alignment. Custom styling can come later.
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<form role="form" method="post">
<div class="col-md-6 form-group">
<input type="search" size="100" id="mySearch" placeholder="Search for Summoner Name">
<button type="button" class="btn btn-primary">Search</button>
</div>
<div class="col-md-6 form-group">
<label> NA</label>
<input type="radio" name="region" id="NA" value="NA" />
<label>EUW</label>
<input type="radio" name="region" id="EUW" value="EUW">
</div>
</form>
</div>
</div>
</div>
Did you try changing column width of form-groups to 12 columns?
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<form role="form" method="post">
<div class="col-md-12 form-group">
<input type="search" size="100" id="mySearch" placeholder="Search for Summoner Name">
<button type="button" class="btn btn-primary">Search</button>
</div>
<div class="col-md-12 form-group">
<label> NA</label>
<input type="radio" name="region" id="NA" value="NA" />
<label>EUW</label>
<input type="radio" name="region" id="EUW" value="EUW">
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron">
<form class="form" role="form" method="post">
<div class="form-group">
<input type="search" class="form-control" size="100" id="mySearch" placeholder="Search for Summoner Name" />
</div>
<div class="form-group form-inline">
<div class="radio">
<label>
<input type="radio" name="region" id="NA" value="NA" />
NA
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="region" id="EUW" value="EUW">
EUW
</label>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary">Search</button>
</div>
</form>
</div>
</div>
</div>
There are lots of different classes you can use. I recommend you study bootstrap better to understand it. My example is for a form that spans the width of the container. Below the search input are the radio buttons. Below them is the search button. Bootstrap, by default is a 12 column layout. You were specifying 6 columns in width which placed the elements next to one another instead of vertically. You can just add the form-inline class to the form-group divs to make those particular elements inline. The form-control class makes the control span the width of its container.
Not sure what you trying to do, but if you are trying to have input and the button in one row and the radio buttons underneath, just put both form-groups in a separate row as well and also add col-md-offset-3 so it will be in the middle.
I am using ChartJS to place a responsive chart within a div. I am also using bootstrap, so the div class is grid focused (ex. md-9). The chart keeps expanding beyond the div. I was considering overflow: hidden on the div but don't want to lose any data from being shown. Here is a link to my development site. Any assistance is appreciated:
http://investingcalculator.azurewebsites.net
My current HTML code:
<div class="budgetcalcsection">
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="inputtext">
Current Balance
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" id="currentbalance" class="form-control" placeholder="0">
</div>
</div>
<div class="inputtext">
Interest Rate
<div class="input-group">
<span class="input-group-addon">%</span>
<input type="number" id="interestrate" class="form-control" placeholder="0">
</div>
</div>
<div class="inputtext">
Monthly Contributions
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" id="monthlycontribution" class="form-control" placeholder="0">
</div>
</div>
<div class="inputtext">
Years Contributing
<div class="input-group">
<span class="input-group-addon">+</span>
<input type="number" id="yearscontributing" class="form-control" placeholder="0">
</div>
</div>
<div class="">
<input class="btn btn-default" type="submit" id="calculate" value="Calculate">
</div>
<div class="">
<input class="btn btn-default" type="submit" id="reset" value="Reset">
</div>
<div class="inputtext">
Ending Balance
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="endingbalance" class="form-control" placeholder="0" readonly>
</div>
</div>
</div>
<!-- Investing Chart -->
<div class="col-sm-9 col-md-10">
<canvas id="canvas"></canvas>
</div>
</div>
</div>
The problem stems from the fact that ChartJS doesn't take into account that the display-box on your elements is border-box. It is sizing the chart to the full width of the div without taking into account the padding.
In order to fix it, just put a div without any bootstrap column classes inside your column and target that with ChartJS.
I am trying to align two inputs side by side using bootstrap. Testing of regular divs as follows works great:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
But this always pushes to the second input below the first.
<div class="row">
<div class="col-md-2 input-group">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
<div class="col-md-2 col-md-offset-2 input-group">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
Any clues?
As in given HTML there is no <form> element.
here is the
Demo using .controls-row and .control-group
<div class="container">
<div class="controls-row row">
<div class="control-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="control-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</div>
You should use the "form-inline" Bootstrap class to achieve this:
<form class="form-inline">
<div class="form-group">
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group">
<div class="input-group" style="width: 250px;">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>
Take a look at it HERE
I think you've asked a sort of loaded question, but I'll do my best to help.
After following the BS3.x docs online, I noticed you didn't wrap your form elements in a form-x class. That usually helps with their custom CSS for form elements. Following BS convention, you're missing an outer wrapper form-group. Lastly, because your beginning label(s) are different lengths (ie Mortgage Payment), wrapping them in a grid container .col-md-2 might not render the way you intend. Regardless, changing the column class is easy to do, so that is for you to decide. Remember that BS has media queries, so how it shows for you might be different depending on device and viewport width.
All that said, I've got this fiddle that should help you.
HTML
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Income $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Mortgage Payment $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
</div>
</div>
</form>
</div>
http://jsfiddle.net/5webN/
I'm trying to have on the same line: text, search box and the button "Locate", but the following code seems not working because what I get is: the text "Map for network..." aligned with the input box while the "Locate" button is below the input box. Any suggestion?
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<div class="input-group">
<label class="control-label col-lg-8">Map for Network<p class="badge"><?php echo $net_name ?></p></label>
<div class="form-horizontal col-lg-4">
<input id="marker_id" name="address" class="form-control input-sm" type="text" placeholder="node name..">
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm">Locate</button>
</span>
</div>
</div>
</div>
</div>
JSFiddle "Answer"
To cut to the chase - you can look at the result of my tests on JSFiddle: http://jsfiddle.net/eThej/. NOTE - Bootstrap is responsive so you need to make the window with the preview large enough or the controls will wrap to the next line. This is intentional to allow for forms to work on smaller screens (responsive design).
Explanation / Notes
I believe the following example (pulled from the bootstrap site) does something like what you are looking for:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
I took your code and applied a few changes to it and got a similar result. First - you are looking for a form with a class of "form-inline". Second, if you are using a column layout I think you probably want "md" columns and not "lg" columns. Finally I think you div's aren't nested correctly. It isn't pretty but I applied these few changes and got much closer to what I think you want. The following is that result:
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229" class="panel-heading">
<form class="form-inline">
<div class="col-md-4">
<label class="control-label">Map for Network</label>
<p class="badge">Test</p>
</div>
<div class="col-md-8">
<div class="form-group"><input id="marker_id" name="address" class="form-control input-sm"
type="text" placeholder="node name.." />
</div>
<button type="submit" class="btn btn-default">Locate</button>
</div>
</form>
</div>
</div>
Again, not a perfect answer but I think it should get you on the right track. Best of luck!
This code seems to be more suitable for what I had in mind.
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<label class="control-label col-lg-8">Map for Network Test</label>
<div class="input-group input-group-sm">
<input id="" type="text" class="form-control" placeholder="Node Name">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Locate</button>
</span>
</div><!-- /input-group -->
</div>
</div>
I am creating a form which is horizontal and want to put a full word in between the two columns as below. If I use another tag it creates too much padding on either side of this word, and if I just put in a label or a plain text character surrounded by no tags, it ruins the position of the domain box. How can I make this work without overwriting the styles in the bootstrap.css?
I would like the form to be completely horizontal.
<div class="row">
<label for="www" class="col-sm-1 control-label">
Label1
</label>
<div class="col-sm-5">
<input type="text" class="form-control" />
</div>
<div class="col-sm-2">
<input type="text" class="form-control" />
</div>
<!-- Word to go here-->
<div class="col-sm-3">
<button type="submit" class="btn btn-primary">go</button>
</div>
</div>
</div>
Thanks in advance
You can try to follow bootstrap's 12 col grid system and specify one column col-sm-1 for the word, so that all columns add up to 12.
http://jsfiddle.net/bRh2z/show
http://jsfiddle.net/bRh2z/
<div class="row">
<label for="www" class="col-sm-1 control-label">Label1</label>
<div class="col-sm-5">
<input type="text" class="form-control" />
</div>
<div class="col-sm-2">
<input type="text" class="form-control" />
</div>
<div class="col-sm-1">woooord</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary">go</button>
</div>
</div>