HTML Input gets cropped trough content on mobile

HTML Input gets cropped trough content on mobile - javascript

I have a problem. I created the following topbar:
#topBar {
height: 30px;
margin-top: 10px;
}
#comboBoxAgent {
width: 400px;
height: 100%;
}
#comboBoxCoin1 {
min-width: 60px;
height: 100%;
}
#comboBoxCoin2 {
min-width: 60px;
height: 100%;
}
#btnToggleAgent {
float: right;
height: 100%;
min-width: 60px;
width: 70px;
border-radius: 10px;
font-size: 18px;
color: white;
}
#toggleSwitch {
height: 100%;
display: inline-block;
}
#txtStartDateTime {
margin-left: 10px;
}
.simulator-progress {
font-weight: bold;
}
#media only screen and (max-width: 1100px) {
#comboBoxCoin2 {
display: none;
}
}
#maxOrders {
padding: 5px 0px;
}
.txtOrderRadioBtn {
padding: 0px;
margin: 0px;
display: inline-block;
}
#maxOrdersBtn {
padding: 0px;
margin: 0px;
display: inline-block;
}
<div id="topBar">
<select id="comboBoxAgent" onchange="changeAgent()"></select>
<select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<div id="toggleSwitch">
<div class="radio-group">
<input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
<input type="radio" id="environmentSim" name="environment" value="Simulator"><label for="option-two">Sim</label>
</div>
</div>
<div id="simulatorControls" style="display: none;">
<input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
<button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
<label id="txtSimulatorProgress" class="simulator-progress"></label>
</div>
<button id="btnToggleAgent" onClick="toggleAgent()"></button>
</div>
<div id="maxOrders">
<label class="txtOrderRadioBtn">Max visible orders</label>
<form id="maxOrdersBtn">
<label class="radio-inline">
<input type="radio" value="50" name="maxOrderOption" checked>50
</label>
<label class="radio-inline">
<input type="radio" value="100" name="maxOrderOption">100
</label>
<label class="radio-inline">
<input type="radio" value="250" name="maxOrderOption">250
</label>
<label class="radio-inline">
<input type="radio" value="All" name="maxOrderOption">All
</label>
</form>
</div>
The snippet isn't working properly, but I think thats just because its a snippet. The point is, that when I click on the radio button "Sim" the input field with the datetime shows up. Now this works properly on desktop, but on my mobile device the input field goes trough the maxOrders div. Here is an image of the mobile result:
Now how can I fix this using media queries. There are a few things that are important for the solution. The <button id="btnToggleAgent" onClick="toggleAgent()"></button> has to stay in the top right corner and the maxOrders needs to be below the simulator datetime input field on mobile. Please let me know how I can fix this!

I would do two things: Eliminate as many hard-coded widths as you can. The modern web should be flexible. Eliminate floats. They're a pain, and there are better ways (such as flexbox).
Other tips:
Use styling classes instead of IDs. This makes them reusable and forces you to consider how to simplify.
Apply padding and spacing globally, rather than in one-offs. Use generic classes or a small library.
#topBar {
height: 30px;
margin-top: 10px;
display: flex;
align-items: stretch;
}
#comboBoxAgent {
flex: auto;
}
.comboBoxCoin1 {
min-width: 60px;
}
#btnToggleAgent {
min-width: 60px;
width: 70px;
border-radius: 10px;
font-size: 18px;
color: white;
}
.simulator-progress {
font-weight: bold;
}
#media only screen and (max-width: 1100px) {
#comboBoxCoin2 {
display: none;
}
}
#maxOrders {
padding: 5px 0px;
}
.txtOrderRadioBtn {
padding: 0px;
margin: 0px;
}
#maxOrdersBtn {
padding: 0px;
margin: 0px;
}
<div id="topBar">
<select id="comboBoxAgent" onchange="changeAgent()"></select>
<select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<div id="toggleSwitch">
<div class="radio-group">
<input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
<input type="radio" id="environmentSim" name="environment" value="Simulator"> <label for="option-two">Sim</label>
</div>
</div>
<div id="simulatorControls" style="display: none;">
<input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
<button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
<label id="txtSimulatorProgress" class="simulator-progress"></label>
</div>
<button id="btnToggleAgent" onClick="toggleAgent()"></button>
</div>
<div id="maxOrders">
<label class="txtOrderRadioBtn">Max visible orders</label>
<form id="maxOrdersBtn">
<label class="radio-inline">
<input type="radio" value="50" name="maxOrderOption" checked>50
</label>
<label class="radio-inline">
<input type="radio" value="100" name="maxOrderOption">100
</label>
<label class="radio-inline">
<input type="radio" value="250" name="maxOrderOption">250
</label>
<label class="radio-inline">
<input type="radio" value="All" name="maxOrderOption">All
</label>
</form>
</div>

