Overflow hidden not working in my firefox - css

Overflow hidden not working in my firefox rest of the browser working fine
select {
overflow: hidden;
}
<select multiple="" size="20">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Firefox Output
Other browser Output

The overflow property is used when you want to control the element behavior if the content is bigger than the element size.
In your case, the container is bigger than the content so the content is not overflowing.
Perhaps what you want to do is adjust the size of the select to match the content, if that is the case you have to set the size of the select to match the number of options:
select {
overflow: hidden;
}
<select multiple="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

Related

hide select options using only css

I have a select and I need to hide some options using css, so I did :
<select name="time-2-hours" id="forminator-field-time-2-hours" class="forminator-select2 select2-hidden-accessible" data-field="hours" data-default-value="" tabindex="-1" aria-hidden="true">
<option value="0" selected="selected">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
css:
option[value="2"] {
display: none;
}
but its not working is there some thing wrong in my code ? I also try :
select#forminator-field-time-2-hours option[value="2"] {
display: none;
}
you can do this by adding style="display:none" to the option you want to hide using nth-child, for example i did it to option 05 from your code by adding select option:nth-child(6){ display:none; } :
select option:nth-child(6){
display:none;
}
<select name="time-2-hours" id="forminator-field-time-2-hours" class="forminator-select2 select2-hidden-accessible" data-field="hours" data-default-value="" tabindex="-1" aria-hidden="true">
<option value="0" selected="selected">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>

Create bootstrap form with multiple inline lables and selects

I'm trying to create a form in bootstrap 4 which looks similar to the image above.
I have tried numerous layouts and played around with the grid system to get the same effect, if I use the grid system to align all elements it looks fine on desktop, but is broken on mobile.
<div class="form-row">
<div class="form-group col-md-2">
<label id="monday">Monday</label>
</div>
<div class="form-group col-md-1">
<label id="mon-from">From</label>
</div>
<div class="form-group col-md-2">
<select class="form-control-sm" id="mon-from-hrs" name="mon-from-hrs">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08" selected>08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<label id="mon-semi-from">:</label>
<select class="form-control-sm" id="mon-from-min" name="mon-from-min">
<option value="00" selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</div>
<div class="form-group col-md-1">
<label id="mon-to">To</label>
</div>
<div class="form-group col-md-2">
<select class="form-control-sm" id="mon-to-hrs" name="mon-to-hrs">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17" selected>17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<label id="mon-semi-to">:</label>
<select class="form-control-sm" id="mon-to-min" name="mon-to-min">
<option value="00" selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</div>
<div class="form-group col-md-2">
<div class="custom-control custom-checkbox mr-sm-2" id="chkMon">
<input type="checkbox" class="custom-control-input" id="closedMon">
<label class="custom-control-label" for="closedMon">Closed</label>
</div>
<label id="mon24Text" hidden></label>
</div>
<div class="form-group col-md-2">
Add special hours
</div>
</div>
This works fine on desktop and laptop screens, but is totally broken on mobile, with the select elements cut off.
Can someone please show me in the correct direction.
use media queries to style the mobile view.
for eg:
#media(min-width:320px)and(max-width:768px){
.form-group{
width:100%;
display:block;
}
}
manually customise like this.

Materialize.css selectbox rendering duplicate select boxes

I am using Materialize.css library (v 1.0.0), as of 2018 for my project to add the material components. However, I failed to initialize two select boxes with it.
I have two select boxes in my page.
$(function() {
$("#numPagesPaginate").formSelect();
$("#numRatingsEdit").formSelect();
});
<select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="numRatingsEdit" name="numRatingsEdit" style="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
However, when I initialize both the select boxes using this only the first one works.
In addition, if I initialize the second selectbox in the script tag elsewhere, the box gets initialized and works, but there is one duplicate selectbox.
Edited: To add this question, I want to tell you that I have read the documentation and the default method. However, no results.
You should follow documentation and initialize globally with one line:
$('select').formSelect();
Just like Serg said, you should follow the documentation properly.
<div class="container">
<div class="row">
<div class="col s6">
<label>Num Pages Paginate</label>
<select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col s6">
<label>Num Ratings Edit</label>
<select id="numRatingsEdit" name="numRatingsEdit">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('select').formSelect();
});
</script>

