I have a select dropdown menu containing a list of states. I have restricted the visible options after clicking the dropdown via this stackoverflow solution as can be seen in my code below:
<div>
<label asp-for="Venture.Location" class="form-label">Venture Location</label>
<select asp-for="Venture.Location" class="form-input form-select" required onmousedown="this.size=9" onblur="this.size=0" onchange="this.size=0">
<option disabled selected value="">select an option</option>
#foreach(var location in Model.Locations)
{
<option value="location">#location</option>
}
</select>
</div>
However, clicking the dropdown, I will see a cuttoff option thus showing more than 9 options. How can I make sure to only show the correct amount of options via the size? How can I get rid of the cutoff option?
The problem (as it has been written inside of one of the comments of the answers you copied code from is that this crashes from IE11).
You can simply fix this with size attribute onto select tag:
<select id="vehicles" size="2" >
<option value="Location1">Location1</option>
<option value="Location2">Location2</option>
<option value="Location3">Location3</option>
</select>
This will result in showing only Location1 and Location2
The answer to this is that the padding on the select element was causing the issue. I have removed padding once the mousedown event has occured.
Try to use in css
.form-input {
margin: 10px 0px;
padding: 15px;
overflow: auto; /* This option can helpyou!*/
}
Related
I am currently using Bootstrap's SelectPicker and am trying to display it inside a panel heading, aligned to the right, next to a few Bootstrap buttons. My problem is that the Bootstrap dropdown is too wide. It extends past where the panel heading ends. I have attempted to change the width to the dropdown, and by using other options such as float: right and drop-down-menu right instead of pull-right, but no cigar. I have attempted to change the CSS for the selectpicker and have tried to change it's position with Jquery, but it remains the same width and does not change. Here is a sample of my code below:
#if (Model.Customers != null && Model.Customers.Any())
{
<select name="custDropdown" id="custDropdown" class="selectpicker pull-right" title="Select a Customer...">
#foreach (var customer in Model.Customers)
{
<option value="#customer.UserName">#customer.FirstName #customer.LastName</option>
}
</select>
}
else
{
<select class="selectpicker pull-right" title="No Users for this Customer" disabled></select>
}
<div class="panel panel-default">
<div class="panel-heading">
Claim Activity
</div>
</div>
I haven't included my other buttons in this code sample, but they all have the class pull-right associated with them too. I've done a ton of research into this, but I haven't found any useful articles or threads with people trying to do this with a select statement, only with dropdown buttons. I know dropdowns act weirdly in comparison to buttons when trying to apply pull-right to them, but it doesn't make sense to me why it would extend past the panel heading. I know that it doesn't have to do with how long the name is inside of the dropdown. The names being displayed now are relatively short and the width does not change no matter how long or short they are. If anyone has any suggestions or know what I could do to fix this, that would be great. Here is an image for reference of what I'm talking about below:
I ended up solving the issue. Turns out, the problem was with the CSS of the SelectPicker. I was just looking in the wrong place when trying to modify the CSS before. The width was set at 100%, and I had to shorten it down to 82.5%.
.bootstrap-select > .dropdown-toggle {
width: 82.5%;
padding-right: 25px;
z-index: 1;
}
I have the following ASP:DropDownList on my aspx page:
<label>OT Code No.</label>
<asp:DropDownList runat="server" ID="ddlOvertimeCode" class="form-control" TabIndex="1"></asp:DropDownList>
Which renders as the following in HTML:
<select name="ctl00$MainContentPlaceHolder$ddlOvertimeCode" id="MainContentPlaceHolder_ddlOvertimeCode" tabindex="1" class="form-control">
<option selected="selected" value="0">-Select-</option>
<option value="1">1 - 10B PLES</option>
<option value="2">2 - Investigation</option>
<option value="3">3 - Arrest</option>
<option value="4">4 - Misc</option>
<option value="5">5 - EWW</option>
<option value="6">6 - Holiday</option>
<option value="7">7 - In-Lieu Holiday</option>
</select>
When submitted the form, I disable the DropDownList using the following code in my .cs file
ddlOvertimeCode.Attributes.Add("disabled", null);
I tried other methods of disabling the dropdownlist, however all of them would either override the bootstrap styling of the list or leave the dropdownlist able to be changed despite being grayed-out and ReadOnly. Adding the disabled attribute is the only way I could find to gray-out the box while leaving it's styling intact.
the problem arrises when the user withdraws the form, making it editable again, and the code re-enables the dropdownlist using the same method:
ddlOvertimeCode.Attributes.Remove("disabled");
removing the disabled attribute resets the dropdownlist and leaves me unable to alter DropDownList.SelectedValue from the codebehind.
I need a method of graying out the DropDownList and disabling it from the codebehind without overriding the bootstrap styling, and then returning it to an editable state, all while preserving the original selected value.
check if AutoPostBack="True"
code
thanx
Html code/example of dropdown:
<select class="ng-valid ng-dirty ng-touched" style="max-width: 235px" ng-model="blogerj" ng-options="blogerj.long_name for blogerj in blogerj track by blogerj.id">
<option class="" value="">[Choose...]</option>
<option label="label 1" value="1">Text Content 1</option>
<option label="label 2" value="2">Text Content 2</option>
<option label="label 3" value="3">Text Content 3</option>
<option label="label 4" value="4">Text Content 4</option>
</select>
If I just set attribute making it selected then it dont work because button for submit appears only when element is selected.
I also tried just to click element to open dropdown and then again click desired option but again it gave me no results.
foreach (GeckoHtmlElement geckoHtmlElement in gwBrowser.Document.GetElementsByTagName("select"))
{
if (geckoHtmlElement.GetAttribute("class") == "ng-valid ng-dirty ng-touched")
{
geckoHtmlElement.Click();
}
}
Actually it finds element but clicking dont do anything.
So maybe there is any fancy js method to select that dropdown?
From the portion class="ng-valid ng-dirty ng-touched" it looks like there is AngularJS at work here - because angular usually uses the prefix ng-. Angular can intercept user actions and take control of how your web page controls behave.
Html code:
<span id="syi-attribute-1277" class="dropdown l-stretchable-fixed native" tabindex="7146">
<input type="hidden" value="" name="attribute[1277]"></input>
<span class="label" style=""></span>
<span class="pointer"></span>
<select class="item-frame" size="1" style="height: 30px; width: 264px;">
<option class="item" value=""></option>
<option class="item" value="7146"></option>
<option class="item" value="7147"></option>
<option class="item" value="7148"></option>
</select>
What I'd like to do is the webbrowser control in my form (using WinForms) be able to select the third option of this drop down selection list (with the value of 7148). What I've tried so far:
doc.GetElementById("syi-attribute-1277").Children.GetElementsByName("option")[0].SetAttribute("value", "7148");
^ makes the most sense, though sadly it gives me this error: Additional information: Value of '0' is not valid for 'index'. 'index' should be between 0 and -1.
Code:
doc.GetElementById("syi-attribute-1277").SetAttribute("tabindex", "7148");
^ Nothing happens.
Any clue's? Thanks. :-)
GetElementsByName looks for a matching name (or id) attribute, not the element name.
Your also trying to set the value attribute on the option, you need to use the select if you want to set the value:
doc.GetElementById("syi-attribute-1277").GetElementsByTagName("select")[0].SetAttribute("value", "7148");
I'm having problems with the dropdownlist button.. the buttons looks weird..
Here is the image: http://imgur.com/9zHNM
HTML markup:
<td class="style 4">
<select name="ctl00$ContentPlaceHolder1$ucPromotions1$ddlCompany"
id="ctl00_ContentPlaceHolder1_ucPromotions1_ddlCompany"
style="height:25px;width:167px;">
</td>
CSS markup:
.style4
{
width: 185px;
}
What could be the problem?
Edit: problem resolved, it was the padding of the select in one my CSS
i have resolved it with this style
<td class="style 4">
<select name="ctl00$ContentPlaceHolder1$ucPromotions1$ddlCompany"
id="ctl00_ContentPlaceHolder1_ucPromotions1_ddlCompany"
style="height:25px;width:167px;padding:0 0;padding-top:0;paddingright-:0;padding- bottom:0;padding-left-value:0; ">
</td>
It's kinda hard to help you without a living demo but, what if you adjust the same style on the class .style4 and the style of the select?
Set them both at width: 185px; for example.
Hope it helps!
Your CSS properties in .style4 will not have any effect, because you've set the class attribute value to style 4. Remove the whitespace :)
Btw.: Your HTML has some errors.
Here is the valid one:
<td class="style4">
<select name="ctl00$ContentPlaceHolder1$ucPromotions1$ddlCompany" id="ctl00_ContentPlaceHolder1_ucPromotions1_ddlCompany" style="height:25px;width:167px;">
<option value="one">ONE</option>
<option value="two">TWO</option>
<option value="three">THREE</option>
</select>
</td>
Numbers only for CSS classes and IDs are not allowed.