Related

Use only one checkbox from two

I have a form that has two checkboxes, now you can click the checkbox on both
The question is, is it possible to make it so that there is only one choice? For example, clicked on the first one, it turned on, clicked on the second one, the first turned off, the second turned on. It should also be possible to uncheck the box at any time. I know that I can use the radio type, but I need only checkboxes
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>

The script would loo something like this. I didn't test this so there might be misspellings causing errors and such.
// get first checkbox element
let box1 = document.getElementByID( "check1" );
// get second checkbox element
let box2 = document.getElementByID( "check2" );
// add events that fires when boxes are checked
box1.addEventListener( "change", function() {
// see if the other box is already checked
if ( box2.checked ) {
// if so, uncheck it
box2.checked = false;
}
});
box2.addEventListener( "change", function() {
if ( box1.checked ) {
box1.checked = false;
}
});
But you can also just use radio buttons and invoke a hidden reset button when you click a checked radio button I think.

Here is another version that will work with any number of checkboxes.
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
inps.forEach(c=>{if(c!==e) c.checked=false})
}))
.call-form-item {
padding-bottom: 12px;
margin-bottom: 24px;
margin-left: 50px;
margin-right: 50px;
}
input {
margin: 0;
box-sizing: border-box;
outline: none;
border: none;
background-color: #EEF0F7;
margin-right: 10px;
}
.input-wrapper {
display: flex;
align-items: flex-start;
}
label {
color: #808694;
font-family: Montserrat;
font-size: 10px;
font-weight: bold;
letter-spacing: 0;
line-height: 16px;
text-transform: uppercase;
margin-right: 10px;
}
input[type=checkbox]:focus {
outline: rgba(0, 0, 0, 0.2);
}
input[type=checkbox] {
background-color: #EEF0F7;
border-radius: 2px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 17px;
height: 17px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked {
background-color: #808694;
background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}
<div class="contacts-call-form">
<form class="js-form" action="{{ route('send-contacts-call') }}">
<div class="col-md-6">
<div class="call-form-item">
<label for="name">Name *</label>
<div class="input-wrapper">
<input class="js-form-call-name" id="name" type="text" name="name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<label for="email">Email *</label>
<div class="input-wrapper">
<input class="js-form-call-email" id="email" type="email" name="email">
</div>
</div>
</div>
<div class="col-md-6">
<div class="call-form-item">
<div class="input-wrapper">
<input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
<input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
</div>
</div>
</div>
</form>
</div>
And here is an alternative, using radio buttons:
const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
e.checked=e!==inps.last;
inps.last=e.checked?e:null
}))
<div class="input-wrapper">
<label><input name="radio" value="1" type="radio">Check 1</label>
<label><input name="radio" value="2" type="radio">Check 2</label>
<label><input name="radio" value="3" type="radio">Check 3</label>
</div>

Alternate solution:
HTML:
<section>
<label><input type="checkbox" value="CBox 1"> CBox 1</label>
<label><input type="checkbox" value="CBox 2"> CBox 2</label>
<label><input type="checkbox" value="CBox 3"> CBox 3</label>
<label><input type="checkbox" value="CBox 4"> CBox 4</label>
<label><input type="checkbox" value="CBox 5"> CBox 5</label>
</section>
<p> Checkbox acts like a radio button, but can be reset </p>
Javascript:
const sel = document.querySelectorAll('section input[type="checkbox"]');
for (el of sel) {
el.addEventListener('click',
function(e) { sel.forEach( (x) => { if (e.currentTarget != x) x.checked = false; } ); }
);
};

