I am trying to implement a dropDownList which, on each row to contain two controls: a Label and a Button, but my problem is that I have no clue how to do that.
Searching on google gave me no usefull results, so I don't know from where to start, or perhaps I don't know what to search. This dropDownList should work as a standard one if user clicks on the label, or rise a different event if the button is clicked.
I know this in not the standard type of question here, but if anyone could help me would be greatly appreciated.
Dropdownlist is simply a list. then Why you need Button and label in Dropdownlist ?
The DropDownList is a control. So it is not possible to add buttons and label in dropdownlist
If you need to do some activities when dropdownvalue changed then you can use OnSelectedIndexChanged . You can use it like buttonclick event
If button and Label are necessary for you then add them in a different way Use frames, or in OnSelectedIndexChanged event create your buttons and labels
Try this if you are looking for double options related to dropdownlist then try something like below
css
ul.dropdown-menu li{
width: 500px;
}
ul.dropdown-menu li a.text-left{
float: left;
width: 49%;
}
ul.dropdown-menu li a.text-right{
float: right;
width: 50%;
}
html
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg">big button</button>
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
</ul>
</div>
Related
I have following code where i want to select value for dropdown:
<div class="prod-value col-xs-6 col-sm-8">
<select class="selectpicker show-menu-arrow" data-style="btn-default btn-sm" data-width="98%" data-size="6" onchange="location=options[selectedIndex].value;" style="display: none;"><option value="/design-your-engagement-ring/choose-a-setting/10k-rose-gold-round-halo-engagement-ring/50277-E-10KR">10K Rose Gold</option>
<option value="aa">10K White Gold</option>
<option value="bb">10K Yellow Gold</option>
</select>
<div class="btn-group bootstrap-select show-menu-arrow" style="width: 98%;">
<button type="button" class="btn dropdown-toggle selectpicker btn-default btn-sm" data-toggle="dropdown" title="14K White Gold">
<span class="filter-option pull-left">14K White Gold</span> <span class="caret"></span></button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0">
<a tabindex="0" class="" data-normalized-text="10K Rose Gold"><span class="text">10K Rose Gold</span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a>
</li>
<li data-original-index="1">
<a tabindex="0" class="" data-normalized-text="10K White Gold"><span class="text">10K White Gold</span><span class="glyphicon glyphicon-ok icon-ok check-mark"></span></a>
</li>
</ul>
</div>
</div>
<input type="hidden" id="metal_type" name="metal_type" value="14KW">
</div>
How to do with selenium using c#. I have tried using xpath but it throws the error.
driver.FindElement(By.XPath("//*[#class='prod-value']/div/div/ul/li[0]/a")).Click();
Above code not able to find the exact path.
Try this:
//*[contains(#class,'prod-value')]/div/div/ul/li[1]/a
There were two issues with that xpath.
prod-value is not the only class present in first div
Element indexes are 1-based, so there's no li[0]
#derloopkat provided with correct explanation (+1)
Another simple way to solve the issue is to use link text (in case there are no more "10K Rose Gold" links):
driver.FindElement(By.LinkText("10K Rose Gold")).Click();
You need to click on the dropdown to expand its option before you can choose any option.
// expand dropdown options
driver
.FindElement(By.Css("div.prod-value button.dropdown-toggle.selectpicker"))
.click();
// choose option
driver.FindElement(By.LinkText("10K Rose Gold")).Click();
Firstly you need to expand the dropdown as Answered by Yong
Then you need to click element by using xpath as Answered by derloopkat
Here is final code for get final output:
driver.FindElement(By.CssSelector("div.prod-value button.dropdown-toggle.selectpicker")).Click();
driver.FindElement(By.XPath("//*[contains(#class,'prod-value')]/div/div/ul/li[1]/a")).Click();
I am very new to both Bootstrap and AngularJS. I've been researching this problem for a while now, and I can't find what's wrong. The dropdown appears, and you can click on it, but nothing happens when you click on the arrow for the drop down.
Here's the code I've been working with:
<div class="form-group">
<div class="dropdown" style="position: absolute; left: 60px; top: 115px;">
<button class=" btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="true" aria-expanded="true">
Select an Office
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="office in ctrl.offices"><a ng- click="moveMap(office.latitude, office.longitude)">{{office.name}}</a></li>
</ul>
I found an example like this at this site: http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/29/how-to-work-with-the-bootstrap-dropdown-in-angularjs.aspx
Any help would be appreciated.
I made a plunker with your code, everything seems to be setup right. I'd double check to make sure you're including jquery and bootstrap's javascripts. Other than that, I'd actually suggest using Angular UI's bootstrap directives. It makes things a whole lot easier.
Stack Overflow made me post code because I have a plunker link... it's weird.
<div class="form-group">
<div class="dropdown" style="position: absolute; left: 60px; top: 115px;">
<button class=" btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="true" aria-expanded="true">
Select an Office
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="office in offices"><a ng-click="moveMap(office.latitude, office.longitude)">{{office.name}}</a></li>
</ul>
</div>
</div>
One way is to use ng-model instead of ng-repeat if that is an acceptable solution for you. Something like this:
<select class="dropdown fullWidth" ng-model="ctrl.offices">
<option value="offices.Name"></option>
</select>
Could anyone give me an idee on how could I generate dynamically this piece od code:
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" runat="server">
<span class="caret"></span></button>
<ul class="dropdown-menu" id="testingPurposes">
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 1</span>
<asp:Image ID="Image1" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 2 </span>
<asp:Image ID="Image2" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
</ul>
</div>
The main idea of this code is to have some kind of dropdown list looking control that would have a span with text, and an image on each row.
This is basicly how my control shoud look when it's clicked:
Text1 img1
Text2 img2
If a user clicks TextN i get an event for that click, and i can update the page based on selected item.
If a user clicks imgN then TextN and imgN would disappear from the list.
I wanted to implement Bootstrap dropdown button in asp.net button
Here is Bootstrap Button
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Here i implement upto button but i don't know how to do the dropdown part
<asp:Button ID="btnMore" class="btn btn-danger dropdown-toggle"
data-toggle="dropdown" runat="server" Text="SMS" />
You can see this button in bootstrap Click Here
Two points you need to change.
The button action that make the post back and call your function on code behind and the link on the menu to do the same.
You only need to add the correct CssClass on the asp.net button for the first.
For the menu links you can use the LinkButton asp.net control with out any other settings (css style I mean)
And here is a working tested example:
<!-- Split button -->
<div class="btn-group">
<!-- here is the asp.net button to make post back -->
<asp:Button ID="Button1" runat="server" Text="Action" CssClass="btn btn-danger" />
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- here is the asp.net link button to make post back -->
<li><asp:LinkButton ID="LinkButton1" runat="server">Action</asp:LinkButton></li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
The second button that opens the menu is not need to be asp.net control, is just opens the menu, is not call any code behind function. So you left it as is.
I am developing a C# ASP.Net project. And I would like to do something very similar to what is shown in the following website.
However, that is a solution for the HTML <a> tag, and I am looking for a solution for ASP.NET buttons.
What are my options?
<asp:LinkButton /> is a good choice. It is virtually identical to <asp:Button />, except it creates a form enacting hyperlink that you can put any image in it that you want to.
I stress using LinkButton instead of ImageButton because ImageButton uses different event handlers, which makes it difficult to switch back and forth between them. With Linkbuttons and Buttons, they use the same event handlers, so it's rather easy to switch between them.
They are the same, you can do something like this:
<asp:Button ID="SearchButton" runat="server" CssClass="addButtonStyle" OnClick="SearchButton_Click"
Text="Go " Width="60px" />
some style:
.addButtonStyle {
border: 1px solid #e1ecfc;
background-color: #B9D1F4;
color: #003399;
background-image: url(partgrad.gif);
background-repeat: repeat-x;
}
Try this example
or view it here My Example Link
<!DOCTYPE html>
<html>
<head>
<title>Hello World | Button Config</title>
</head>
<body>
<div>
<h1>Working with Buttons</h1>
<p>Small, large, or medium size buttons can have css properties that you can benefit from rather that using images. Please look at the examples below</p>
<textarea>
<asp:button runat="server" id="helloWorld" CssClass="button" text=" --- See examples --- " />
</textarea>
<ol>
<li>
<input type="submit" class="button" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button" value="Short"/>
</li>
</ol>
<ol>
<li>
<input type="submit" class="button round" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button round" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button round" value="Short"/>
</li>
</ol>
<p>
In theory you always want the cleanest markup. So linkButtons on are NO GO! LinkButtons are Javascript based and can cause accessibility issues.
</p>
<h3>IE doesn't have my rounded corners?</h3>
<p>
Gotcha, lets do it without JS and lets use the images found from the link below. IE doesnt take advantage of some of the cooler CSS tricks we find in other browsers. - Shame on them! In the next example we simply wrap the asp:button with a span and then a b element.
</p>
<ol>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="This is a Long Button"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Search Now!"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Short"/>
</b>
</span>
</li>
</ol>
<textarea>
<span id="btn-wrap">
<b>
<asp:button runat="server" id="helloWorld" text=" --- See examples --- " />
</b>
</span>
</textarea>
<h3>Wrapping it up</h3>
<p>
In this demo, you've seen a single background image used as a repeating object to give us a gradient effect similar to the one found here http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
</p>
<style>
input[type="submit"], span, b {background:transparent none repeat scroll 0 0;border:0 none;display:inline-block;margin:0;padding:0;cursor:pointer;outline:none;} /* reset the button */
input.button {background:url(http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png) repeat-x; text-shadow:0 1px 1px #FFFFFF /* Just for looks */; padding:4px 5px;}
input.button:active {background:#FED58F;}
.round {-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}
/* http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png thank you hotmail for the image */
span#btn-wrap {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_span.gif) repeat-x scroll 0 0;}
span#btn-wrap b {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_a.gif) no-repeat scroll right 0;height:18px;padding:3px 10px;}
span#btn-wrap:active {background-position: 0 -24px;}
span#btn-wrap:active b {background-position: right -24px;}
li {margin:5px 0;}
textarea {background:#323232; color:white; padding:10px; width:900px; height:80px; overflow:hidden;}
</style>
</div>
</body>
</html>
Like the page says, this is the cleanest java Script less way to do it. This is accessible and browser friendly.