How do we make materialize select dropdown options to be not constrained in their width? Right now they have same width as the control and words wrapped.
http://www.codeply.com/go/unDArvEuR0
Html:
<div class="input-field col s1">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1 longgggg tesxtas dsada</option>
<option value="2">Option 2 asd very longggg</option>
<option value="3">Option 3</option>
</select>
</div>
Js:
$('select').material_select();
This will make items not wrap and the container expand to fit the items:
ul.select-dropdown,
ul.dropdown-content {
width: auto !important;
li > span {
white-space: nowrap;
}
}
Remove the col s1 classes from your select or play around with them.
Not entirely perfect answer, but better. add below css class to your project.
ul.select-dropdown,ul.dropdown-content{
width:200% !important;
}
If you want to disable width constraint, you can do it with the following JS code (just add it after material_select call)
$('select').siblings('input').attr("data-constrainwidth", false);
The setting itself is from http://materializecss.com/dropdown.html, but for some reason, there is only a documentation for a button. However with this JS call, you can achieve the same functionality on select
Setting min-width on the select dropdown can be a quick temporary fix as well. Dropdowns are coded to not give inline style width less than min-width .
Related
I would like to apply the grouped text in listbox, looks like this
to
this is listbox in the resources page.
I tried to add the ‘optgroup’ tag into
'manager\templates\default\element\tv\renders\input\listbox-multiple.tpl'
but still not working, the 'optgroup’ tag will be ignored.
I unterstand that I should ‘Adding a Custom TV Input Type’ but the document didn’t include the details about grouping input values.
That is easy ;)
your listbox should contain a #CHUNK yourchunk
In that chunk you can perform nearly everything, that genereates a list, like:
<select name="something" id="something" >
<option value="" selected disabled>choose</option>
<optgroup label="Headline 01">
[[pdoResources? &parents=`0` &where=`{"template:=":40` &sortby=`{"value":"ASC"}` &limit=`40` &tpl=`pdoResourcesFormoption-something` &includeTVs=`some-tv`]]
</optgroup>
<optgroup label="Headline 02">
[[pdoResources? &parents=`0` &where=`{"template:=":41` &sortby=`{"value":"ASC"}` &limit=`40` &tpl=`pdoResourcesFormoption-something` &includeTVs=`some-tv`]]
</optgroup>
<optgroup label="Headline 03">
[[pdoResources? &parents=`0` &where=`{"pagetitle:=":"something"` &sortby=`{"value":"ASC"}` &limit=`40` &tpl=`pdoResourcesFormoption-something` &includeTVs=`some-tv`]]
</optgroup>
I'm a little bit confused with Angular and ng-options.
I have a simple array and I want to init a select with it. But, I want that options value = label.
script.js
$scope.options = ['var1', 'var2', 'var3'];
html
<select ng-model="myselect" ng-options="o for o in options"></select>
What I get:
<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>
What I want:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
So I tried:
<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>
<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>
(But it didn’t work.)
Edit:
My form is submitted externally, which is why I need 'var1' as the value instead of 0.
You actually had it correct in your third attempt.
<select ng-model="myselect" ng-options="o as o for o in options"></select>
See a working example here:
http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview
The trick is that AngularJS writes the keys as numbers from 0 to n anyway, and translates back when updating the model.
As a result, the HTML will look incorrect but the model will still be set properly when choosing a value. (i.e. AngularJS will translate '0' back to 'var1')
The solution by Epokk also works, however if you're loading data asynchronously you might find it doesn't always update correctly. Using ngOptions will correctly refresh when the scope changes.
You can use ng-repeat with option like this:
<form>
<select ng-model="yourSelect"
ng-options="option as option for option in ['var1', 'var2', 'var3']"
ng-init="yourSelect='var1'"></select>
<input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>
When you submit your form you can get value of input hidden.
DEMO
ng-selected
ng-repeat
If you setup your select like the following:
<select ng-model="myselect" ng-options="b for b in options track by b"></select>
you will get:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
working fiddle: http://jsfiddle.net/x8kCZ/15/
you could use something like
<select ng-model="myselect">
<option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
{{o}}
</option>
</select>
using ng-selected you preselect the option in case myselect was prefilled.
I prefer this method over ng-options anyway, as ng-options only works with arrays. ng-repeat also works with json-like objects.
<select ng-model="option" ng-options="o for o in options">
$scope.option will be equal to 'var1' after change, even you see value="0" in generated html
plunker
i tried to select a value out of a combo box via groovy(geb).
the html code is:
<select id="entity-list-form:statusSearchBtn" name="entity-list-form:statusSearchBtn" size="1" style="width: 200px;">
<option value="">alle</option>
<option value="REGISTERED" selected="selected">Wartet auf Bestätigung</option>
<option value="REJECTED">Registrierung zurückgewiesen</option>
<option value="APPROVED">Registrierung angenommen</option>
<option value="UNSUBSCRIBED">Abgemeldet</option>
</select>
i tried to access these elements via
$("entity-list-form").statusSearchBtn = "alle"
or
$("entity-list-form").statusSearchBtn.value() == "alle"
a different approach was in the page siet to add
statusSearchBtn { $('select[name$="entity-list-form:statusSearchBtn"]') }
and also the case with the name only like entity-list-form. in this caes i tried it like
statusSearchBtn = "alle"
or
statusSearchBtn.value() == "alle"
the last one end without any errors, but didnt change the selected value to "alle".
the former one ended in No such property: statusSearchBtn for class: geb.navigator.EmptyNavigator.
i greatly apprichiate any advice,
I think:
$("select", name : "entity-list-form:statusSearchBtn").value('alle')
$("select", name : "entity-list-form:statusSearchBtn").value() = 'alle'
I searched all around stackoverflow but I couldn't find an answer for it. Here is the problem:
I have two divs, one on top of the other. I want to have the top div to adapt the height depending on the height of the below div.
<div id="parent" style="height:300px">
<div id="div1" style="height:auto"></div>
<div id="div2" style="height:45px"></div>
</div>
This because I intend to show/hide the bottom div and the top div must resize to fill the parent div.
I forgot to mention that the first div (the one that needs to adapt) has long content with overflow:scroll
Can you help me please?
Thanks
For this you can display:table property. Write like this:
#parent{
display:table;
height:300px;
width:100%;
}
#parent > div{
display:table-row;
}
#div1{
background:red;
}
#div2{
background:green;
height:45px;
}
Check this http://jsfiddle.net/7NuFr/
Hay all,
I am trying to validate a select in kohana 3.0 and I am using the necessary rules. However the validation does no "kick in" when the user does not make a selection.
<select id="discipline" name="discipline" >
<option value="0"> -- Select One -- </option>
<option value="-2">Information Technology and Engineering</option>
<option value="4">Business and Training Seminars</option>
</select>
That was my select, now i have applied these rules to the post array before i check for validation errors.
$post = Validate::factory($_POST)
->rule('discipline', 'not_empty')
->rule('discipline', 'numeric');
When I submit the form without making a selection, the form submits and the rules should stop it.
Any ideas ?
Your still putting a value for the first one, as 0. Leave the value as value="". 0 is numeric and considered not empty.
Replace 0 with blank string
Add ->rule('discipline', 'in_array', array(array(-2, 4))); to check that selected discipline is within valid collection.
string empty first option
<select name="fruit" required>
<option value="">select fruit</option>
<option value="banana">banana</option>
</select>
then some css may help
form:invalid button[type="submit"], form:invalid input[type="submit"] {
opacity: 0.5;
cursor: default;
}