You can use JavaScript / jQuery for it. If check1 is active, just disable check2.
See change event and disabled

CSS missbehavior? on :hover using ~

I have created a custom drop-down list and when I hover over the p tag(header) and the first label(option) I get expected behavior, but when I try to move my cursor to the next label the entire section closes; why is the hover not maintained? (If I move my mouse very slowly px by px I get the expected behavior)
Javascript, CSS & HTML
const ddlContainers = document.getElementsByClassName('ddlContainer');
for (let ddlContainer of ddlContainers) {
const ddlButton = ddlContainer.children[1];//ddlContainer.getElementsByTagName('button')[0];
//const ddlSelect = ddlContainer.children[2]; //ddlContainer.getElementsByTagName('div')[0];
const ddlOptions = ddlContainer.children[2].getElementsByTagName('label'); //ddlSelect.getElementsByTagName('label'); // document.querySelectorAll("#test > label");
const selectLabel = ddlButton.children[0];
ddlButton.addEventListener('click', function (e) {
e.preventDefault();
e.target.nextElementSibling.classList.toggle('ddlHidden');
})
function toggleHidden(e) {
e.target.parentNode.classList.toggle('ddlHidden');
}
for (let option of ddlOptions) {
option.addEventListener('click', function (e) {
setSelectTitle(e);
})
}
function setSelectTitle(e) {
selectLabel.innerText = e.target.innerText
toggleHidden(e);
}
}
.ddlContainer {
position: relative;
width: 100%;
font-size: 1em;
}
.ddlButton {
display: flex;
justify-content: space-between;
padding: 0.3em 0.6em 0.3em 0.8em;
width: 100%;
background: #fff;
}
.arrow {
border: solid black;
font-size: 0.9em;
border-width: 0 2px 2px 0;
padding: 0.2em;
margin: 0 0.2em;
height: 0;
width: 0;
align-self: center;
transform: rotate(45deg)
}
.ddl {
position: absolute;
z-index: 1;
display: flex;
width: 100%;
flex-direction: column;
border: 2px solid #00000088;
background: #eee;
}
.ddl input[type="radio"] {
display: none;
}
.ddl > * {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0.4em 1em;
z-index: 2;
}
.ddl > label{
font-size: 0.9em;
background: #fff;
cursor: pointer;
/*Hides the label*/
height: 0;
padding: 0;
visibility: hidden;
transition: color 0.1s ease, padding ease 0.1s;
color: #ffffffff;
}
.ddl > p:hover ~ label { /* Displays all labels */
height: auto;
padding: 0.5em 1.5em;
color: #000000;
visibility: visible;
}
.ddl > p:hover ~ p ~ label { /* Removes the display for all the following sets of labels */
height: 0;
padding: 0;
color: #ffffffff;
visibility: hidden;
}
.ddl > label:hover ~ label { /* Kepps display for all following labels */
height: auto;
padding: 0.5em 1.5em;
color: #000000;
visibility: visible;
}
.ddl > label:hover ~ p ~ label { /* Removes display for all the following sets of labels */
height: 0;
padding: 0;
color: #ffffffff;
visibility: hidden;
}
.ddl > label:hover { /* Keeps display of current label when leaving p-tag */
height: auto;
padding: 0.5em 1.5em;
color: #000000;
visibility: visible;
}
.ddl > label:hover{
background: #d3d9f0;
}
.ddlHidden {
display: none;
}
<div id="test1" class="ddlContainer form-group">
<label for="test1Btn">Option list 1:</label>
<button id="test1Btn" class="ddlButton">
<span>- Chose Option -</span>
<span class="arrow"></span>
</button>
<div class="ddl ddlHidden">
<p>Item type 1<span class="arrow"></span></p>
<label for="test1-0">Item 1.1</label>
<input id="test1-0" value="42" type="radio" name="testOvelse1opt" />
<label for="test1-1">Item 1.2</label>
<input id="test1-1" value="16" type="radio" name="testOvelse1opt" />
<label for="test1-2">Item 1.3</label>
<input id="test1-2" value="17" type="radio" name="testOvelse1opt" />
<label for="test1-3">Item 1.3</label>
<input id="test1-3" value="2" type="radio" name="testOvelse1opt" />
<p>Item type 2<span class="arrow"></span></p>
<label for="test1-4">Item 2.1</label>
<input id="test1-4" value="42" type="radio" name="testOvelse1opt" />
<label for="test1-5">Item 2.2</label>
<input id="test1-5" value="16" type="radio" name="testOvelse1opt" />
<p>Item type 3<span class="arrow"></span></p>
<label for="test1-6">Item 3.1</label>
<input id="test1-6" value="42" type="radio" name="testOvelse1opt" />
<label for="test1-7">Item 3.2</label>
<input id="test1-7" value="16" type="radio" name="testOvelse1opt" />
<label for="test1-8">Item 3.3</label>
<input id="test1-8" value="17" type="radio" name="testOvelse1opt" />
</div>
</div>
<br />
<div id="test2" class="ddlContainer form-group">
<label for="test2Btn2">Option list 2:</label>
<button id="test2Btn2" class="ddlButton">
<span>- Chose Option -</span>
<span class="arrow"></span>
</button>
<div class="ddl ddlHidden">
<p>Item type 1<span class="arrow"></span></p>
<label for="test2-0">Item 1.1</label>
<input id="test2-0" value="42" type="radio" name="testOvelse1opt" />
<label for="test2-1">Item 1.2</label>
<input id="test2-1" value="16" type="radio" name="testOvelse1opt" />
<label for="test2-2">Item 1.3</label>
<input id="test2-2" value="17" type="radio" name="testOvelse1opt" />
<label for="test2-3">Item 1.3</label>
<input id="test2-3" value="2" type="radio" name="testOvelse1opt" />
<p>Item type 2<span class="arrow"></span></p>
<label for="test2-4">Item 2.1</label>
<input id="test2-4" value="42" type="radio" name="testOvelse1opt" />
<label for="test2-5">Item 2.2</label>
<input id="test2-5" value="16" type="radio" name="testOvelse1opt" />
<p>Item type 3<span class="arrow"></span></p>
<label for="test2-6">Item 3.1</label>
<input id="test2-6" value="42" type="radio" name="testOvelse1opt" />
<label for="test2-7">Item 3.2</label>
<input id="test2-7" value="16" type="radio" name="testOvelse1opt" />
<label for="test2-8">Item 3.3</label>
<input id="test2-8" value="17" type="radio" name="testOvelse1opt" />
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
NOTE: As I am generating the HTML with RazorEngine changing the HTML layout would be difficult.

