I am using select tag for mobile and tablet device.
On mobile device, it is working fine but on tablet, the select tag is not functioning properly.
My problem is : The option is getting disabled but the disabled options are not getting transparent(Faint in color).
Below is the code sample :
<select id="nativeDropDown" name='nativeDropDown' class="trend-filter native-dropdown-position" ng-click="openNativeDropDown()">
<option value='selectOption' selected data-ng-show="isIphone"></option>
<option value='lastDay' data-ng-disabled="chartType === 'boxplot'" data-bas-translate="LastDayFilter"></option>
<option value='last7Days' data-ng-disabled="chartType === 'boxplot'" data-bas-translate="Last7DaysFilter"></option>
<option value='last30Days' data-bas-translate="Last30DaysFilter"></option>
<option value='last12Months' data-bas-translate="Last12MonthsFilter"></option>
<option value='allTime' data-ng-disabled="!enableBoxplotForAllTime()" data-bas-translate="AllTime"></option>
<option value='customRange' data-bas-translate="CustomRangeFilter"></option></select>
.trend-filter
{
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
background-color: #EEEEEE;
overflow: hidden;
height: 35px;
margin-left: 5px;
/*opacity: 0.5;*/
width: 40px;
margin-left: -40px;
}
.native-dropdown-position {
position: absolute;
z-index: 99999;
}
Try using javascript validation instead.
And use the following code:
document.getElementById(" ").disabled = true; //Fill the white spaces with whatever you name it
Related
I'm new to CSS, and the following example is confusing me. So I would like to get a better understanding.
Here's what I did:
HTML:
<select id="dropdown" required>
<option disabled selected value>Choose current role</option>
<option class="option">Student</option>
<option class="option">Full Time Job</option>
<option class="option">Prefer Not to Say</option>
<option class="option">Others</option>
</select>
CSS:
body: {color: white;}
Either before and after any option is clicked on the webpage, the text color on the Select bar will be white.
I tried to change the text color with below syntax but to no avail:
#dropdown {
padding-right: 100%;
}
#dropdown:focus:after {
color: black;
}
It only works when I take out the #dropdown declaration:
#dropdown:focus:after {
color: black;
}
But I want to keep the #dropdown declaration for the creating padding. Is there other way to make this work?
And why doesn't it work with both #dropdown and #dropdown:focus:after declarations?
Try this:
var select = document.getElementById('mySelect');
select.onchange = function () {
select.className = 'redText';
}
.redText {
background-color:#F00;
}
<select id="mySelect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
This is with javascript, i did it as easy as possible.
<select> tags are difficult to style, you'll need to strip it down first by using appearance: none on the select.
body {
font: 2ch/1 Consolas;
}
fieldset {
position: relative;
display: inline-block;
border: 0;
}
select {
appearance: none;
}
#dropdown {
display: inline-block;
color: tomato;
height: 28px;
padding: 3px 30px 3px 6px;
font: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: #000;
}
#dropdown:focus {
color: lime;
background: #333;
}
.icon {
position: absolute;
top: 6px;
right: 16px;
display: inline-block;
padding: 0;
width: 22px;
height: 27px;
background: url(https://i.ibb.co/Kx33pSY/01.jpg) right / 90% no-repeat #000;
pointer-events: none;
}
<fieldset>
<legend>Whith Style</legend>
<output class='icon'></output>
<select id="dropdown" required>
<option disabled selected>Choose current role</option>
<option class="option">Student</option>
<option class="option">Full Time Job</option>
<option class="option">Prefer Not to Say</option>
<option class="option">Others</option>
</select>
</fieldset>
<fieldset>
<legend>Without Style</legend>
<select required>
<option disabled selected>Choose current role</option>
<option class="option">Student</option>
<option class="option">Full Time Job</option>
<option class="option">Prefer Not to Say</option>
<option class="option">Others</option>
</select>
</fieldset>
You can try this too:
select option {
background - color: white;
font - weight: bold;
color: red;
}
An HTML select element can be styled, however very minimally. Otherwise, if you want every different option colour, give a separate class or id to all options.
guys i need your litle help i want to make select that show all option without to click select, i try add "multiple" but when i try in mobile display go wrong
this is what i want in front-end to mobile device
but on mobile
here is my code
<style>
select {
background-color: transparent;
border: none;
margin: 0;
width: 100%;
font-family: inherit;
font-size: 14;
cursor: inherit;
line-height: inherit;
outline: none;
text-align: center;
height: 90;
}
select option {
margin-top: 10;
}
</style>
<div class="select m-auto">
<select id="standard-select" name="bahasa" multiple>
<option value="id">Bahasa Indonesia</option>
<option value="en">Inggris</option>
<option value="viet">Vietnamese</option>
</select>
</div>
do be aware that size or multiple is not respected by mobile devices, but it works fine on desktops
you can try - overflow:auto;
select {
background-color: transparent;
border: none;
margin: 0;
width: 100%;
font-family: inherit;
font-size: 14;
cursor: inherit;
line-height: inherit;
outline: none;
text-align: center;
overflow:auto;
}
<div class="select m-auto">
<select id="standard-select" name="bahasa" multiple>
<option value="id">Bahasa Indonesia</option>
<option value="en">Inggris</option>
<option value="viet">Vietnamese</option>
</select>
</div>
Dynamically setting the label attribute would be enough for all iOS versions to display the control label. Turns out this depends on the iOS version.
you not setting innerText on iOS 7-9, but iOS 10 & up requires innerText to be set for the label to display.
required iOS 10 & up
let option = document.createElement('option');
option.label = option.innerText = 'option label';
option.value = '123';
not required on iOS 7-9
var option = document.createElement('option');
option.label = 'option label';
option.value = '123';
I'm fixing the width of one of my dropdown boxes (yes I know there are cross-browser issues with doing this).
Is there a non-js way to cut off overflowing text and append ellipses? text-overflow:ellipsis doesn't work for <select> elements (at least in Chrome).
select, div {
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
<!--works for a div-->
<div>
A long option that gets cut off
</div>
<!--but not for a select-->
<select>
<option>One - A long option that gets cut off</option>
<option>Two - A long option that gets cut off</option>
</select>
Example here:
http://jsfiddle.net/t5eUe/
NOTE: As of July 2020, text-overflow: ellipsis works for <select> on Chrome
HTML is limited in what it specifies for form controls. That leaves room for operating system and browser makers to do what they think is appropriate on that platform (like the iPhone’s modal select which, when open, looks totally different from the traditional pop-up menu).
If it bugs you, you can use a customizable replacement, like Chosen, which looks distinct from the native select.
Or, file a bug against a major operating system or browser. For all we know, the way text is cut off in selects might be the result of a years-old oversight that everyone copied, and it might be time for a change.
If you are finding this question because you have a custom arrow on your select box and the text is going over your arrow, I found a solution that works in some browsers. Just add some padding, to the select, on the right side.
Before:
After:
CSS:
select {
padding:0 30px 0 10px !important;
-webkit-padding-end: 30px !important;
-webkit-padding-start: 10px !important;
}
iOS ignores the padding properties but uses the -webkit- properties instead.
http://jsfiddle.net/T7ST2/4/
The simplest solution might be to limit the number of characters in the HTML itself. Rails has a truncate(string, length) helper, and I'm certain that whichever backend you're using provides something similar.
Due to the cross-browser issues you're already familiar with regarding the width of select boxes, this seems to me to be the most straightforward and least error-prone option.
<select>
<option value="1">One</option>
<option value="100">One hund...</option>
<select>
You can use this:
select {
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
select option {
width:100px;
text-overflow:ellipsis;
overflow:hidden;
}
div {
border-style:solid;
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
Found this absolute hack that actually works quite well:
https://codepen.io/nikitahl/pen/vyZbwR
Not CSS only though.
The basic gist is to have a container on the dropdown, .select-container in this case. That container has it's ::before set up to display content based on its data-content attribute/dataset, along with all of the overflow:hidden; text-overflow: ellipsis; and sizing necessary to make the ellipsis work.
When the select changes, javascript assigns the value (or you could retrieve the text of the option out of the select.options list) to the dataset.content of the container, and voila!
Copying content of the codepen here:
var selectContainer = document.querySelector(".select-container");
var select = selectContainer.querySelector(".select");
select.value = "lingua latina non penis canina";
selectContainer.dataset.content = select.value;
function handleChange(e) {
selectContainer.dataset.content = e.currentTarget.value;
console.log(select.value);
}
select.addEventListener("change", handleChange);
span {
margin: 0 10px 0 0;
}
.select-container {
position: relative;
display: inline-block;
}
.select-container::before {
content: attr(data-content);
position: absolute;
top: 0;
right: 10px;
bottom: 0;
left: 0;
padding: 7px;
font: 11px Arial, sans-serif;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-transform: capitalize;
pointer-events: none;
}
.select {
width: 80px;
padding: 5px;
appearance: none;
background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px;
background-size: 10px 10px;
color: transparent;
}
.regular {
display: inline-block;
margin: 10px 0 0;
.select {
color: #000;
}
}
<span>Hack:</span><div class="select-container" data-content="">
<select class="select" id="words">
<option value="lingua latina non penis canina">Lingua latina non penis canina</option>
<option value="lorem">Lorem</option>
<option value="ipsum">Ipsum</option>
<option value="dolor">Dolor</option>
<option value="sit">Sit</option>
<option value="amet">Amet</option>
<option value="lingua">Lingua</option>
<option value="latina">Latina</option>
<option value="non">Non</option>
<option value="penis">Penis</option>
<option value="canina">Canina</option>
</select>
</div>
<br />
<span>Regular:</span>
<div class="regular">
<select style="width: 80px;">
<option value="lingua latina non penis canina">Lingua latina non penis canina</option>
<option value="lorem">Lorem</option>
<option value="ipsum">Ipsum</option>
<option value="dolor">Dolor</option>
<option value="sit">Sit</option>
<option value="amet">Amet</option>
<option value="lingua">Lingua</option>
<option value="latina">Latina</option>
<option value="non">Non</option>
<option value="penis">Penis</option>
<option value="canina">Canina</option>
</select>
</div>
** HTML ex. **
<select id="selectDropdownID">
<option>One - A long option that gets cut off</option>
<option>Two - A long option that gets cut off</option>
</select>
CSS file
.selectDD {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
JS file
$(document).ready(function () {
$("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});
quirksmode has a good description of the 'text-overflow' property, but you may need to apply some additional properties like 'white-space: nowrap'
Whilst I'm not 100% how this will behave in a select object, it could be worth trying this first:
http://www.quirksmode.org/css/textoverflow.html
I used this approach in a recent project and I was pretty happy with the result:
.select-wrapper {
position: relative;
&::after {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
content: "";
background: linear-gradient(to right, transparent, white);
pointer-events: none;
}
}
Basically, wrap the select in a div and insert a pseudo element to overlay the end of the text to create the appearance that the text fades out.
You can use this jQuery function instead of plus Bootstrap tooltip
function DDLSToolTipping(ddlsArray) {
$(ddlsArray).each(function (index, ddl) {
DDLToolTipping(ddl)
});
}
function DDLToolTipping(ddlID, maxLength, allowDots) {
if (maxLength == null) { maxLength = 12 }
if (allowDots == null) { allowDots = true }
var selectedOption = $(ddlID).find('option:selected').text();
if (selectedOption.length > maxLength) {
$(ddlID).attr('data-toggle', "tooltip")
.attr('title', selectedOption);
if (allowDots) {
$(ddlID).prev('sup').remove();
$(ddlID).before(
"<sup style='font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;'>...</sup>"
)
}
}
else if ($(ddlID).attr('title') != null) {
$(ddlID).removeAttr('data-toggle')
.removeAttr('title');
}
}
I have this html for an select control
<select class="form-control">
<option value="0"></option>
<option value="1: 1" >Jr.</option>
<option value="2: 2">Sr.</option>
<option value="3: 3">I</option>
<option value="4: 4">II</option>
<option value="5: 5">III</option>
</select>
It is getting rendered as expected in chrome
chrome image 1
chrome image 2
but in IE, the select option is hiding the control when it is clicked or in other words the the select option is not getting opened from the bottom of the select control as seen in this following screen shot
IE image 1
IE image 2
is this a default behaviour or can I change it? I tried giving using this css but did not work
select.form-control {
width: 100%;
max-width: 325px;
border-width: 0 0 1px 0;
box-shadow: none;
border-radius: 0;
-moz-appearance: none;
text-indent: .01px;
text-overflow: '';
position: relative;
}
option, select.form-control option {
color: blue !important;
top: 0px !important;
position: absolute !important;
}
any suggestion?
This is standard behavior. Every browser renders elements slightly different and has their own styles for it. Some styles can be changed, others are hidden in the shadow root of the elements and cannot be changed. option sadly has only a few styles like color that can be set...
One solution for this would be to hide the select element and control it via another element that can be styled (e.g. span) and JavaScript. That is not really pretty but many css frameworks already do so and if you absolutely have to make it look good (most of the times that is the case) that is your only option.
Here's a quick example of a custom built select box. As you can see, even putting images in the options is possible now. Hope this helps you.
Fontawesome is used for the caret. Documentation in the JS source code.
// Create a reference to the select box
const selectBox = document.getElementById("selected");
// Add an event listener to detect the click and make the options (in)visible
selectBox.addEventListener("click", function() {
// Add or remove class 'open'
document.getElementById("options").classList.toggle("open");
});
// Put all options in an array
const options = [...document.getElementsByClassName("option")];
// Add event listener for each option
options.map( option => option.addEventListener("click", function() {
// Create a reference to the input field
const myInput = document.getElementById("sel");
// Retrieve the text from the clicked option
const optionText = this.getElementsByTagName("span")[0].innerHTML;
// Put the text in the input field value
myInput.value = optionText;
// Put the text in the select box
selectBox.innerHTML = optionText;
// Close the select box
document.getElementById("options").classList.toggle("open")
}));
.container {
display: flex;
flex-wrap: wrap;
width: 25%;
}
#selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
#selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
#options {
display: none;
margin: 0;
padding: 0;
}
#options.open {
display: inline-block;
}
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
li>img {
margin-right: 1em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div id="selected">Select an option</div>
<ul id="options">
<li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
<li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
<li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
</ul>
</div>
</form>
You can correct the behavior with CSS
select {
float: left;
display: inline-block;
}
<select class="form-control">
<option value="0"></option>
<option value="1: 1" >Jr.</option>
<option value="2: 2">Sr.</option>
<option value="3: 3">I</option>
<option value="4: 4">II</option>
<option value="5: 5">III</option>
</select>
I'm fixing the width of one of my dropdown boxes (yes I know there are cross-browser issues with doing this).
Is there a non-js way to cut off overflowing text and append ellipses? text-overflow:ellipsis doesn't work for <select> elements (at least in Chrome).
select, div {
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
<!--works for a div-->
<div>
A long option that gets cut off
</div>
<!--but not for a select-->
<select>
<option>One - A long option that gets cut off</option>
<option>Two - A long option that gets cut off</option>
</select>
Example here:
http://jsfiddle.net/t5eUe/
NOTE: As of July 2020, text-overflow: ellipsis works for <select> on Chrome
HTML is limited in what it specifies for form controls. That leaves room for operating system and browser makers to do what they think is appropriate on that platform (like the iPhone’s modal select which, when open, looks totally different from the traditional pop-up menu).
If it bugs you, you can use a customizable replacement, like Chosen, which looks distinct from the native select.
Or, file a bug against a major operating system or browser. For all we know, the way text is cut off in selects might be the result of a years-old oversight that everyone copied, and it might be time for a change.
If you are finding this question because you have a custom arrow on your select box and the text is going over your arrow, I found a solution that works in some browsers. Just add some padding, to the select, on the right side.
Before:
After:
CSS:
select {
padding:0 30px 0 10px !important;
-webkit-padding-end: 30px !important;
-webkit-padding-start: 10px !important;
}
iOS ignores the padding properties but uses the -webkit- properties instead.
http://jsfiddle.net/T7ST2/4/
The simplest solution might be to limit the number of characters in the HTML itself. Rails has a truncate(string, length) helper, and I'm certain that whichever backend you're using provides something similar.
Due to the cross-browser issues you're already familiar with regarding the width of select boxes, this seems to me to be the most straightforward and least error-prone option.
<select>
<option value="1">One</option>
<option value="100">One hund...</option>
<select>
You can use this:
select {
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
select option {
width:100px;
text-overflow:ellipsis;
overflow:hidden;
}
div {
border-style:solid;
width:100px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
Found this absolute hack that actually works quite well:
https://codepen.io/nikitahl/pen/vyZbwR
Not CSS only though.
The basic gist is to have a container on the dropdown, .select-container in this case. That container has it's ::before set up to display content based on its data-content attribute/dataset, along with all of the overflow:hidden; text-overflow: ellipsis; and sizing necessary to make the ellipsis work.
When the select changes, javascript assigns the value (or you could retrieve the text of the option out of the select.options list) to the dataset.content of the container, and voila!
Copying content of the codepen here:
var selectContainer = document.querySelector(".select-container");
var select = selectContainer.querySelector(".select");
select.value = "lingua latina non penis canina";
selectContainer.dataset.content = select.value;
function handleChange(e) {
selectContainer.dataset.content = e.currentTarget.value;
console.log(select.value);
}
select.addEventListener("change", handleChange);
span {
margin: 0 10px 0 0;
}
.select-container {
position: relative;
display: inline-block;
}
.select-container::before {
content: attr(data-content);
position: absolute;
top: 0;
right: 10px;
bottom: 0;
left: 0;
padding: 7px;
font: 11px Arial, sans-serif;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-transform: capitalize;
pointer-events: none;
}
.select {
width: 80px;
padding: 5px;
appearance: none;
background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px;
background-size: 10px 10px;
color: transparent;
}
.regular {
display: inline-block;
margin: 10px 0 0;
.select {
color: #000;
}
}
<span>Hack:</span><div class="select-container" data-content="">
<select class="select" id="words">
<option value="lingua latina non penis canina">Lingua latina non penis canina</option>
<option value="lorem">Lorem</option>
<option value="ipsum">Ipsum</option>
<option value="dolor">Dolor</option>
<option value="sit">Sit</option>
<option value="amet">Amet</option>
<option value="lingua">Lingua</option>
<option value="latina">Latina</option>
<option value="non">Non</option>
<option value="penis">Penis</option>
<option value="canina">Canina</option>
</select>
</div>
<br />
<span>Regular:</span>
<div class="regular">
<select style="width: 80px;">
<option value="lingua latina non penis canina">Lingua latina non penis canina</option>
<option value="lorem">Lorem</option>
<option value="ipsum">Ipsum</option>
<option value="dolor">Dolor</option>
<option value="sit">Sit</option>
<option value="amet">Amet</option>
<option value="lingua">Lingua</option>
<option value="latina">Latina</option>
<option value="non">Non</option>
<option value="penis">Penis</option>
<option value="canina">Canina</option>
</select>
</div>
** HTML ex. **
<select id="selectDropdownID">
<option>One - A long option that gets cut off</option>
<option>Two - A long option that gets cut off</option>
</select>
CSS file
.selectDD {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
JS file
$(document).ready(function () {
$("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});
quirksmode has a good description of the 'text-overflow' property, but you may need to apply some additional properties like 'white-space: nowrap'
Whilst I'm not 100% how this will behave in a select object, it could be worth trying this first:
http://www.quirksmode.org/css/textoverflow.html
I used this approach in a recent project and I was pretty happy with the result:
.select-wrapper {
position: relative;
&::after {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
content: "";
background: linear-gradient(to right, transparent, white);
pointer-events: none;
}
}
Basically, wrap the select in a div and insert a pseudo element to overlay the end of the text to create the appearance that the text fades out.
You can use this jQuery function instead of plus Bootstrap tooltip
function DDLSToolTipping(ddlsArray) {
$(ddlsArray).each(function (index, ddl) {
DDLToolTipping(ddl)
});
}
function DDLToolTipping(ddlID, maxLength, allowDots) {
if (maxLength == null) { maxLength = 12 }
if (allowDots == null) { allowDots = true }
var selectedOption = $(ddlID).find('option:selected').text();
if (selectedOption.length > maxLength) {
$(ddlID).attr('data-toggle', "tooltip")
.attr('title', selectedOption);
if (allowDots) {
$(ddlID).prev('sup').remove();
$(ddlID).before(
"<sup style='font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;'>...</sup>"
)
}
}
else if ($(ddlID).attr('title') != null) {
$(ddlID).removeAttr('data-toggle')
.removeAttr('title');
}
}