I have many rows in a grid, listing just two below. When I select a row and click on a drop down, then only it displays the drop down menu. I want to select the Account Open drop down item only where it is displayed. What is the Xpath that I can use to achieve this? I noticed that where it is displayed, the style says
style="top: 446px; display: block; left: 76px; right: auto;">;
where as the others says display: none.
I came up with the below, but want to have only one Xpath with all in.
driver.find_element_by_xpath("//div[not(contains(#style,'display:none'))]//name['colActionDropdownMenu']")
driver.find_elements_by_xpath('//*[contains(#id, 'AccountOpen')]')
HTML :
<ul name="colActionDropdownMenu" class="dropdown-menu action-dropdown-menu noselect" dropdown-menu="" role="menu" style="top: 446px; display: none; left: 76px; right: auto;">
<li role="menuitem" ng-repeat="action in grid.appScope.validActions">
Account Open
</li><li role="menuitem" ng-repeat="action in grid.appScope.validActions">
</ul>
<ul name="colActionDropdownMenu" class="dropdown-menu action-dropdown-menu noselect" dropdown-menu="" role="menu" style="top: 269px; display: block; left: 76px; right: auto;">
<li role="menuitem" ng-repeat="action in grid.appScope.validActions">
Account Open
</li><li role="menuitem" ng-repeat="action in grid.appScope.validActions">
</ul>
Use the following xpath
"//ul[#name='colActionDropdownMenu'][contains(#style,'display: block')]//a[#id='AccountOpen']"
You can remove the id part for the link if you want.
Related
I have an issue with the right alignment of the caret. Using .pull-right in the span makes it go to the top right corner.
How can I make it vertically centered again ?
I also would like to align the text to the left
http://www.bootply.com/r8x7g5Bw5R
<div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>test</li>
<li>tes2</li>
<li>test3</li>
</ul>
</div>
and the CSS
.cust-dropdown {
width: 200px;}
.caret {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #fff;
left: 90%;
top: 45%;
position: absolute;
}
Using position absolute and a percentage top and left I was able to right align my caret within the dropdown. Works in Chrome, IE, and FF.
EDIT
Previous code will work but changes the style of the caret. If you just want to reposition it maintaining its style, just extend Bootstrap's .caret class:
.caret {
position: absolute;
left: 90%;
top: 45%;
}
A much simpler solution exists for this problem. This style should look the most natural and be the most responsive to all usages as it does not depend on any predetermined layout (other than default bootstrap styles).
.dropdown > .btn > .caret {
float: right;
margin: 6px 0;
// if you are using Less, the you can reuse the actual vertical padding
// margin: #padding-base-vertical 0;
}
Just interchange the caret and span blocks in HTML:
HTML
<div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span id= "titl">test</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>test</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
CSS
.cust-dropdown {
width: 200px;
}
#titl {
padding-right: 10px;
}
You can align the text more to the left by adding more padding-right.
I am displaying some list of ids as follows
<li>
<label> Nest</label>
<select id="NestId" class="Select input-validation-error" name="NestId" data-val-required="Please select nest name." data-val-number="The field Nest ipId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestshipId" style="top: -69px; left: 202px; opacity: 0.8;">
</li>
The arrow of the ddl is working fine before showing the requirefield erorr msg.Once its shown, some part of it is shadowig over the ddl arrow.
so the arrow is not clickable through the erorr message
When I inspect the code through firebug, I could see the element like this
<li>
<label> Relation</label>
<select id="NestId" class="Select input-validation-error" name="NestId" data-val-required="Please select relation." data-val- number="The field NestId must be a number." data-val="true">
<span data-valmsg-for="NestId"></span>
<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
<div class="formError NestId" style="top: -69px; left: 202px; opacity: 0.8;">
<div class="formErrorContent">Please select relation.</div>
</div>
I think the arrow is not clickable because of the presence of field message over it.
Can anybody please help me to find a solution for this.
The message should be visible as well as the ddl arrow should work
You can also try setting the position of the error message to the left, in this case it will not be overlapping on the dropdown arrow.
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
position:relative;
left:20px;
}
I'm playing around with a simple website (I'm a beginner with HTML and CSS), where I made a simple menu with some submenus. The content of the page, mainly images and videos will be displayed in a scrollbox.
Now I thought that instead of creating different subpages, it'd be better to be able to jump down to the relevant content. I've tried out different solutions, but something's not working out - or at least, jsfiddle doesn't show it.
<div id="navigation">
<ul>
<li>
main menu
<ul>
<li>section 1</li>
<li>section 2</li>
<li>section 3</li>
</ul>
</li>
</ul>
</div>
that's my code for one part of the menu, here's the scrollbox with images:
<div class="scroll" style="float:left;border: 1px solid black; width: 40em;
height: 30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden;
text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff;
color: #ffffff;">
<img src="http://websiteurl.com/image.jpg" style="float: left; width: 95%;
padding: 3%; padding-right: 3%; display: block" alt="image1">
<a name="section1"><img src="http://websiteurl.com/image2.jpg"
style="float: left; width: 95%; padding: 3%; padding-right: 3%; alt="image2"></a></div>
So as you can see, I would like clicking on the menu link "section 1" cause to jump down the scrollbox to the desired image location without changing the page itself.
How would that be possible? or: where's the error in the anchoring? Thank you all for answers!
It's difficult reading the code with the inline css. I'd first suggest moving the css to a stylesheet, that would surely help readability and debugging.
Have you tested without the images or without the scroll box?
An anchor tag is normally just
Click Here
or if using images instead of links
<img scr="imageLocation"/>
and then the anchor part is
<a name="myAnchorName"></a>
So I currently have the logo sitting in the very left of the navbar, however I would like it in the middle. I have tried almost everything on these forums and on google searches and I can't seem to change it.
Here's the code for it:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<a class="brand" href="#">
<img alt="logo.png"src="img/logo.png" style="height:60px;>
</div>
Thanks,
Here is a sample which puts the logo in the middle of the toolbar: http://jsbin.com/efagoj/1/edit.
The only key changes you need to make is to give float: none; margin: 0 auto; to the a tag with .brand class. We add float: none; because in bootstrap .brand has a float: left; in it and we don't want it to be like that. margin: 0 auto; is to center the link.
We also need to add text-align: center; to the div with container-fluid.
So I have a button group with four buttons, third one has a drop-down menu, but I can't seem to align it center. The buttons are centered, but the drop-down menu aligns left. I have tried all sorts of css, but nothing has worked. Maybe somebody can help. :)
HTML:
<div class="btn-group">
Home
Link
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Linkk1</li>
<li>Linkk2</li>
<li>Linkk3</li>
</ul>
Link
</div>
Here's how I align button group center:
.btn-group {
margin: 0 auto;
text-align: center;
font-size:0 !important;
}
.btn-group a {
display:inline-block;
}
I have tried using the same method for drop-down menu, but with no luck. Please help.
Try wrapping the button group in a centered btn-toolbar container.
<div class="btn-toolbar">
<div class="btn-group">
...
</div>
</div>
.btn-toolbar {
text-align:center;
}
Working Example: http://jsfiddle.net/r26Zz/