{display:none} not working with checkbox?

When "same as shipping address" is checked, the form below that section is supposed to disappear. I put {display:none} but it doesn't work. It worked when I got rid of {div class="checkboxalign} but then it is no longer aligned in the center. I was wondering how to get this function to work, but still keep it center aligned? Thank you.
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.checkbox-custom:checked ~.input-box {
display: none;
}
.checkboxalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
margin-bottom: 10px;
}
.radioalign {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
}
<form class="form2">
<div class="h6centeralign"><h6 class="h6style">Billing Address</h6></div>
<div class="checkboxalign">
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form3">
<div class="h6centeralign"><h6 class="h6style">Shipping Method</h6></div>
<div class="radioalign">
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
<label for="radio-1" class="radio-custom-label">Free Delivery (3-5 Days)<strong> $0.00</strong></label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Standard Delivery (2-3 Days)<strong> $5.99</strong></label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Next Day Delivery<strong> $12.99</strong></label>
</div>
</div>
</form>

Because .input-box Elements are not siblings of the checkbox. And your selector is
.checkbox-custom:checked ~.input-box {
display: none;
}

There must be wrapper div to form elements which you want to hide then your css will work.

How to select radio when label has active class

I'm making a website where you can select a couple of options to create your own boat. I need to select radio buttons that are hidden behind a label, so in order to select them I'm writing some JS that does that exact thing.
Here is a small amount of code that contains the particular problem (this code is used in the whole website).
<div class="row specs">
<div class="subtitle">Hull Colour</div>
<div class="fourcol">
<label class="item" id="white">
<img src="images/8meter-outboard.jpg">
<div class="price">Orange</div>
<input class="form-input" data-color="white" name="color" type="radio" value="white" id="white_radio" />
</label>
</div>
<div class="fourcol">
<label class="item" id="Test">
<img src="images/8meter-outboard.jpg">
<div class="price">Grey</div>
<input data-color="grey" name="color" type="radio" value="Test">
</label>
</div>
<div class="fourcol last">
<label class="item" id="orange">
<img src="images/8meter-outboard.jpg">
<div class="price">White</div>
<input data-color="orange" name="color" type="radio" value="orange">
</label>
</div>
</div>
the JS:
$('.item').on('click', function(e){
e.preventDefault();
$(this).toggleClass('done');
document.getElementById('this').checked = true;
});
Without my Javascript, this markup seems to work. I want to put the display of the <input> on none at the end

