I am using HTML datalist to show various career paths but my number of options is too long . I wish to give it a scrolling effect. I have searched for it but only thing I found was CSS cannot be applied on datalist. Is it possible to apply styles on datalist using jQuery?
Here is my HTML markup:
<input class="form-control searchbar" #input (input)="filterdata(input.value)" [(ngModel)]="homesearch" id="home_ssearch" name="careerr" list="careers" placeholder="Discover more about any career you like" />
<div>
<datalist class="datalist" id="careers" >
<option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option>
</datalist>
</div>
Try this
.scrollable {
overflow-y: auto !important; // Use !important only if there is already an overflow style rule for this element and you want to override
}
And just apply it like this:
<datalist class="datalist scrollable" id="careers" >
<option *ngFor = "let career of carrerpathList" value="{{career.title}}" ></option>
</datalist>
Hope it helps! ;)
Update 1:
I hate inline styles, but let's try it to see if <datalist> accepts styles. Try this:
<datalist class="datalist scrollable" id="careers" style="overflow-y: auto!important">
This simple approach works for me:
datalist {
max-height: 500px;
overflow-y: auto;
}
Note: This CSS will apply the scroll effect to all <datalist>
In general, you can't. This element is an example of a "replaced element", these are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.
Instead you can use bootstrap dropdown or any other plugin for the same.
I have used bootstrap for it, you can adjust the height accordingly for e.g,
.dropdown-menu {
max-height: 150px;
overflow-y: auto;
}
jsfiddle link
try this:
.datalist {
height:50px !important;
max-height:80px !important;
overflow-y:auto;
display:block !important;
}
Related
I use select element with fixed width. However, when I have option element nested in select, which has quite long text, then, when this option is being selected, it does not get full background-width (I want the background to be 100%) and also the text is hidden.
Here is the example with the last option being hidden.
.x {
width: 200px;
overflow-x: auto;
}
<select class="x" size="4">
<option class="y" selected>xyz</option>
<option class="y" selected>xyz</option>
<option class="y" selected>xyz</option>
<option class="y" selected>xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</option>
</select>
You can see the full width using a single css property . Please add a class to solve the issue :
.y{
width: fit-content;
}
Using this style, you could see that the background color gets filled to the full width.
I use a select in datalist. But I have an issue. When my datalist show in the top of input, I cannot scroll in my datalist. But it doesn't occur when datalist in the bottom.
Here's my code:
<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}"
ng-model="icon.name"
list="classIcon"
id="searchIcon"
ng-change="changeFn(icon.name)">
<datalist id="classIcon" class="scroll" >
<select class="selectIcon">
<option ng-repeat="icon in classService.classesAwesome "
value="{{icon}}"
ng-bind-html="icon | highlight: $parent.icon.name ">
<i class="{{icon}}"></i>
<span ng-bind-html="icon | highlight: $parent.icon.name "></span>
</option>
</select>
</datalist>
You should add this code to your CSS.
.dropdown1 {
width:290px;
overflow:scroll;
height: 20px;
}
I know this is old but I was looking for a way to do this and found a simple solution to make it always sit below the input field.
I just customised the actual html element in the CCS like this:
datalist {
position: absolute;
}
I have tested this in Chrome, Mozilla and Edge.
I did find that the issue only really appeared in chrome and it was to do with the list size and screen width dimension as to whether it appeared at the side or above or below.
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 have a buch of multiple select boxes and I wanted to line them up in a line across the page. I thought I could do this with the help of divs, but for some reason I am running into trouble. Each select is being stretched across the entire width of the page even though I specified in the css that I didn't want that. Why is this happening?
Also, I am giving each select a title by just putting text on top of it. Is there a better way to make a title?
HTML
<div class='bold'>
<div id="parameters">
<div class="section">Program<br> <select multiple="multiple" name="program">
<option value="SGS">SGS</option>
</select>
</div>
<div class="section">School <br><select multiple="multiple" name="school">
<option value="FLH">FLH</option>
<option value="MID">MID</option>
<option value="SUN">SUN</option>
<option value="MNC">MNC</option>
</select>
</div>
<div class="section">Term <br><select multiple="multiple" name="term">
<option value="Fall 2011">Fall 2011</option>
<option value="Late Fall 2011">Late Fall 2011</option>
</select>
</div>
<div class="section">Extension<br> <select multiple="multiple" name="ext">
<option>Something...</option>
</select>
</div>
</div>
</div>
CSS
#parameters{width:100%
height:150px;
border-style:solid;
border-width:2px;
border-color:grey;}
.section{width:50px;}
Divs are block elements so will stack on top of each other by default. If you want them to sit next to each other you will need to float them.
.section{
float: left;
}
JSFiddle
You can try:
.section {
width: 50px;
display: inline-block
}
This is an alternative to float to a degree. It may suit your needs better, but it's difficult to say. display: inline-block comes with rendering drawbacks, as does float of course.
I prefer it sometimes - A lot of people jump at float like it's the only choice, but it can be a real pain too.
JSFiddle sample using display rather than float
As you can see, it preserves your border without using a clearfix, whereas float breaks the border.
edit: If you choose to use float, a good method of making the border wrap around the contained elements is to add overflow: auto to #parameters, as shown in the fiddle below:
Float fiddle with clearfix
I changed your html code a bit in order to use labels in the "tittle" of each select tag.
You can view here: http://jsfiddle.net/SmRzL/4/
In regards to how to align, your elements you need to float each section:
.section{
float: left;
padding: 10px;
}
In regards, to adding a title to each section personally I would do something along the lines of this:
<span class="title">Term </span>
.title {
display:block;
font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}
See this fiddle for reference: http://jsfiddle.net/8rQXD/