The problem is Google chrome browser shows the search box in a new line whereas the Mozilla firefox display correctly as inline.I want to solve the problem using bootstrap classes
Can anyone help me to solve this problem in the code
<div class="navbar-collapse collapse4">
<form class="form-inline navbar-form navbar-right" action="http://example.com/search/search" method="post">
<div class="input-group">
<input type="text" class="form-control" name="search" id="search" placeholder="Search by author, title, ISBN here">
<span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
</div>
</form>
</div>
The problem is you adding the search box to navbar but Don't do this:
<div class="navbar-collapse collapse4">
<form class="form-inline navbar-form navbar-right" action="http://example.com/search/search" method="post">
<div class="input-group">
<input type="text" class="form-control" name="search" id="search" placeholder="Search by author, title, ISBN here">
<span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
</div>
</form>
</div>
Do this instead:
<div class="col-sm-4">
<form class="form-inline navbar-form navbar-right" action="http://example.com/search/search" method="post">
<div class="input-group">
<input type="text" class="form-control" name="search" id="search" placeholder="Search by author, title, ISBN here">
<span class="input-group-btn"><button type="submit" class="btn btn-default">Search</button></span>
</div>
</form>
</div>
Tip: You can always use Inspect element in chrome to debug your code.
Related
Having a problem with getting the items of the following code vertically aligned with bootstrap 4. Before the addition of the row they are all stacked but revert to being horizontally in-line when the "row" or "row align-items-start" classes are added.
<div class="container">
<div class="row align-items-start">
<h1></h1>
<form action="" method="POST">
<input class="form-control" type="text" name="name" placeholder="name">
<input class="form-control" type="text" name="name" placeholder="image URL">
<button class="btn btn-dark">
Submit!
</button>
</form>
Go Back
</div>
</div>
You need to specify a column, see example.
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1></h1>
<form action="" method="POST">
<input class="form-control" type="text" name="name" placeholder="name">
<input class="form-control" type="text" name="name" placeholder="image URL">
<button class="btn btn-dark">
Submit!
</button>
</form>
Go Back
</div>
</div>
</div>
I have a form that has 2 text and 1 button to allow user to enter searching date, and I need it to display inline. I followed using <form class="form-inline"> but it still doesn't work. It shows like that:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="pull-right">
<form class="form-inline" role="search" action="<?php echo base_url('report/searchDate')?>" method = "post">
<div class="input-group">
<input type="text" class="form-control" placeholder="Date From" name = "searchDateFrom" size="10px; ">
<input type="text" class="form-control" placeholder="Date To" name = "searchDateTo" size="10px; ">
<div class="input-group-btn">
<button class="btn btn-default " type="submit" value = "searchDateTo"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
Use input-daterange class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19">
</div>
For more information : https://bootstrap-datepicker.readthedocs.io/en/latest/markup.html#date-range
I have a login form on a site that is using bootstrap. On desktop there is no problem. But on mobile devices the button doesn't work nor does the checkbox. There is also a link for the forgotten password but that doesn't work on mobile either.
<div class="col-md-4 col-xs-8">
<form method="post">
<div class="row">
<div class="input-group col-md-12">
<input type="text" class="form-control" style="margin-bottom:10px;" placeholder="User Name" aria-label="User Name" name="username"/>
<input type="hidden" value="true" name="login_now"/>
</div>
<div class="col-md-12 input-group">
<input type="password" class="form-control" placeholder="Password" aria-label="Password" name="password"/>
<span class="input-group-btn">
<button role="button" class="btn btn-blue" type="submit" aria-label="Log In" name="login_button">Log In</button>
</span>
</div>
<div class="col-md-12">
<input type="checkbox" name="save-password" />
Save Password (do not check box if using a public computer)
<a class="password-link" href="forgot_password.php">Forgot Password?</a>
</div>
</div>
</form>
</div>
I have no idea why this isn't working on mobile, but is working on desktop
So the problem seemed to have been the col-xs-8 at the top. It seemed to have caused the input to overlap the button
I need to change the style on a working search box to match the theme.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
<div class="search_box">
<form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>">
<input type="text" name="s" id="search_top" />
<input type="button" name="btn1" id="btn_top" value="" />
</form>
</div>
The first div is the style I need, the second is the working search box.
Respectively, here is what each looks like currently:
http://gyazo.com/ecd1b696f723879d5512588b1d384017
Manage the width of your parent container as per your requirement, but the get the search bar, as you are showing: check the linked fiddle:
https://jsfiddle.net/happy2deepak/d4jad6ah/
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-dark btn-lg">Go!</button>
</span>
</div>
I'm trying to get a search form to pull-right within a well. it pulls to the right but moves south of the well.
the code i have is;
<div class="container">
<div class="well">
<div class="pull-right">
<form class="form-inline " role="form">
<input type="search" class="form-control" id="search" placeholder="Search Assets">
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
I've done a jsfiddle at http://jsfiddle.net/52VtD/3366/
You need to clear float after your floated div.
Here
<div class="container">
<div class="well">
<div class="pull-right">
<form class="form-inline " role="form">
<input type="search" class="form-control" id="search" placeholder="Search Assets">
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>