I am trying to build a UI add-remove items component using two multi-select drop downs. fiddle here.
div {
float: left;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 30px;
background-color: #e4eaec;
}
div select {
width: 100%;
height: 400px;
overflow: scroll;
background-color: #fff;
}
div h4 {
text-align: center;
}
div.section-two-arrows {
border: none;
padding-top: 150px;
background-color: #fff;
text-align: center;
.fa {
font-size: 2.8em;
display: block;
padding-bottom: 5px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="add-remove-items-component">
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 section-one">
<h4>Available Functions</h4>
<select id="avail-functions" class="select-box-style" name="availFunc" multiple>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 section-two-arrows">
<span class="fa fa-angle-double-right" title="Add All items from Left to Right"></span>
<span class="fa fa-angle-right" title="Add selected items from Left to Right"></span>
<span class="fa fa-angle-left" title="Add All items from Right to Left"></span>
<span class="fa fa-angle-double-left" title="Add selected items from Right to Left"></span>
</div>
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 section-three">
<h4>Selected Functions</h4>
<select id="sel-functions" class="select-box-style" name="selFunc" multiple>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
</div>
</div>
This component works well in chrome, but not in IE.
The problem with IE is that the first select box does not work, but the second one works just fine.
If I remove the div wrapped to the select box, it works fine. But I cannot make it responsive and the alignment of the page will be disturbed.
Related
I have created the one registration application form. The form is working fine except for Iphone and Ipad when we select the dropdown and close. Change the orientation select element automatically opens.
I also tried the solutions which mention in stack overflow question id: iPad opens html select elements automatically
Please help me anyone and below and I'm sharing the code.
$('.form-control').on("orientationchange", function(e) {
e.preventDefault();
});
.form-input {
margin-bottom: 10px;
font-size: 16px;
font-family: 'SlatePro Bold';
color: #565656;
}
.form-input input {
border: 1px solid #2b5795;
font-family: 'SlatePro Regular';
width: 280px;
}
.enroll-form-input {
margin-bottom: 15px;
}
.enroll-form-input input[type=radio] {
width: 2%;
}
<div class="col-md-5 col-sm-12">
<div class="form-input enroll-form-input">
<label for="state">State</label>
<select class="form-control" id="state" name="state" placeholder="*Illinois" data-parsley-required="true" data-parsley-required-message="*State required">
<option value="" selected disabled>*Illinois</option>
<option value="1">State 1</option>
<option value="">State 2</option>
<option value="">State 3</option>
<option value="">State 4</option>
</select>
<!-- <div class="invalid-feedback invalid-state">
<div class="error-message">
<div class="error-icon"><img src="images/error-icon.png" alt="error-icon" /> </div>
<div class="error-content">*State required/div>
</div>
</div> -->
</div>
</div>
Auto opening of the select element on change of screen orientation in Ipad and iPhone with the below jquery code.
$(window).on("orientationchange", function() {
$('select.form-control').blur();
});
In a form four properties have to be set by the user. I chose a table like layout:
This layout, however, makes problems on smaller screens. In this case, I would like to have:
and on very small screens:
Any idea? I am using HTML5, CSS3, jQuery 3.3.1 and bootstrap 2.
If I understand it right, you intend use table to make your form stay in a good layout.
it's not recommended this way because you can't rearrange the cell in a table freely. Or should I say, don't use table to make a responsive layout.
Bootstrap grid system is responsive by default so you should make use of it.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
In your case, you can put your element in four div tag like this
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your first element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your second element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your third element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your fourth element -->
</div>
</div>
</div>
I solved my problem with flexbox:
Here my CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-container > div {
margin: 1px;
}
.flex-container > .label {
padding-left: 8px;
width: 20%;
min-width: 100px;
}
.flex-container > .value {
vertical-align: middle;
}
.line-break {
width: 100%;
}
.cond-line-break {
width: 100%;
display: none;
}
#media screen and (max-width: 720px) {
.cond-line-break {
display: inline;
}
}
#media screen and (max-width: 360px) {
.cond-line-break {
display: inline;
}
.flex-container > .label {
width: 100%;
}
}
and my HTML:
<div class="flex-container">
<div class="label">Property 1:</div>
<div class="value">
<select>
<option selected="selected">Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="cond-line-break"></div>
<div class="label">Enter Property 2 here:</div>
<div class="value">
<select>
<option>Value 1</option>
<option selected="selected">Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="line-break"></div>
<div class="label">Property 3:</div>
<div class="value">
<select>
<option>Value 1</option>
<option>Value 2</option>
<option selected="selected">Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="cond-line-break"></div>
<div class="label">Property 4:</div>
<div class="value">
<select>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option selected="selected">Value 4</option>
</select>
</div>
</div>
It works as intended, even with labels of different length.
I want to increase the width of select box arrow like fa fa caret. i am not getting it how to do. I used img tag inside the each field and given position absolute and adjusted with left top properties but i think this is not proper way of doing this and even i click on the image arrow not select options are opening so i removed this. Please tell me proper solution for it.
.search-categories{
background: #E40444 !important;
color: #fff !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12 ">
<div class="row">
<form action="#" method="get" id="search_mini_form">
<div class="col-sm-offset-2 col-sm-2 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-2 catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-4 catquery ">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
<div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
</div>
</div>
You can use the css triangle to make the arrow.
HTML
<div class="selectwrap">
<select>
<option>Option 1</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
CSS
select {
border: 1px solid #ccc;
height: 34px;
width: 250px;
padding: 6px 12px;
line-height: 1.42857143;
}
.selectwrap {
position: relative;
float: left;
}
.selectwrap:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000;
right: 4px;
top: 14px;
pointer-events: none;
}
It's very complicated to style form elements cross-browser because very browser has different look for form elements (especially checkbox, radio, select, progress).
I suggest using some plugin like select2 so you can easily style very element browser-independent.
$(document).ready(function() {
$('select').select2({
width: '200px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.3/select2.css" rel="stylesheet" />
<script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
<select>
<option>Op 1</option>
<option>Op 2</option>
<option>Op 3</option>
<option>Op 4</option>
</select>
better use some select element customisation plugin like select2, selectize. The appearance that these plugins create can be customised through css.
You cannot fully control the appearance of select element in cross browser manner with css alone.
I'm trying to make my dropdownlists I have created to be on the same line under 768px.
Right now, I'm using the form-inline, but that only works over 768px and not under.
Can any tell me how this can be done? Have tried with a list, but that did not work well.
As you can see in the fiddle, I want some text over each dropdownlist. I know i'm not using an label, cause this makes
My Jsfiddle
<div class="col-xs-12">
<div class="form-inline">
<div class="form-group">
Adult<br />
<select class="dropdown" id="Dropdown-adult">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
Child (3-15)<br />
<select class="dropdown" id="Dropdown-child">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Infant (0-3)<br />
<select class="dropdown" id="Dropdown-infant">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Pet<br />
<select class="dropdown" id="Dropdown-pet">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="padding-top15">
<button type="submit" class="bookingbutton">BOOK NOW</button>
</div>
</div>
</div>
Hope someone can tell me what I should look at.
Updated:
I think you guys have misunderstood what I was trying to tell. Right now when viewing the page over 768px the dropdownlists are inline as they should be.
If the webpage goes under 768px, all the dropdownlists going out of the inline, which it should not do. I just want to use 2 lines instead of 5-8
I just want it to look the same as it does over 768px. I have uploaded the image of how it should look like under 768px.
It's because Bootstrap add classes to make a responsive grid. If you want your lists to be always on the same line just add this in you css:
.form-group{
display:inline-block
}
JS Fiddle: https://jsfiddle.net/f8gfa768/1/
If I understood you correctly, you want to achieve under 768px width:
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
Those br tags are messing up your styles. Why don't you remove them, and add display: block/inline-block styles to select element, depending on the window width, which will replace that br:
select{
display: inline-block;
}
#media (min-width: 768px){
select{
display: block;
}
}
#Dropdown-adult {
height: 30px;
font-size: 15px;
width: 45px;
}
#Dropdown-child {
height: 30px;
font-size: 15px;
width: 80px;
}
#Dropdown-infant {
height: 30px;
font-size: 15px;
width: 80px;
}
#Dropdown-pet {
height: 30px;
font-size: 15px;
width: 45px;
}
#Dropdown-vehicles {
max-width: 100%;
height: 30px;
width: 100%;
font-size: 15px;
}
.bookingbutton {
background-color: #F6861F;
border-style: none;
height: 30px;
width: 110px;
color: white;
font-size: 15px;
text-align: center;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
}
.padding-top15 {
padding-top: 15px;
}
select{
display: inline-block;
}
#media (min-width: 768px){
select{
display: block;
}
}
<div class="col-xs-12">
<div class="form-inline">
<div class="form-group">
Adult
<select class="dropdown" id="Dropdown-adult">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
Child (3-15)
<select class="dropdown" id="Dropdown-child">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Infant (0-3)
<select class="dropdown" id="Dropdown-infant">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Pet
<select class="dropdown" id="Dropdown-pet">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="padding-top15">
<button type="submit" class="bookingbutton">BOOK NOW</button>
</div>
</div>
</div>
JSFiddle
Here's my code:
<div class="row">
<div class="col-md-12 table">
<div class="middle">Title XPTO</div>
<div class="middle">Display:</div>
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
CSS:
.table {
display: table !important;
}
.middle {
display: table-cell !important;
vertical-align: middle;
}
DEMO: https://jsfiddle.net/jkf2L49e/
I want to put the text "Display:" nearest to the select element. And the select must be right (position) as possible. What is the best way to do this and make it responsive?
You should also make the <select> part of the table layout too, so just wrap it with another <div>. The markup would be like this:
<div class="col-md-12 table">
<div class="left">Title XPTO</div>
<div class="middle">Display:</div>
<div class="right">
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
To align the text to the right, you can simply use text-align:right in the middle cell. The CSS would be like this (with tweaks that asked in the comments below).
.table {
display: table;
}
.table > div {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
.table .middle {
text-align: right;
width: 100%;
}
.table select {
width: auto;
}
Updated demo - https://jsfiddle.net/jkf2L49e/4/
Try this complete code:
.table {
display: table !important;
}
.middle {
display: table-cell !important;
vertical-align: middle;
}
.text-right{
text-align:right;
}
Now add this class to the div that contains the text "Display"
<div class="row">
<div class="col-md-12 table">
<div class="middle">Title XPTO</div>
<div class="middle text-right">Display:</div>
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
Try following complete code. It would be best solutions.
<html>
.wrapper
{
width:100%;
}
.leftdiv{
width: 90%;
float:left;
}
.rightdiv{
width:8%;
float:right;
}
Title XPTO
<div class="rightdiv">Display:
<select>
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
Mark answer as right answer if helpful to you.