How to style drop downs of drop down select boxes?
I have created a jsfiddle http://jsfiddle.net/CGDhB/
<div class="container">
<div class="salmatWrapper">
<div class="col-sm-12 contents">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
<div class="form">
<form class="form-horizontal">
<fieldset>
<div class="col-xs-6 left">
<!-- Enter Value-->
<div class="form-group">
<div class="col-xs-12">
<input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
</div>
</div>
<!-- Convert From -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom2" name="custom2" class="form-control">
<option value="" class="selectDefaultText">Convert From</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Convert To -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom3" name="custom3" class="form-control">
<option value="" class="selectDefaultText">Convert To</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 right">
<!-- Textarea -->
<div class="form-group">
<div class="col-xs-12">
<textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-sm-12">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
</div>
</div>
</div>
</div>
I want the drop downs to look as in below image
Basically I want that little icon and the drop down select boxes to look as that. I am confused with this. A staging link may be viewed from here http://bit.ly/1eNm3jv
You really can't style select. The only thing you can really do is border color and padding as far as I know. Probably font size as well. Like #setek mentioned, gonna have to use some kind of plugin.
Related
<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" selected="selected">App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<select id = "app or not" class="form_input_box">
<option value="" selected="selected" hidden>App Type</option>
<option value="" selected>App Type</option>
<option value="1">App</option>
<option value="2">Not a App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;">
<select id = "dept" class="form_input_box">
<option value="" selected="selected">Department</option>
</select>
</div>
<div class="col-sm-1" style="margin-left: -25px;width: 12%;">
<input type="text" name="date_box" id="date_box" class="form_input_box filter_date" Placeholder="Created Date">
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<input type="text" name="search" id="search" class="form_input_box" Placeholder="Search">
</div>
<div class="col-sm-1" style="margin-left: -25px;">
<button id="erase" class="form-control btn btn-primary" name="erase">Clear values</button>
</div>
<div class="row">
<div class="col-sm-1">
<input type="month" id="month" name="month" class="form_input_box" placeholder="Month">
</div>
<div class="col-sm-2" style="right: 30px">
<button type="button" name="report" id="file" class="button">Report file</button>
</div>
</div>
</div>
</div>
i have html page with buttons drop downs like above i need to set a single button when i click on the button it will show all these things if i again click then these need to be hided how can i achieve this.
To solve the problem simply you could use javascript or jquery and hide or show the options based on the selected values...
$('idoption').hide();
$('idoption').show();
Wrote html code that changes the color of the page when selected from a drop down menu. In this assignment I must fix the "color" label so that when I click on it it brings up the selection of colors. I can't seem to find a way to accomplish this. I've tried to maybe wrap the the label tags in other tags but none seem to work.
function changeColor() {
const color = document.getElementById("colors").value;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4" >Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>
function changeColor() {
var e = document.getElementById("colors");
var color = e.options[e.selectedIndex].text;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4">Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>
I am making a calculator for our company but we are running into a problem.
We are dealing with certain widths. I have that under control.
For example, a width of 100 must be rounded to 98.4 by a certain formula, that has all been achieved!
Now that 98.4 must be used after choosing an option.
For example, that 98.4 must be divided by 12.3 when option
<option id = "222"> 20 cm, hooks overlap 2 </option>
is chosen. And so on with all options.
This is what we have got, please help.
If you need to see for real;
http://calculator.verfuurden.com/
<button class="open-button" onclick="openForm()">Strokencalculator</button>
<div class="form-popup" id="myForm">
<div class="calc-container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-sm-12 col-md-12">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<strong class="logo">
<img src="/img/logo_enkel_lisoflex_logo.jpg" width="270" height="auto">
</strong>
<div class="form-group">
<label for="breedte" class="text-info">Width in cm</label><br>
<input type="text" name="breedte" id="firstNumber" class="form-control">
</div>
<div class="form-group">
<label for="breedte" class="text-info">the exacte width will be;</label><br>
<label class="form-control" id="result"></label>
</div>
<div class="form-group">
<label for="strookmaat" class="text-info">Required strip size and overlap:</label><br>
<select class="form-control select2">
<option id="102">10cm, hooks overlap 0</option>
<option id="212">20cm, hooks overlap 1</option>
<option id="222">20cm, hooks overlap 2</option>
<hr>
<option id="313">30cm, hooks overlap 1</option>
<option id="333">30cm, hooks overlap 3</option>
<hr>
<option id="414">40cm, hooks overlap 1</option>
<option id="424">40cm, hooks overlap 2</option>
<option id="434">40cm, hooks overlap 3</option>
<option id="444">40cm, hooks overlap 4</option>
</select>
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" onClick="divideBy()" Value="Calculate" /><br><br>
<label for="aantal" class="text-info">Needed number of strips;</label> <strong><span id="result2"></span></strong>
</div>
</form>
<button type="button" class="btn cancel" onclick="closeForm()">Close calculator</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function divideBy() {
var num1 = document.getElementById("firstNumber").value;
document.getElementById("result").innerHTML = Math.round(Math.floor(num1 / 4.1) * 4.1 * 10) / 10;
}
</script>
I want to add the following div structure whenever the '+' button [the addMore() function] is clicked. Although i am able to add the div structure, but the alignment of the input text are not equal as compared to the hard coded.
html file:
<form class="align-center">
<p class="6u 12u$(medium)">
Start Date: <input type="date" name="startdate" id="startdate" />
End Date: <input type="date" name="enddate" id="enddate" />
</p>
<p>
<div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
</p>
<p>
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<div>OR</div>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Venue" />
</div>
</div>
</div>
</p>
<p>
<div class="row" id="newProg">
</div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
</div>
</div>
<div class="2u 12u$(medium); image right">
Submit
</div>
</p>
</form>
main.js
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.setAttribute('class', 'row');
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
document.getElementById('newProg').appendChild(objNewDiv);
}
Result when page is loaded:
when page loaded
Actual and Expected result:
actual and expected outcome
You have differenc in the class names of the div tags which you are appending in jquery.
Make it same as the Static HTML content, And the expected result will be achieved.
Differences I see is as below.
Static HTML has - <div class="3u 12u$(medium)"> ,Your Jquery HTML has - <div class="5u 12u$(medium)">
Static HTML has - <div class="3u 12u$(medium)">, Your jquery HTML has - <div class="5u 12u$(medium)">
Static HTml has - <div class="2u$ 12u$(medium)">, Your Jquery HTML has <div class="3u$ 12u$(medium)">
Because of the differences in the class names you find the differences in the way its rendered in the UI.
You missed one of your divs in JavaScript inner HTML string. I think it should be like this:
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';
I'm creating a web form with 3 select boxes with multiple questions. If I select 1st Question from 1st select drop-down that question will not appear in the 2nd select drop-down. It will repeat same as 3rd select drop-down.
Note: The main purpose is if user select any questions from select drop-down that question will not appear in another select drop-down.
Demo Code:
.margin-top-10 { margin-top: 1.0em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-30 { margin-top: 3.0em; }
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 1</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 2</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 3</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 text-right">
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back
</div>
<div class="col-xs-6"><a class="btn btn-primary" role="button" href="Registration-Complete.html" name="btnGlassContactInfo">Register <span class="glyphicon glyphicon-ok"></span></a></div>
</div>
</div>
</div>
</div>
</div>
The first thing you might want to do if change the select elements in your code so that each of them has a unique ID. They are all sel1 at the moment :)
Then you need to bind the onchange event to the select options that will remove the option being selected. Here is an example:
$('select').on('change', function() {
var elem = this;
var option = this.value;
$('.form-control option').each(function() {
if ($(this).html() === option && $(elem).attr('id') !== $(this).parent().attr('id')) {
$(this).remove();
}
});
})
You would probably want to disable the user from using the same selection element, or store the removed options and add them back should the user change his / her mind.
I have disabled them in my example, which you can view here.
https://jsfiddle.net/martiensk/jwfeqrx0/