<div class="accrd-row">
<h3 class="ui-helper-reset ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="icon icon-ki-act-panda"></span>Outdoor Activities</h3>
<div class="accrd-detail ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true" style="display: none;">Need to grab this text here</div>
</div>
I am trying to grab the text:
Need to grab this text here
Based on that the span above has the word "panda" in it. I know it is something like:
//span/#class[contains(.,'panda')]/following-sibling::a/div
But I cannot seem to get this to pick up the text.
You need to go back to the parent of span since the div you are looking for is a sibling of h3 not span.
There is probably a nicer way to do it but this is working for me to get the div element you need:
//h3//span[contains(#class, 'panda')]/parent::h3/following-sibling::div
Related
As already asked here, i need to add dropdown into the table element which has scroll to x-direction (horizontal scroll) and in the last column there is one three dot icon where I need to add dropdown element. But dropdown menu always clips inside the table which is not good user experience.
As per the, Bootstrap doc, there is option named boundary but I am not getting how this boundary option works or even don;t know whether it entirely works or not and how.
If i remove relative position from dropdown parent which is with class dropdown and also remove from all the ancestors which is not static then I am getting correct behavior. I don;t feel it's the correct way to remove position relative only for getting this dropdown-menu out of container.
Is this the only solution or the boundary makes sense? I am not getting how popperconfig works and how should I use boundary aka data-bs-boundary?
In earlier version of bootstrap, with some code tweak, I used to get entire dropdown all the way at the end of the body element but not sure with this.
So here there are multiple things to consider when dropdown actually clips under the overflow parent/one of the ancestor parents(grand, great-grand and so on...)
We can apply position static to all parent/s to apply as a quick fix this without any javascript extra code when there are no css transformations/opacity (or any other property which creates stacking context) applied on any of them. But this is not helpful when any third party library adds many other elements in between.
We also need to consider the case when there is transform property applied to the parent/s because transform also creates a new stacking context even for the fixed position element. So in that case we have to move the dropdown menu out of the container. This question's answer discuss more on it.
Considering that there are multiple dropdowns with id's like myPopperDropdown-1, 2 etc.. which all are clipped under overflow hidden on one of the parent/s, we can do something like this.
$("[id*='myPopperDropdown-']").each(function(el,index) {
var parent, dropdownMenu, left, top;
$(this).on('show.bs.dropdown',function(){
parent = $(this).parent();
dropdownMenu = $(this).find('.dropdown-menu');
left = dropdownMenu.offset().left - $(window).scrollLeft();
top = dropdownMenu.offset().top - $(window).scrollLeft();
$('body').append(dropdownMenu.css({
position:'fixed',
left: left,
top: top
}).detach());
})
$(this).on('hidden.bs.dropdown',function(){
$(this).append(dropdownMenu.css({
position:'absolute', left:false, top:false
}).detach());
})
})
body {margin: 10px !important}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-body bg-light overflow-hidden">
<div class="bs-dropdown-1">
<div class="dropdown" id="myPopperDropdown-1">
<a class="btn btn-primary dropdown-toggle" role="button" href="javascript:void(0)" aria-expanded="false" data-bs-toggle="dropdown">Dropdown-1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body bg-light overflow-hidden mt-3">
<div class="bs-dropdown-2">
<div class="dropdown" id="myPopperDropdown-2">
<a class="btn btn-primary dropdown-toggle" role="button" href="javascript:void(0)" aria-expanded="false" data-bs-toggle="dropdown">Dropdown-2</a>
<ul class="dropdown-menu" style="position: absolute;">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul></div>
</div>
</div>
</div>
As of now not found any other better solution than this and even changing in popperConfig also not working due to restrictions applied even on fixed positioning.
Original answer was at Bootstrap dropdown clipped by overflow:hidden container, how to change the container?. which is somewhat modified here.
I want to check the checkbox based on the value in the text input labeled 'Field' I have tried the following:
<tr>
<td>check</td>
<td>/label[text()="Field"]/../input[#value="6 1012 49817"]/preceding-sibling::label[text()="Private"]/../input</td>
<td></td>
</tr>
Here is the HTML:
<div class="wdg colShwHdeCls" id="divFormFieldPrivate-0" style="width: 82px;">
<input id="FormFieldPrivate-0" name="FormFieldPrivate-0" title="" style="" class="wdg colShwHdeCls" type="checkbox">
<label for="FormFieldPrivate-0">Private</label>
</div>
<div class="csLineBreak"> </div>
<div class="acI fldWd100 wdg colShwHdeOpn" id="divFormFieldId-0"><label for="FormFieldId-0">Field<a class="aut" title="Show selection list"></a>
<a style="display: inline-block; opacity: 0.0118143;" href="field/view?FieldId=" title="View this Field" class="acOptVw acLb acI"></a>
<a style="display: inline-block; opacity: 0.0118143;" href="field/edit?FieldId=" class="acEd acLb acI" title="Edit this Field"></a>
<a style="display: inline-block; opacity: 0.0118143;" href="field/add?FieldId=" class="acAd lightbox acI" title="Add a new Field"></a>
</label>
<br>
<span style="display:none;" id="FormFieldId-0-Old">6 1012 49817</span>
<input id="FormFieldId-0" name="FormFieldId-0" value="11955" type="hidden">
<input autocomplete="off" id="FormFieldId-0-Dsp" title="type three or more characters to see selection list" class="wdg csAutCpl csAutCplFld ui-autocomplete-input" value="6 1012 49817" type="text">
<span class="ui-helper-hidden-accessible" aria-live="polite" role="status"></span>
</div>
Suggestions are welcome thanks ;-)
This is one possible way. First part of the XPath supposed to find the div element containing label with certain text ("Field" in this case) and input with certain value attribute :
//div[label[normalize-space(text())="Field"] and input[#value="6 1012 49817"]]
From the above div, find preceding sibling div containing label with text equals "Private", then get the input child element of that div :
/preceding-sibling::div[label[text()="Private"]]/input
So the entire XPath will look about like this :
//div[label[normalize-space(text())="Field"] and input[#value="6 1012 49817"]]/preceding-sibling::div[label[text()="Private"]]/input
xpathtester.com demo
I have a webpage with list of pages:
<div class="pager">
<span class="current_page">1</span>
<span class="page" samo:page="2">2</span>
<span class="page" samo:page="3">3</span>
<span class="page" samo:page="4">4</span>
<span class="page" samo:page="5">5</span>
<span class="page" samo:page="6">6</span>
<span class="page" samo:page="7">7</span>
<span class="page" samo:page="8">8</span>
<span class="page" samo:page="9">9</span>
<span class="page" samo:page="10">10</span>
<span class="page" samo:page="11">11</span>
</div>
How can I click on the span using mechanize?
According to this ASCIIcasts you can perform searches and findings:
There are two methods on the page object that we can use to extract
elements from a page using Nokogiri. The first of these is called at
and will return a single element that matches a selector.
agent.page.at(".edit_item")
The second method is search. This is similar, but returns an array of
all of the elements that match.
agent.page.search(".edit_item")
http://asciicasts.com/episodes/191-mechanize
So doing something like:
agent.page.at(".page")
Will return the array of spans. And then you will be able to work with them and just do the #click action.
EDITED:
As long as the span is a non interactive element, and click is a Link action, you will have to find a workaround:
How to click link in Mechanize and Nokogiri?
In our application, there is a situation where there is a grid on two pages. I want to get text of columns from the grids. But both grid's column text has little different HTML.
Page 1 grid HTML:
<div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 598px; height: 30px;">
<div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-header-row="" style="height: 30px;">
<div class="ngHeaderCell ng-scope col0 colt0" ng-class="col.colIndex()" ng-repeat="col in renderedColumns" ng-style="{ height: col.headerRowHeight }" style="height: 30px;">
<div class="ngVerticalBar ngVerticalBarVisible" ng-class="{ ngVerticalBarVisible: !$last }" ng-style="{height: col.headerRowHeight}" style="height: 30px;"> </div>
<div ng-header-cell="">
<div class="ngHeaderSortColumn " ng-class="{ 'ngSorted': !col.noSortVisible() }" ng-style="{'cursor': col.cursor}" style="cursor: pointer;" draggable="true">
<div class="ngHeaderText ng-binding colt0" ng-class="'colt' + col.index" ng-click="col.sort($event)">Request ID</div>
For this, I've written xpath //div[#class='ngHeaderContainer']//div[#ng-header-cell='']//div[contains(#class,'ngHeaderText')]
Page 2 grid HTML
<div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 598px; height: 30px;">
<div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-header-row="" style="height: 30px;">
<div class="ngHeaderCell ng-scope col0 colt0" ng-class="col.colIndex()" ng-repeat="col in renderedColumns" ng-style="{ height: col.headerRowHeight }" style="height: 30px;">
<div class="ngVerticalBar ngVerticalBarVisible" ng-class="{ ngVerticalBarVisible: !$last }" ng-style="{height: col.headerRowHeight}" style="height: 30px;"> </div>
<div ng-header-cell="">
<div class="ng-scope ng-binding" ng-click="onColumnClick( 3, 'select', $event)">
Request ID
<img class="" ng-click="onColumnClick( 3, 'delete', $event)" src="styles/images/common/delete.png" ng-show="true">
<img>
</div>
For this, I've written xpath //div[#class='ngHeaderContainer']//div[#ng-header-cell='']/div
For grid, I've written a class and in that class I've method which returns column names. Since, xpath till reach to column name is different for grid on two different pages, I won't be able to use same method.
Can someone please help me to get xpath which can be used to return column names of the grid of both the pages?
This xpath will do it hopefully. I ran into similiar issue. Took help from here. This should return you both elements
//*[contains(#class, 'ng-binding')]
Is there a way to set the panel bar to a specific height (ie. 300px), and make that specific section scrollable if it's too long?
Assuming that you have your panelbar defined as a ul, something like:
<ul id="panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">My Teammates</span>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/robert.jpg" alt="Robert King">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
</li>
<li>
Projects
...
</li>
</ul>
You should define a CSS style as:
#panelbar {
height: 300px;
overflow-y: scroll;
}
See an example here: http://trykendoui.telerik.com/#OnaBai/ifus
The solution above scrolls the entire control. Here's how to scroll the panel's items.
Click here for the Dojo example