You can utilize native HTML to achieve what you are trying to do. As Josh Sanger mentioned, when the for attribute is assigned to a label, a hook into the input for that label is instantiated automatically. As long as the targeted input has a match id attribute it will be linked. Once that hook has been made, you can use some basic jQuery selector mechanics to add classes to the HTML elements that you want appear differently.
Make certain that the input tag for the label is within the label so that bound click events will properly trigger it.
$('input[type="radio"]').on('click', function(e) {
var colorDiv = $(this).closest($('div.fourcol')).find($('.price'));
var removeSelected = $('div.fourcol').find($('.price').not($(this)));
$(removeSelected).removeClass('done');
$(colorDiv).addClass('done');
});
.orange,
.gray,
.white {
width: 48px;
height: 48px;
font-size: .79em;
text-align: center;
}
.orange {
background-color: orange;
border: solid 1px orange;
}
.gray {
background-color: #CCC;
border: solid 1px #CCC;
}
.white {
background-color: #FFF;
border: solid 1px #FFF;
}
input {
float: left;
display: inline-block;
clear: none;
}
.row.specs {
width: 250px;
}
.price.noColor {
border: solid 1px #ACE;
}
.noColor {
width: 48px;
height: 48px;
text-align: center;
font-family: arial;
font-size: 35px;
color: red;
}
.fourcol {
display: inline-block;
vertical-align: top;
font-family: arial;
}
.done {
border: dashed 1px green;
}
.price.noColor.done {
border: dashed 1px green;
}
body{
background-color: #DDE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row specs">
<div class="subtitle">Hull Colour</div>
<div class="fourcol">
<label class="item" for="orange_radio">
<div class="price orange">Orange</div>
</label>
<input data-color="orange" name="color" type="radio" value="orange" id="orange_radio" />
</div>
<div class="fourcol">
<label class="item" for="grey_radio">
<div class="price gray">Grey</div>
</label>
<input data-color="grey" name="color" type="radio" value="gray" id="grey_radio" />
</div>
<div class="fourcol">
<label class="item" for="white_radio">
<div class="price white">White</div>
</label>
<input data-color="white" name="color" type="radio" value="white" id="white_radio" />
</div>
<div class="fourcol">
<label class="item" for="noColor_radio">
<div class="price noColor">X</div>
</label>
<input data-color="nocolor" name="color" type="radio" value="nocolor" id="noColor_radio" />
</div>
</div>

Align elements according to chosen select box

I use Twitter Bootstrap 2.3.2 and chosen plugin for select boxes. I would like to ask how can i align other elements according to box with selected items.
In this screenshot you can see two select boxes and content(elements) under select boxes.
When I select some items, the box overlaps header "Source" and items under the box. I would like to align elements down when some options are selected and align items up (back) when the options are deselected.
jsfiddle
html
<div id="filter">
<div id="personFilter" class="form-group">
<h4> Person filter </h4>
<div id="personFilterContain">
<h5> Contain </h5>
<select data-placeholder= "address"
name="personContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">rogelio.francis#gmail.com</option><option value="3">meredith.sullivan#gmail.com</option><option value="4">essie.castro#gmail.com</option><option value="5">arnold.clayton#gmail.com</option><option value="6">eugene.jefferson#gmail.com</option><option value="7">ora.gibbs#gmail.com</option><option value="8">katherine.frank#gmail.com</option><option value="9">preston.goodwin#gmail.com</option><option value="10">edna.burke#gmail.com</option></select>
</div>
<div id="personFilterNotContain">
<h5> Dont contain </h5>
<select data-placeholder="address"
tabindex="4" name="personNotContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">rogelio.francis#gmail.com</option><option value="3">meredith.sullivan#gmail.com</option><option value="4">essie.castro#gmail.com</option><option value="5">arnold.clayton#gmail.com</option><option value="6">eugene.jefferson#gmail.com</option><option value="7">ora.gibbs#gmail.com</option><option value="8">katherine.frank#gmail.com</option><option value="9">preston.goodwin#gmail.com</option><option value="10">edna.burke#gmail.com</option></select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="personCheckBox"> Apply
</label>
</div>
</div>
<!-- ********************* Source Filter ********************* -->
<div id="sourceFilter" class="form-group">
<h4> Source </h4>
<div id="sourceFilterSource">
<label class="checkbox inline">
<input type="checkbox" name="sourceMailCheckBox"> Mail
</label>
<label class="checkbox inline">
<input type="checkbox" name="sourcePhoneCheckBox"> Phone
</label>
<label class="checkbox inline">
<input type="checkbox" name="sourceDiscussionCheckBox"> Discussion
</label>
</div>
</div>
<script>
$(document).ready(function () {
$('select[name=personNotContainSelect]', this).chosen();
$('select[name=personContainSelect]', this).chosen();
});
</script>
css
#filter{
text-align: center;
}
#filter, #details{
overflow: auto;
}
#filter h4{
text-align: left;
}
#personFilter, #sourceFilter{
width: 535px;
height: 200px;
margin: 0 auto;
display: inline-block;
}
#personFilter{
height: 100px;
margin-top: 27px;
display: inline-block;
}
#personFilter h5{
max-width: 200px;
padding-left: 1px;
text-align: left;
margin-bottom: 5px;
}
#personFilter select{
width: 250px;
}
#personFilter div{
display: inline-block;
}
#personFilterContain{
max-width: 400px;
float:left;
}
#personFilterNotContain{
max-width: 400px;
float: left;
margin-left: 30px;
}
#personFilter label:last-child{
width: 0;
}
#personFilter .chosen-container{
top:-30px;
}
#personFilter .checkbox{
width: 300px;
float: left;
margin-top: -10px;
}
#sourceFilter {
text-align: left;
margin-top: 21px;
position: relative;
}
#sourceFilterSource{
margin-top: 15px;
}

set ID attr for select (e.g. test):
<select id="test" data-placeholder= "address"...
...
</select>
add change event. pay attention on #test_chosen, similar ID att from <select>. suffix _chosen added by plugin.
$('select[name=personContainSelect]', this).chosen().change(function(){
var h=$('#test_chosen').height()
h+=56;//init height of chosen
$('#personFilter').height(h)
});
SOLUTION 2: CSS
#personFilter{
height: auto;
}

Develop Reference

JavaScript is the programming language of the Web.

HTML Input gets cropped trough content on mobile - javascript

Related

Use only one checkbox from two

CSS missbehavior? on :hover using ~

{display:none} not working with checkbox?

How to select radio when label has active class

Align elements according to chosen select box

Categories

Resources