i want to design a navbar that have select, input and button elemnts. i wrote below code:
<nav class="navbar sticky-top navbar-light p-0">
<div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
<div class="col-md-8 mx-auto">
<form>
<div class="row">
<div class="col-md-3 pr-md-0">
<select class="form-control form-style-w3layout"
style="background: #011144; color: #fff" id="exampleFormControlSelect1">
<option>Deutsch - English</option>
<option>English- Deutsch</option>
</select>
</div>
<div class="form-row col-md-9 pl-md-0">
<div class="col-xs-10 col-md-10 pr-md-0">
<input type="text" class="form-control form-style-w3layout"
id="autocomplete" placeholder="Search Deutsch" required>
</div>
<div class="col-xs-2 col-md-2 pl-md-0">
<button class="form-control form-style-w3layout-btn"><span class="fa fa-search"></span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
below image is output:
but in mobile device i have problem. input and buttun are shown in two different rows. and there is not any margin between select and input elements.
the below image is mobile output:
You can use the input group in bootstrap
<nav class="navbar sticky-top navbar-light p-0">
<div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
<div class="col-md-8 mx-auto">
<form>
<div class="row">
<div class="col-md-3 pr-md-0 mb-3 mb-md-0">
<select class="form-control form-style-w3layout" style="background: #011144; color: #fff"
id="exampleFormControlSelect1">
<option>Deutsch - English</option>
<option>English- Deutsch</option>
</select>
</div>
<div class="col-md-9 pl-md-0">
<div class="input-group mb-3">
<input type="text" class="form-control form-style-w3layout" id="autocomplete" placeholder="Search Deutsch"
required>
<div class="input-group-append">
<button class="form-control form-style-w3layout-btn">
<span class="fa fa-search"></span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</nav>
Or if you want to use the grid system then you can do something like the following by adding another row element wrapping around the elements you want to have a different row.
<nav class="navbar sticky-top navbar-light p-0">
<div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
<div class="col-md-8 mx-auto">
<form>
<div class="row">
<div class="col-md-3 pr-md-0 mb-3 mb-md-0">
<select class="form-control form-style-w3layout" style="background: #011144; color: #fff"
id="exampleFormControlSelect1">
<option>Deutsch - English</option>
<option>English- Deutsch</option>
</select>
</div>
<div class="col-md-9 pl-md-0">
<div class="row">
<div class="col-10 col-md-6 pr-0">
<input type="text" class="form-control form-style-w3layout" id="autocomplete" placeholder="Search Deutsch" required>
</div>
<div class="col-2 col-md-2 pl-0">
<button class="form-control form-style-w3layout-btn"><span class="fa fa-search"></span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</nav>
Try this
<nav class="navbar sticky-top navbar-light p-0">
<div class="collapse navbar-collapse search-bar show p-4" id="navbarSupportedContent">
<div class="col-md-8 mx-auto">
<form>
<div class="row">
<div class="col-md-12 col-lg-4 p-0">
<select class="form-control form-style-w3layout"
style="background: #011144; color: #fff" id="exampleFormControlSelect1">
<option>Deutsch - English</option>
<option>English- Deutsch</option>
</select>
</div>
<div class="col-md-12 col-lg-6 p-0">
<input type="text" class="form-control form-style-w3layout" id="autocomplete" placeholder="Search Deutsch" required>
</div>
<div class="col-md-12 col-lg-2 p-0">
<button class="form-control form-style-w3layout-btn"><span class="fa fa-search"></span>
</button>
</div>
</div>
</form>
</div>
</div>
Related
I am trying to create a form of sorts with overlapping content. I created all the elements of the form, the idea is to position them absolute and visible:hidden and then use JS to toggle the visibility when buttons are clicked.
My issue is the when I apply position:absolute on any div, its will mess up the layout of the children in that div
Any fix?
<div class="row justify-content-center">
<form id="form-bizOwner">
<div class="container" id="B-firstQ">
<div class="row justify-content-center mb-3">
<div class="col-12">
<div class="row">
<div class="col-2 B-red-circle-div px-0">
<div class="B-red-circle">01</div>
</div>
<div class="col-8 B-input-field form-group">
<label for="B-firstQ">Age</label>
<input type="number" class="form-control" id="B-firstQ" min="18" placeholder="Enter your age">
</div>
</div>
</div>
<div class="col-4 mt-4">
<button type="button" class="btn btn-danger px-5 py-2" id="B-firstNext">NEXT</button>
</div>
</div>
</div>
<div class="container" id="B-secondQ">
<div class="row justify-content-center mb-3">
<div class="col-12">
<div class="row">
<div class="col-2 B-red-circle-div px-0">
<div class="B-red-circle">02</div>
</div>
<div class="col-10 B-input-field form-group">
<label>Are you a business owner in Nigeria?</label>
<div class="row">
<div class="col-12">
<div class="form-check form-check-inline">
<input class="form-check-input d-none" type="radio" name="B-secondQOptions" id="secondQYes" value="option1">
<label class="form-check-label btn btn-outline-info px-4" for="secondQYes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input d-none" type="radio" name="B-secondQOptions" id="secondQNo" value="option2">
<label class="form-check-label btn btn-outline-info px-4" for="secondQNo">No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mt-4">
<button type="button" class="btn btn-danger px-5 py-2" id="B-secondNext">NEXT</button>
</div>
</div>
</div>
</form>
</div>
This is my first post on stackoverflow, so forgive me if I make mistakes.
Would like to reverse these 2 columns in bootstrap and it doesn't work. Tried with order-2 but no luck.
<div class="flexbox">
<div class="container list">
<div class="row">
<h1>Customers</h1>
</div>
<div class="row">
<div class="col-sm-3 order-2">
<div class="list-group" id="supplier-list">
</div>
</div>
<div class="col-sm-6 order-">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">Name</div>
</div>
<input type="text" id="supplier-name" class="form-control" aria-label="Input group example">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">CUI</div>
</div>
<input type="text" id="supplier-cui" class="form-control" aria-label="Input group example">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">ID</div>
</div>
<input type="text" id="supplier-id" class="form-control" aria-label="Input group example">
</div>
<br>
<button type="button" id="suppliers-update" class="btn btn-success">Update</button>
<button type="button" id="suppliers-delete" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
Inside a bootstrap panel I have a form where I use select2 for select inputs.
The problem is that when I define the panel to be closed by default (by removing the in from the class="panel-collapse collapse" ) the width of the select2 input is getting smaller!
$('.js-example-basic-single').select2({
placeholder: "Select...",
allowClear: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-plus mright-1"></i> closed by default
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Status</label>
<div class="col-xs-10">
<select name="action" class="js-example-basic-single js-states form-control" required>
<option></option>
<option value="toPrepare">Prepare</option>
<option value="toProduction">Produce</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Notes</label>
<div class="col-xs-10">
<textarea class="form-control" name="comments" rows="3" /></textarea>
</div>
</div>
<div class="col-xs-2">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-plus mright-1"></i> open by default
</a>
</h4>
</div>
<div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Status</label>
<div class="col-xs-10">
<select name="action" class="js-example-basic-single js-states form-control" required>
<option></option>
<option value="toPrepare">Prepare</option>
<option value="toProduction">Produce</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Notes</label>
<div class="col-xs-10">
<textarea class="form-control" name="comments" rows="3" /></textarea>
</div>
</div>
<div class="col-xs-2">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
However, if I add the in to the class then the width of the select2 input follows its parent's column with!
I don't understand why this is happening... Any ideas how can I fix it?
You can easily solve this using the width option of the plugin, in this particular case using width: "100%" will fix it, like this:
$('.js-example-basic-single').select2({
placeholder: "Select...",
allowClear: true,
width: "100%"
});
Check the working example:
$('.js-example-basic-single').select2({
placeholder: "Select...",
allowClear: true,
width: "100%"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-plus mright-1"></i> closed by default
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Status</label>
<div class="col-xs-10">
<select name="action" class="js-example-basic-single js-states form-control" required>
<option></option>
<option value="toPrepare">Prepare</option>
<option value="toProduction">Produce</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Notes</label>
<div class="col-xs-10">
<textarea class="form-control" name="comments" rows="3" /></textarea>
</div>
</div>
<div class="col-xs-2">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-plus mright-1"></i> open by default
</a>
</h4>
</div>
<div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Status</label>
<div class="col-xs-10">
<select name="action" class="js-example-basic-single js-states form-control" required>
<option></option>
<option value="toPrepare">Prepare</option>
<option value="toProduction">Produce</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Notes</label>
<div class="col-xs-10">
<textarea class="form-control" name="comments" rows="3" /></textarea>
</div>
</div>
<div class="col-xs-2">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.select2-container {
width: 100% !important
}
This CSS lines will resolve this Issue
I'm trying to create two 6 column divs. The second div has a form that should be 4 columns and centered. Everything works fine until I add the file input to the form. This causes it to break out of the container and adds a horizontal scroll bar at the bottom. I read that changing css for input{overflow:hidden;} would fix this but it did not. I've commented out the input file line so that it can be found easier. Can someone tell me how to keep the file input from breaking outside the box.
<div class="container careers-container">
<div class="row">
<div class="col-12 col-sm-6 mx-auto mt-4">
<h1 class='carbon cyan text-center'>Careers</h1>
<div class="divider background-cyan"></div>
<p class='salmon mt-4 font-24'>The Bridge is a premier pool hall providing an exceptional experience to it's clientele. We have the best tables, a great selection of drinks, good food options and lots of entertainment in a classy atmosphere. We are currently looking for people with service industry experience to serve at our Edmond location.</p>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class='zaffre h5'>Currently Hiring</h2>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 col-sm-4 d-none d-sm-block">
<img src="images/dart-board.jpg" class='img-fluid mb-3'></img>
</div>
<div class="col-12 col-sm-8">
<ul class='list-unstyled zaffre ml-3'>
<li>Bar Manager</li>
<li>Full time bartenders</li>
<li>Part time bartenders</li>
<li>Full or part time cooks</li>
<li>Part time cocktail waitress</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<span class='zaffre h6 font-24'>Please submit your resume here and we will contact you</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-4 mx-auto">
<div class="background-cyan pt-3 pb-3 pl-1 pr-1">
<form>
<div class="form-group row">
<label for="inputName" class="col-sm-2 col-form-label sr-only">Name</label>
<div class="col-12">
<input type="text" class="form-control" id="inputName" placeholder="Full Name">
</div>
</div>
<div class="form-group row">
<label for="tel-input" class="col-sm-2 col-form-label sr-only">Telephone</label>
<div class="col-12">
<input class="form-control" type="tel" value="Phone Number" id="tel-input">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label sr-only">EMAIL</label>
<div class="col-12">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class='text-white' for="InputFile">Upload Resume</label>
<!-- <input type="file" class="form-control-file" id="InputFile"/> -->
</div>
<div class="text-center">
<button type="submit" id='submit-btn' class="btn btn-sm btn-secondary mt-5 info-button">Submit Form</button>
</div>
</form>
</div>
</div>
</div>
</div><!--End of container-->
This is my code :
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
The only thing that I changed is <div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
And here is before/after :
Before I inserted col-md-6 col-md-offset-3, the blue-shaded box looks balanced.
After I inserted col-md-6 col-md-offset-3, it looks unbalanced.
Why does it happen? I think that grid should work well(login box should be located at center" because it means `3(offset) - 6 - 3(offset)'.
Need your help.
Its because your loginbox does not have 12 columns in total as you specified 6+3(offset) =9
I would suggest this way as I dont like using offset
<div class="col-md-3 "></div>
<div id="loginbox" class="mainbox col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body" >
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div> <!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
<div class="col-md-3 "></div>
Here's my take: giving it a fluid container and a couple extra rows to center things up:
<div class="container-fluid">
<div class="row">
<div class="brown-row col-md-8 col-md-offset-2">
<div class="row">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div class="forget">Forgot password?</div>
</div>
<div class="panel-body">
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<div class="row">
<a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
<a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
Don't have an account?
<a href="#" id="signuplink">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
<!-- <div style="padding-top:30px" class="panel-body" > -->
</div>
</div>
</div>
</div>
</div>
</div>
and css:
body {
background: #634a16;
}
.brown-row {
background: #9e7623;
}
#loginbox {
margin-top: 50px
}