So I have a dropdown menu like this:
<select class="ui search dropdown">
<option value="">Caption</option>
<option value="someoption">SomeOption</option>
</select>
Neither adding width="20" nor style="width: 20px" sets the width as I want to. I observed, that in the browser, actually different code is shown; the select is transformed into a div, so it seems like that transformation doesn't inherit the changed width.
How would one go about setting a different width for such a menu?
If the <div> that's added has a class or id, use CSS to target it.
<style>
#id{
/*styles*/
}
.class{
/*styles*/
}
.parentClass>div{
/*styles*/
}
#selectWrapper>div{
/*styles*/
}
</style>
Try to wrap the select with an identifier and targeting the select from there.
.wrapper select {
width: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.js"></script>
<div class='wrapper'>
<select class="ui search dropdown">
<option value="">Caption</option>
<option value="someoption">SomeOption</option>
</select>
</div>
This is the solution, proposed by Indrek Siitan from the Gitter Chat:
Have a div around it with a specific width and then append the fluid class to the dropdown. Namely:
<div style="width: 20px">
<select class="ui fluid search dropdown">
<option value="">Caption</option>
<option value="someoption">SomeOption</option>
</select>
<div>
Try this:
<select id="drpdwn" class="ui search dropdown"> <option value="">Caption</option> <option value="someoption">SomeOption</option> </select>
#drpdwn{ width: 20px;}
id has higher priority than class. This one works
Related
https://codepen.io/sayaman/pen/gOmRepQ
Hiding a block element without using display:none?
Ok, so I learned you can't hide a parent div without also hiding the children, although in this case I can also hide the + button we see in the above codepen because it's a child of the parent, I would avoid using hide in the situation where there are many components to hide. Is there a way to hide everything without adding the display:hide styling in every remaining elements that aren't hidden by setting the height and width to 0?
<div class="multiselect" id="countries" multiple="multiple" data-target="multi-0">
<div class="title noselect">
<span class="text">Select</span>
<span class="close-icon">×</span>
<span class="expand-icon">+</span>
</div>
<div class="container">
<option value="us">USA</option>
<option value="fr">France</option>
<option value="gr">Greece</option>
<option value="uk">United Kingdom</option>
<option value="ge">Germany</option>
<option value="sp">Spain</option>
<option value="it">Italy</option>
<option value="ch">China</option>
<option value="jp">Japan</option>
</div>
</div>
<div id="lol" type="button">Click Me</div>
<div style="margin-top: 10px;">
You can select multiple values from the dropdown and delete all of them at the same time, by clicking on the 'x' button.
</div>
The above is the html.
#countries {height: 0px; width:0px;}
.title>span, .title, .expand-icon {
height: 0px;
width: 0px;
}
This is the styling I added to get rid of the former dropdown span. I did this to replace it with a div of my choosing so I can prevent the dropdown span of changing appearance like they do in most dropdown plugins. If you have any creative solutions, share them.
I've started to work with jQuery Mobile, and I'm facing a problem that in a regular HTML code it is effortless to solve.
The problem:
I am trying to split the page like in the picture below-
On the left page, I want to add a dropdown list (that's not the problem), and on the right of the screen I want to add the "Age" and two text boxes in the same line but it does not let me add everything in the same line.
My question, is there an easy way to it, for example like Bootstrap?
What is the best way to combine features inline in jQuery Mobile?
Thanks.
Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/
Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.
Default grid cells are evenly distributed, but You can override the default width easily. Moreover, by using the ui-responsive class the grid will be responsive by stacking the grid blocks at narrow widths.
Here is a playground:
.ui-grid-a > .ui-block-b {
text-align: right;
}
.ui-grid-solo > .ui-block-a {
white-space: nowrap;
}
.ui-mobile .ui-grid-solo label {
display: inline;
}
.ui-grid-solo .ui-input-text {
width: 30%;
display: inline-block;
margin-right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<select data-native-menu="false">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<div class="ui-block-b">
<div class="ui-grid-solo">
<div class="ui-block-a">
<label for="textinput-3">Range:</label>
<input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">
<label for="textinput-4">-</label>
<input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</body>
</html>
In my code I am using bootstrap css for styling . I have written a code for a drop down menu with class form-control. The problem is that I cant adjust the width of the form. It is now like occupying the total width of the webpage like:
--------------------------------------------------------------------------------------------------------| Choose the option
I just need to adjust the size of the dropdown . I am totally new to this field .
Somebody can help me out .?
I am attaching the part of code with this :
<body>
<select class="form control">
<option value= "1">one</option>
<option value= "2">two</option>
<option value= "3">three</option>
</select>
</body>
bootstrap link
Well, if you are using Bootstrap, the class .form-control by default has the following properties:
.form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
So, if you are using bootstrap you will have to override it using a custom class/id, or set a parent with a fixed width.
HTML
<div class="form-container">
<select class="form control">
<option value= "1">one</option>
<option value= "2">two</option>
<option value= "3">three</option>
</select>
</div>
CSS
.form-container{
width: 30%; //or width: 200px, etc
}
You can try using the bootstrap grid system. Adding a pre-defined responsive class like "col-xs-4" to your class list for the select element. (note this will only cover your width requirement, but if all elements use the grid system is can help keep the form looking clean and well organized).
A helpful reference for the bootstrap grid system may be found here http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Link your own stylesheet to the document...
Declare the class form-control in this document.. or add a new class to the html next to this, then add the height/width attributes:
Html:
<select class="form-control resizeformc">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
CSS:
.resizeformc {
width: 150px;
height:200px;
}
I have a listbox and I want to decrease its width.
Here is my code:
<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
This code works on IE 6 but not in Mozilla Firefox (latest version). Can anybody please tell me how I can decrease the width of the dropdown list on Firefox?
Try this code:
<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
CSS:
#wgtmsr{
width:150px;
}
If you want to change the width of the option you can do this in your css:
#wgtmsr option{
width:150px;
}
Maybe you have a conflict in your css rules that override the width of your select
DEMO
The dropdown width itself cannot be set. It's width depend on the option-values. See also here ( jsfiddle.net/LgS3C/ )
How the select box looks like is also depending on your browser.
You can build your own control or use Select2
https://select2.org
This:
<select style="width: XXXpx;">
XXX = Any Number
Works great in Google Chrome v70.0.3538.110
try the !important argument to make sure the CSS is not conflicting with any other styles you have specified. Also using a reset.css is good before you add your own styles.
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
or
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
Create a css and set the value style="width:50px;" in css code. Call the class of CSS in the drop down list. Then it will work.
If you want to control the width of the list that drops down, you can do it as follows.
CSS
#wgtmsr option {
width: 50px;
}
You can style it on your CSS file using the id = #wgtmsr.
#wgtmsr{
width: 50px;
}
And then remove the style element = 'style="width: 50px;"'
I'm attempting to provide a border for a select tag and have been pulling my hair out for the last 2 hours.
I had it done before using position via absolute and relative, but my hard drive crashed and all my code was lost.
Put simply I have
<div style="position:relative; border:1px solid #cc0000;">
<select style="position:absolute;">
<option>1</option>
</select>
</div>
This doesn't seem to work... The div automatically expands to the parent div's width as opposed to the width of its content
How do I set the div to automatically fit to the contents of the select box AND have a border of 1px without getting pushed out of the frame?
If you need more code, please say so.
Any and all help is appreciated. :)
EDIT
Here's some more code...
HTML:
<div class="orderQuantity">
<label for="quantity" class="orderInputLabel">Quantity:</label>
<div> <!--THIS IS THE DIV THAT NEEDS A BORDER!! -->
<select id="quantity_cs" name="quantity_cs" autocomplete="off" class="required">
<option value=''> </option>
<option value='10'>10</option>
<option value='20'>20</option>
<option value='30'>30</option>
<option value='40'>40</option>
<option value='50'>50</option>
<option value='60'>60</option>
<option value='70'>70</option>
<option value='80'>80</option>
<option value='90'>90</option>
<option value='100'>100</option>
</select>
</div> <!-- end of div that needs border -->
</div>
CSS:
.orderQuantity {
margin-top: 12px;
}
This is all I have at this point. I've tried numerous things, none of which worked. Including making the select absolute and the parent div relative and vice versa.
Help? D:
You can use jQuery for this. Cross Browser Compatible. Check working example http://jsfiddle.net/Npv8P/2/
I've figured out a solution that involves floats and "clear:both" that appears to work cross browser.
<div style="float:left;"> <!-- just toggle border on this div using jquery -->
<select>
<option>1</option>
</select>
</div>
<div style="clear:both;"></div>
Seems to work fine. Thanks to Mahima for reaffirming what I was trying and to Hussein for the help. :)