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.
Related
I need to add an "inline" control inside a form-group class in TB3 but I am not able to do it. This is what I've tried without success meaning it does not work as I want:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="new_question" method="POST" class="form-vertical" role="form">
<div class="form-group">
<label for="field_type_id">Select a Question Type</label>
<select class="form-control" id="field_type_id" name="field_type_id">
<option value="">Select One</option>
</select>
</div>
<div class="form-group">
<label for="field_name">Question Text</label>
<textarea class="form-control" name="field_name" id="field_name" rows="4"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Option 1</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value=""> Checkbox
</label>
</div>
</form>
</div>
</div>
</div>
From the snippet/example above I would expect:
Keep the first and second element as it's: the label on the top then the HTML element
Make an inline version of the third element: first have the option, then the HTML, then the checkbox which mean everything in one line.
The idea is to have something like:
Label1 Input1 Checkbox1
Label2 Input2 Checkbox2
Does any knows how to achieve this? It has to be done only in a certain lines so the rest of the form behaves as the form basic example.
For example, you might want to use columns from the Grid system:
<form role="form">
<div class="form-group col-sm-2">
<label>Some label</label>
</div>
<div class="form-group col-sm-2">
<label>E-mail</label>
<input type="email" class="form-control">
</div>
<div class="form-group col-sm-2">
<div class="checkbox">
<label>
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
</div>
</form>
The above example creates 3 equal-width columns using predefined grid class col-sm-2
Create a
Give it a class of Flex
Set the width
<div class='flex'>
<div> item1</div>
<div> item2</div>
<div> item3</div>
</div>
<div class='flex'>
<div> item4</div>
<div> item5</div>
<div> item6</div>
</div>
.flex {
display:flex;
justify-content:center;
align-items: center;
}
https://codepen.io/Codokk101/pen/goQNOW
I am working with vuejs and bootstrap so I am calling different components and attach them inside my HTML dynamically.
My problem is I don't get the desired effect, at the moment I have this:
the section title gives too much space related to the input and I don't know why the section is a different component and the data at the bottom gets loaded dynamically depending on the select box choice.
the rows columns and cells are a horizontal form but it occupies all the width of my row, I want the inputs to be lower and the button at centre a little bigger, I can't set it like I want if I try for example to increase button it will not be at centre anymore.
So here is my code:
<template>
<div class="container">
<div class="row">
<div>
<h1 class="text-center">Document Creation</h1>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-8 margin-above">
<div class="form-group">
<label class="control-label col-sm-2">Section</label>
<div class="col-sm-6">
<select class="form-control" v-model="currentView">
<option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
</select>
</div>
</div>
</div>
</div>
<!-- Here we load the diferent sections based on the selection choice -->
<component v-bind:is="currentView">
<!-- component changes when vm.currentView changes! -->
</component>
</div>
</template>
inside the component the other component that has the rows and cells and columns get loaded like this:
<template>
<div class="row">
<div class="col-md-offset-4">
<form class="form-inline margin-above">
<div class="form-group">
<label for="rows">rows:</label>
<input type="number" min="1" value="1" class="form-control" id="rows">
</div>
<div class="form-group">
<label for="columns">columns:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="form-group">
<label for="cells">cells:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="text-center">
<button type="submit" class="btn btn-success margin-above2">Add Table</button>
</div>
</form>
</div>
</div>
</template>
Please, I need some help trying to display it correctly. Thanks.
Currently, you're using too many <div>s for the layout. We can strip a few out to not only simplify the design, but also make it alot easier to read. We also want to leverage the use of bootstrap's Horizontal Forms
.
Your first snippet would look like this:
<template>
<div class="container">
<h1 class="text-center">Document Creation</h1>
<div class="col-md-12 form-horizontal margin-above">
<div class="form-group">
<label class="control-label col-sm-1">Section</label>
<div class="col-sm-11">
<select class="form-control" v-model="currentView">
<option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
</select>
</div>
</div>
</div>
<!-- Here we load the diferent sections based on the selection choice -->
<component v-bind:is="currentView">
<!-- component changes when vm.currentView changes! -->
</component>
</div>
<template>
And your second would look like this:
<template>
<form class="margin-above">
<div class="form-group col-sm-4">
<label for="rows" class="control-label">rows:</label>
<input type="number" min="1" value="1" class="form-control" id="rows">
</div>
<div class="form-group col-sm-4">
<label for="columns" class="control-label">columns:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="form-group col-sm-4">
<label for="cells" class="control-label">cells:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="col-xs-12 margin-above text-center">
<button type="submit" class="btn btn-success margin-above2">Add Table</button>
</div>
</form>
</template>
I've made a fiddle here to show the snippets together.
You are going to run into problems trying to use Boostrap and Vue together, but that is a question for another day.
By carefully mimicking the examples here, you can get a more nicely-spaced section layout.
<div class="margin-above form-group row">
<label class="col-form-label col-sm-1">
Section
</label>
<div class="col-sm-6">
<select class="form-control" v-model="currentView">
<option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
</select>
</div>
</div>
Making the button bigger is just a matter of adding one of the sizing classes. It does not cause a problem for centering:
<div class="text-center margin-above2">
<button type="submit" class="btn btn-success btn-lg">Add Table</button>
</div>
Putting some extra space in is some ordinary CSS. Here it is as a snippet. Depending on your display size, you may need different col-*-# classes.
new Vue({
el: '#app',
data: {
currentView: 'doesNotMatter',
sections: [{
label: 'one'
}, {
label: 'two'
}]
},
components: {
someComponent: {}
}
});
.margin-above2 {
margin-top: 2rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app" class="container">
<div class="row">
<div>
<h1 class="text-center">Document Creation</h1>
</div>
<div class="margin-above form-group row">
<label class="col-form-label col-sm-1">
Section
</label>
<div class="col-sm-6">
<select class="form-control" v-model="currentView">
<option v-for="(item,index) in sections" :value="item.key">{{item.text}}</option>
</select>
</div>
</div>
</div>
<!-- Here we load the diferent sections based on the selection choice -->
<some-component inline-template>
<div class="row">
<form class="form-inline">
<div class="form-group">
<label for="rows">rows:</label>
<input type="number" min="1" value="1" class="form-control" id="rows">
</div>
<div class="form-group">
<label for="columns">columns:</label>
<input type="number" min="1" value="1" class="form-control" id="cols">
</div>
<div class="form-group">
<label for="cells">cells:</label>
<input type="number" min="1" value="1" class="form-control" id="cells">
</div>
<div class="text-center margin-above2">
<button type="submit" class="btn btn-success btn-lg">Add Table</button>
</div>
</form>
</div>
</some-component>
</div>
I've defined a number of Bootstrap elements and want to position each label and input set in a stacked layout. At the moment the layout positioning forces the label to be positioned left of the corresponding control when the browser in maximized.
In order to re-position to a stacked layout I tried placing the label inside the same div as the input. I also tried setting the col-xs-1 property on the parent div mentioned here or increasing the col size which only pushes the label right covering the input instead of on top.
So the layout at present looks like this where my label is left aligned to the input:
Instead I'm aiming to position like this:
The window does resize to stack the labels when I reduce the size of my browser window, but when it's maximized the labels appear alongside.
Question:
Can someone explain how to stack sets of label and input controls in Bootstrap 3?
Sample of my layout:
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class=
"form-group has-feedback" method="post">
<div class="form-horizontal">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-1 control-label" for=
"Application">Application</label>
<div class="col-md-4">
<input id="ApplicationID" name="Application"
required="required" type="text" class=
"form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label" for=
"EscID">EM</label>
<div class="col-md-4">
<input id="EscID" name="EM" type="text"
placeholder="(If Applicable)" class=
"form-control" />
</div>
</div>
</div>
</div>
</form><!--END OF FORM ^^-->
</fieldset>
</div>
</div>
</div>
The reason here is you have parent column of 12( col-lg-12 - right inside .form-horizontal) grid. Now the child columns you have is col-md-1 (for label) and col-md-4(for input). So they are suppose to be in same parent row having column size of 12(col-lg-12).
What you could do is as following:
Give the label column of 9 and input column of 4(as it is). So in sum it exceeds 12. Which forces input to bring down(stacked as you want).
But in giving label column of 9 your text would appear on right(far far away...), so don't forget to add CSS: text-align:left; to .control-label. Also this class .control-label must be selected by parent, so it won't effect any other similar class in your document.
UPDATE: Scenario -
Image 1:
Image 2:
Image 3:
.control-label { text-align: left !important; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class="form-group has-feedback" method="post">
<div class="form-horizontal">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-9 control-label" for="Application">Application</label>
<div class="col-md-4">
<input id="ApplicationID" name="Application" required="required" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-9 control-label" for="EscID">EM</label>
<div class="col-md-4">
<input id="EscID" name="EM" type="text" placeholder="(If Applicable)" class="form-control" />
</div>
</div>
</div>
</div>
</form>
<!--END OF FORM ^^-->
</fieldset>
</div>
</div>
</div>
See the basic form on Bootstrap's website.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Just remove:
The div with class="form-horizontal" (and it's closing tag)
Then remove your col-md-4, col-md-9 class references for the label and input tags.
Revised code:
https://jsfiddle.net/4bnndd8b/3/
Edit: if you want your form only 4 cols at md and large adjust your : class="col-lg-12" reference... i.e. col-md-4 (md and larger will only be a 4 col form).
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class=
"form-group has-feedback" method="post">
<div class="col-lg-12">
<div class="form-group">
<label class="control-label" for=
"Application">Application</label>
<div class="">
<input id="ApplicationID" name="Application"
required="required" type="text" class=
"form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label" for=
"EscID">EM</label>
<div class="">
<input id="EscID" name="EM" type="text"
placeholder="(If Applicable)" class=
"form-control" />
</div>
</div>
</div>
</form><!--END OF FORM ^^-->
</fieldset>
</div>
I am using Bootstrap3 in my project. I have enclosed my form in a jumbotron.
Here is how my form looks (not good looking as of now):
I tried to make it better. but it is getting worse. I want all the fields to be in one-line and
the submit button centered below them. I have no idea how to do it. I am very new using Bootstrap3.
Here is my html code:
<form action="" id="id-exampleForm" class="form-inline" method="post" >
<input type='hidden' name='csrfmiddlewaretoken' value='1bfhNFINdeJVpSNBBQd0X7zLWLVwm1bB' />
<div id="div_id_price_order" class="form-group">
<label for="id_price_order_0" class="control-label col-lg-2 requiredField">
price order
<span class="asteriskField">*</span>
</label>
<div class="controls col-lg-12">
<label class="radio">
<input type="radio" checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >lowest</label>
<label class="radio">
<input type="radio" name="price_order" id="id_price_order_2" value="highest_price" >highest</label>
</div>
</div>
<div class="form-group">
<div id="div_id_newest_entry" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_newest_entry" class=" requiredField">
<input class="checkboxinput checkbox" id="id_newest_entry" name="newest_entry" type="checkbox" />
latest date
</label>
</div>
</div>
</div>
<div class="form-group">
<div id="div_id_latest_year" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_latest_year" class=" requiredField">
<input class="checkboxinput checkbox" id="id_latest_year" name="latest_year" type="checkbox" />
latest year
</label>
</div>
</div>
</div>
<input type="submit" name="submit" value="Submit" class="btn btn-primary button white" id="submit-id-submit" />
</form>
EDIT:
I want something like this: I have edited this on powerpoint. so it does not look very good.
EDIT AFTER COMMENT
Please see the fiddle for an inline form in a Jumbotron with the button in-line (not below centered), and fieldset.
Note : that I changed the vertical alignment of the checkbox and radio + add some right margin, and an extra small button. The form will go as block if the screen is extra-small as a bootstrap behavior.
JsFiddle
<div class="jumbotron">
<form class="form-inline">
<fieldset class="radiogroup">
<legend>Sorting Criteria</legend>
<label for="id_price_order_0">
price order
<span class="asteriskField">*</span>
</label>
<label class="radio" for="id_price_order_1">
lowest
<input type="radio" checked="checked" id="id_price_order_1" />
</label>
<label class="radio" for="id_price_order_2">
highest
<input type="radio" id="id_price_order_2" />
</label>
<label for="id_newest_entry" class="requiredField checkbox">
latest date
<input id="id_newest_entry" type="checkbox" />
</label>
<label for="id_latest_year" class="requiredField checkbox">
latest year
<input id="id_latest_year" type="checkbox" />
</label>
<input type="submit" name="submit" value="Submit" class="btn btn-primary btn-xs" />
</fieldset>
</form>
Add the class form-control to ALL of your input elements for a start:
<input type="radio" class='form-control' checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >
Also, what I do to make my life easier is to pre-wrap the elements in the correct sized divs instead of doing it in the labels and inputs like so:
<div class='row'>
<form ... >
<div class='col-lg-2>
<label ... ></label>
<input ... >
</div>
<div class='col-lg-2'>
...
</div>
...
</form>
</div>
Its a tiny bit slower to load but it makes the code so much more readable I think it is worth it. Also I feel that there is a lot of extra in your code that shouldn't be there and is confusing check out the code here: http://getbootstrap.com/css/#forms. They show you exactly how to format an in-line form.
Could being inside a .jumbotron be causing the issues? Why don't you try a panel or a well This should work for you:
<div class='panel panel-default'>
<div class="panel-heading">In-line Form</div>
<div class="panel-body">
<form action='anotherScript.php' method='post' class='form-inline'>
<div class='row'>
<div class='col-md-4'>
<strong>Price:</strong>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="low" checked>
Lowest
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="high">
Highest
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='date' value='date'>
Latest Date
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='year' value='year'>
Latest Year
</label>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<center><button type='submit' class='btn btn-primary'>Submit</button></center></form>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/52VtD/5046/
Make sure you stretch the results panel to full width to see the form in-line.
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>