I use Font Awesome icons (Version 6 Free) in a project
I want to place two Font Awesome icons, for example an A and a 1 next to each other in a unordered list. I use this HTML code:
<ul class="fa-ul">
<li><i class="fa-li fa-solid fa-a"></i><i class="fa-li fa-solid fa-1"></i>List item</li>
</ul>
However, using this code the two icons are placed on top of each other. I know how you can stack icons, but not how to place them next to each other. Any pointers to set me in the right direction?
<ul class="fa-ul">
<li>
<span class="fa-li">
<i class="fa-solid fa-a" data-fa-transform="left-10"></i>
<i class="fa-solid fa-1" data-fa-transform="right-10"></i>
</span>
List item
</li>
</ul>
Related
<div class="vehicle-item__main-content">
<div class=class="vehicle-item_summary-container">
<ul class="vehicle-item__attributes">
<li class="vehicle-item__attribute-item">
<i class="icon icon-specs-transmission-gray"></i>
"Manual"
</li>
<li class="vehicle-item__attribute-item">
<i class="icon icon-specs-passenger-gray">
"4 People"
</li>
I have a webscraper andI would like to catch the following texts, 'Manual' and '4 People'. The website has many more class="vehicle-item__attribute-item" which I dont need. How can I get access to the text ? Maybe by using the help of the i class (class="icon icon-specs-transmission-gray")
transmission = driver.find_elements_by_xpath('//li[#class="vehicle-item__attribute-item"]')
transmissionlist = []
for trans in transmission:
print(trans.text)
transmissionlist.append(trans.text)
With this I am getting all 100+ items from the website, but I only need the above 2 car properties.
Instead of
'//li[#class="vehicle-item__attribute-item"]'
try
'//li[i[contains(#class, "icon-specs-transmission-gray")]]'
'//li[i[contains(#class, "icon-specs-passenger-gray")]]'
transmission = driver.find_element_by_xpath('//li[i[contains(#class, "icon-specs-transmission-gray")]]').text
passengers = driver.find_element_by_xpath('//li[i[contains(#class, "icon-specs-passenger-gray")]]').text
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 am trying to select an item from a dropdown list in robot framework (using RIDE), but I cannot get the item by variable name.
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result" data-option-array-index="0">Geen optie gekozen</li>
<li class="active-result" data-option-array-index="2">ABB</li>
<li class="active-result" data-option-array-index="3">Algem</li>
<li class="active-result" data-option-array-index="4">AOV</li>
<li class="active-result" data-option-array-index="5">AW</li>
<li class="active-result" data-option-array-index="8">AOZ</li>
</ul>
</div>
I can use this and get the result:
Click Element xpath=//*[#id="KEUZE_N_MiddelId_N1010D_chosen"]
Click Element xpath=//*
[#id="KEUZE_N_MiddelId_N1010D_chosen"]/div/ul/li[4]
But the index number can change, so I want to click the element based on the value, in this example 'ABB'. How can I achieve this?
You can Try the following:
Select From List By Label| css=ul.chosen-results| ABB
It is very similar to this SO post but not exact enough to be considered a duplicate. Based on your already achieved results I think this should work for you.
[#id="KEUZE_N_MiddelId_N1010D_chosen"]/div/ul/li[text() = 'ABB']
I want to Select all the LI elements which contain SPAN with id="liveDeal152_dealPrice" as descendents. How do i do this with xpath?
Here is a sample html
<ul>
<li id="liveDeal_152">
<p class="price">
<em>|
<span class="WebRupee">₹ </span>
<span id="liveDeal152_dealPrice">495 </span>
</p>
</li>
<li id="liveDeal_152">
<p class="price">
<em>|
<span class="WebRupee">₹ </span>
(price hidden)
</p>
</li>
</ul>
//li[.//span[#id = 'liveDeal152_dealPrice']] should do. Or more verbose but closer to your textual description //li[descendant::span[#id = 'liveDeal152_dealPrice']].
Use this
//li[.//span[#id="liveDeal152_dealPrice"]]
It selects
ALL <li> ELEMENTS
//li[ ]
THAT HAVE A <span> DESCENDANT
.//span[ ]
WITH id ATTRIBUTE EQUAL TO "liveDeal152_dealPrice"
#id="liveDeal152_dealPrice"
That said, it doesn't seem like a very wise element selection, mostly due to the dynamically looking id. If you're going to use it once, it's probably ok, but if you're using it, say, for testing and will reuse it many times, it might cause trouble. Are you sure this won't change when you change your website and/or database?
As a side note:
ul stands for "unordered list"
ol stands for "ordered list"
li stands for "list item"
<div id="suggestionlist">
<ol id="suggestionroot">
<li id="sugg_1">
<li id="sugg_2">
<li id="sugg_3">
<li id="sugg_4">
<li id="sugg_5">
<li id="sugg_6">
<li id="sugg_7">
<li id="sugg_8">
<li id="sugg_9">
<li id="sugg_10">
I have a search look ahead feature which I'm trying to automate. I'm trying to pick the 6th option in the list every time but I just can't seem to locate it! This is the nearest I've got but it's not working..
#Browser.div(:id, "suggestionlist").link(:index, 6).click
You should do some reading about HTML. <li> tag is not link, <a> tag is link.
So, to click <li id="sugg_6"> try this:
browser.li(:id => "sugg_6").click
To click a link inside the list item (not shown in your HTML but referenced in comments)
browser.li(:id => "sugg_6").link.click
(that presumes you want to click the first/only link inside the LI, otherwise you might need to specify an index value)
Did you try to access this element by XPath?
browser.find_elements_by_xpath("div[#id='suggestionlist'/li[6]").click