Cant make the first <option> invisible

I have a <select> and want the first option to be invisible since there is not enough space for the text on the mobile version and it gets chopped off anyway so I resolved to just make it disappear but it wont work. Only with the rest of the options (on PC browsers) but not for the first one. Why is that?
This is what I've already tried
CSS:
option:first-child {
color: transparent;
}
HTML:
<select>
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Thank you.
option:first-child{
display: none;
}
<select>
<option disabled value>Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
using javascript (best way)
(function(){
document.getElementById("first").text = "";
})()
<select id="mySelect">
<option value id="first">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
if you want to hide first option only in mobile, then follow this
(function(){
var window_width = $(window).width();
if(window_width < 480){
document.getElementById("first").text = "";
}
})()
<select id="mySelect">
<option value id="first">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>This will hide only in mobile screen</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
You can set it to display: none; only issue is, it won't work in Internet Explorer (surprise!)
Or just leave the <option> empty...
I think you don't really need to add any css for this reason. If you need to the first option to be blank, then remove Please Select .i.e.,
<select>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If you want some spacing will be there inside the box even though text is removed you can just add a few times to make look the panel wide enough as show below.
<select>
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Here is a working pluncker for you. Change it to display:none and add select to the CSS
OR
You can use visibility: hidden; instead of display:none in CSS
select option:first-child {
display:none;
}
<select>
<option value="">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
jQuery.fn.toggleOption = function(show) {
jQuery(this).toggle(show);
if (show) {
if (jQuery(this).parent('span.toggleOption').length)
jQuery(this).unwrap();
} else {
if (jQuery(this).parent('span.toggleOption').length == 0)
jQuery(this).wrap('<span class="toggleOption" style="display:none;" />');
}
};
You can use media query to handle small devices and phones:
/* you can set any width you want */
#media (max-width: 400px) {
select option:first-child {
display: none;
}
}
<select>
<option style="display:none;">Please select</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
Thanks... :)

DropDownList.SelectedValue is not correct

I have following dropdwonlists in a UserControl;
<span class="src-engine-row-title-span">ADT : </span>
<asp:DropDownList runat="server" ID="ddlAdultTrf"></asp:DropDownList>
<span class="src-engine-row-title-span">CHD : </span>
<asp:DropDownList runat="server" ID="ddlChildrenTrf"></asp:DropDownList>
<span class="src-engine-row-title-span">INF : </span>
<asp:DropDownList runat="server" ID="ddlInfantTrf"></asp:DropDownList>
and I am assigning values to them on page_load event with following code;
ddlAdultTrf.DataTextField = "FieldName";
ddlAdultTrf.DataValueField = "FieldValue";
ddlAdultTrf.DataSource = repo.AdultsForTransferSearch();
ddlAdultTrf.DataBind();
ddlInfantTrf.DataTextField = "FieldName";
ddlInfantTrf.DataValueField = "FieldValue";
ddlInfantTrf.DataSource = repo.ChildrenForTransferSearch();
ddlInfantTrf.DataBind();
ddlChildrenTrf.DataTextField = "FieldName";
ddlChildrenTrf.DataValueField = "FieldValue";
ddlChildrenTrf.DataSource = repo.InfantsForTransferSearch();
ddlChildrenTrf.DataBind();
here is the generated markup for the dropdownlists;
<span class="src-engine-row-title-span">ADT : </span>
<select name="ctl00$MainContent$SearchEngine$ddlAdultTrf" id="MainContent_SearchEngine_ddlAdultTrf">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
</select>
<span class="src-engine-row-title-span">CHD : </span>
<select name="ctl00$MainContent$SearchEngine$ddlChildrenTrf" id="MainContent_SearchEngine_ddlChildrenTrf">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<span class="src-engine-row-title-span">INF : </span>
<select name="ctl00$MainContent$SearchEngine$ddlInfantTrf" id="MainContent_SearchEngine_ddlInfantTrf">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
when the page is loaded and I select something from the dropdownlist, I am trying to get the selectedvalue from code behind but the selected value is not the same with the selected one.
do u have any idea what is going on here?
Place the code in the Page_Load method inside the following conditional statement:
if (!Page.IsPostBack)
{
}

Resources