I have some html code that works fine with google chrome but not with firefox. Somehow the panels do not display the same. Code is as follows:
<div class="container" style="padding-top:15px">
<div class="sixteen columns">
<form method="post" action="">
<span style='display: inline-block'>
<input type='text;' name="txtSearch;" style="width: 560px;" value="<?php echo $txtSearch; ?>"/>
</span>
<span style='display: inline-block'>
<select id='catergory' name='catergory' style="width: 120px;height:30px">
<option> Option 1</option>
<option> Option 2</option>
<option> Option 3</option>
</select>
</span>
<span style='display: inline-block'><input name="btSearch" type='submit' value='Search' class='button'/></span>
</form>
</div>
</div>
Related
I need to put the Search Button next to the Search Input, that is a list of options.
I've search and most of the answers say I need to use pull-left and pull-right classes but it is nor working in my case.
Here is the Codepen:
https://codepen.io/ogonzales/pen/rNNVOBr
Complete PageCode:
https://codepen.io/ogonzales/pen/rNNVOBr
CodePen using diplay:flex:
https://codepen.io/ogonzales/pen/ExxjVqa
Original HTML:
<div class="row margin-top3 margin-bottom5 ">
<form method="get" action="{% url 'shop:catalogo' %}">
<div style="display: inline;">
<div class="input-group pull-left">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Categorías</label>
<select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
<option value="todas" disabled selected>Seleccionar categoría</option>
<option value="todas">Todas</option>
<option value="celulares">Celulares</option>
<option value="programacion">Programación</option>
</select>
</div>
</div>
<div class="input-group-append pull-right">
<p><input class="btn btn-outline-secondary" type="submit" name="buscar" value="Buscar" /></p>
</div>
</div>
<!-- <p class="margin-top5">Ordenado por: <input class="disabled" type="text" value={{orderby}} name="orderby" /></p> -->
</form>
</div>
UPDATE:
Heigh is increased:
You don't need to use pull-left or pull-right. You have to simply put <div class="input-group-append"> inside <div class="input-group"> as it says in the official documentation.
<div class="row margin-top5 margin-bottom5 ">
<form method="get" action="{% url 'shop:catalogo' %}">
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Categorías</label>
</div>
<select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
<option value="todas" disabled selected>Seleccionar categoría</option>
<option value="todas">Todas</option>
<option value="celulares">Celulares</option>
<option value="programacion">Programación</option>
</select>
<div class="input-group-append">
<input class="btn btn-outline-secondary mb-0" type="submit" name="buscar" value="Buscar" />
</div>
</div>
</form>
</div>
It is better to use display:flex instead of float's because they are more predictable. In your case it will be something like this CodePen. I assumed that you are using Bootstrap 4.
On the other hand, you shouldn't put display:inline to wrap other elements because they are not meant to be a wrappers. You can find more here.
Consider using CSS grid, you're kind of reinventing the wheel here.
CSS
.container{
width: 200px;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
}
HTML
<div class="container">
<div class='label'>Select</div>
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<button>Search</button>
</div>
I try to add a checkbox after all my <select> dropdowns but in the same row / line. I have a really hard time doing so, I tried quite some time now and I can't get it to work on my own. The CSS comes from Bootstrap 3.
Here is how my Code and Form looks like:
<form role="form" id="newchar" name="newchar" method="POST" action="inc/insertchar.php">
<div class="row">
<div class="form-group col-sm-3">
<label for="charname">Charactername</label>
<a href="#" data-toggle="tooltip" data-placement="right" title="maximal 16 Zeichen - bestehend aus Zahlen und Buchstaben">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</a>
<input type="text" class="form-control" name="charname" id="charname" placeholder="Charactername" required="required" />
</div>
</div>
<div class="row">
<div class="form-group col-sm-3">
<label for="c1">Circles:</label>
<div class="form-group">
<select name="circle_1" id="c1" class="form-control circle-select">
<option value="">Circle 1</option>
<option value="class_1">Archer</option>
<option value="class_2">Cleric</option>
<option value="class_3">Swordsman</option>
<option value="class_4">Wizard</option>
</select>
</div>
<div class="form-group">
<select name="circle_2" id="c2" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 1 first</option>
</select>
</div>
<div class="form-group">
<select name="circle_3" id="c3" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 2 first</option>
</select>
</div>
<!-- and more ... -->
Full Code and Preview: https://jsfiddle.net/hd7fzp95/
You need to use form-inline class on your form.
http://www.bootply.com/WpiddtxsOh
In order to get my select list working as an input I have had to use <div class="input-group">, however it is not displaying that same way as my other <div class="form-group">'s.
Below is example code and a screen shot of the positional difference.
<div class="form-group">
<label class="col-md-3 control-label">Actual Start Date:</label>
<div class="col-md-8">
<input name="ActStartDate" type="date" class="form-control" id="ActStartDate" placeholder="Actual Start Date" value="<?php echo $_SESSION["AStDate"]; ?>">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Actual End Date:</label>
<div class="col-md-8">
<input name="ActEndDate" type="date" class="form-control" id="ActEndDate" placeholder="Actual End Date" value="<?php echo $_SESSION["AEnDate"]; ?>">
</div>
</div>
<div class="input-group">
<label class="col-md-3 control-label">Priority:</label>
<div class="col-md-8">
<select name="PPriority" class="selectpicker form-control" id="PPriority" data-live-search="true">
<optgroup>
<?php echo "<option value=" .$_SESSION["Priority"]. " selected disabled >" .$_SESSION["Priority"]. "</option>"?>
</optgroup>
<optgroup label="-----------">
<option>3</option>
<option>2</option>
<option>1</option>
</optgroup>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Priority:</label>
<div class="col-md-4">
<select name="PPriority" class="selectpicker form-control" id="PPriority" data-live-search="true">
<optgroup>
<?php echo "<option value=" .$_SESSION["Priority"]. " selected disabled >" .$_SESSION["Priority"]. "</option>"?>
</optgroup>
<optgroup label="-----------">
<option>3</option>
<option>2</option>
<option>1</option>
</optgroup>
</select>
</div>
</div>
just replace the div class with form-group it works fine
If you look in your bootstrap CSS, look for the input-group element, and remove the following css code: display: table;. It will work fine.
I have a form on a HTML document with this header
<form target="_blank" action="" id="form-find-your-program">
and I have an input button within it
<input type="submit" id="submit" class="readmore" value="Submit">
and then the closing tag after the input button:
</form>
The problem is that the form is not closing as I assume because I have another form after it, that is submitting with this one.
This is the complete code:
<div class="row">
<find_program_form_home>
<div class="custom form_colors_invert">
<form target="_blank" action="" id="form-find-your-program">
<div class="six columns noleftmargin">
<h5 class="sidebartitle">Find Your Program</h5>
</div>
<div class="four columns">
<select class="custom dropdown" id="findProgramSelectProgram" required="" title="Select a Program">
<option value="">Select a Program</option>
<option value="Undergraduate">Undergraduate</option>
<option value="Graduate">Graduate</option>
</select>
</div>
<div class="four columns">
<select class="custom dropdown" id="AreaOfStudyAll" required="" title="Area of Study">
<option value="">Area of Study</option>
<!--<option class="dd-undergraduate" disabled="disabled" value="">Undergraduate</option> -->
<option class="dd-undergraduate" value="something.html">something</option>
</select>
</div>
<div class="four columns">
<input type="submit" id="submit" class="readmore" value="Submit">
</div>
</form>
</find_program_form_home>
</div>
<div class="six columns noleftmargin">
<h5 class="sidebartitle">Online Course Catalog</h5>
<p>
Search our registration catalog to find upcoming online courses.
</p>
</div>
</div>
Any ideas why?
I'm having difficulty placing two and one text input in a single row in my form. I am able to get the two selects inline but the text input is being stubborn. Here is how it looks with the current code:
<form role='form' action='#' method='post'>
<div class='form-group'>
<label for='query-bar' class='sr-only'></label>
<input type='text' class='form-control' placeholder='Enter search query..' name='query-bar' />
</div>
<div class='form-inline'>
<div class='form-group'>
<select name='builder-columns' class='form-control'>
<option selected disabled value='none'>Columns</option>
<option></option>
</select>
</div>
<div class='form-group'>
<select name='builder-operators' class='form-control'>
<option selected disabled value='none'>Operators</option>
</select>
</div>
<div class='form-group'>
<label for='builder-filter' class='sr-only'></label>
<input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
</div>
</div>
</form>
You could use the following:
<div class='form-inline row'>
<div class='form-group col-sm-4'>
<select name='builder-columns' class='form-control'>
<option selected disabled value='none'>Columns</option>
</select>
</div>
<div class='form-group col-sm-4'>
<select name='builder-operators' class='form-control'>
<option selected disabled value='none'>Operators</option>
</select>
</div>
<div class='form-group col-sm-4'>
<label for='builder-filter' class='sr-only'></label>
<input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
</div>
</div>
.form-inline .form-control {
width: 100%;
}
The class row was added to the form-inline elements, and the class col-sm-4 was added to the form-group elements. In addition, the width of the .form-control elements was set to 100% in order to overwrite width: auto which is applied at certain screen sizes.
Example Here