I'm looking to sort a webpage from low price to high price by using the built-in product sort
I am able to successfully select the correct dropdown menu using xpath as follows:
WebDriverWait(driver, 5).until(
EC.element_to_be_clickable((By.XPATH,
'//*[#id="react-views-container"]/div/div/div/div[1]/div/div/div/div[2]/div[1]/div/div[2]/div/div[1]/button')))
This was intended only to be a test of sorts, as I am still relatively new to selenium. However, given this worked I cannot understand why the following does not:
WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.XPATH,
'//*[#id="react-views-container"]/div/div/div/div[1]/div/div/div/div[1]/div/div[1]/div/div[2]/div/div/div/div/div[4]')))
This results in an error whereby the timeout is reached. It is not an issue of the timeout being too short. I have tried the div search for the given text, but that also did not work. Here is one example of the search I tried which was nearly copied from a similar question:
Select(driver.find_element_by_xpath("//div[contains(text(), 'Unit Price: Low First')]"))
Here is the HTML for the desired menu item:
<div role="menuitem" tabindex="0" data-radium="true" style="background-color: rgb(247, 247, 247); padding: 8px 16px; font-size: 16px; font-weight: normal; color: white; white-space: nowrap; line-height: 20px; min-width: 260px; height: 36px; cursor: pointer;">
<div data-radium="true" style="float: left; display: block; line-height: 24px;">Unit Price: Low First</div>
</div>
Ok so that was a bit of a painful lesson in html and Selenium. Anyway, I figured it out by creating a list of all the menu items and then iterating through that list and clicking on the one I wanted. At the moment, I have this:
menu_items=driver.find_elements_by_xpath('//div[#role="menuitem"]')
for i in menu_items:
if "Unit Price" in i.text:
i.click()
break
For some reason I cannot just do menu_items[4].click(), but I believe it is due to the elements list being a list of tuples or something, though I will have to check the documentation to verify this. I will update the answer afterwards.
Related
Is there a way to fix the vertical layout of the PagerSettings when displayed at the bottom of a grid?
UPDATE: I am working on build 19.110.0013
I am trying to add numbers to the bottom of a grid using the PagerSettings tag described in the post Add page numbers to the bottom of Process Shipments grid. When I set the PagerVisible to bottom the numbers display vertical, but if I set the PagerVisible to top the numbers are properly displayed as horizontal.
<ActionBar PagerVisible="Bottom" DefaultAction="cmdItemDetails">
<PagerSettings Mode="Numeric" LinksCount="5" />
</ActionBar>
I could not reproduce that behavior in Acumatica version 19.106.0020 so I manually tweaked the CSS in order to reproduce that glitch.
Setting 'display: block' CSS property on GridPagerLink CSS class reproduces the same rendering.
In file '\App_Themes\Default\00_Controls.css' it is set as 'display: inline-block;'.
Inline option will make them stack horizontally so I don't have this glitch on my side.
Which exact Acumatica version are you running?
Use browser HTML inspect element feature to inspect the GridPagerLink.
Does it look like the default style below?
.GridPagerLink {
display: inline-block;
color: RGBA(0, 0, 0, 0.87);
text-decoration: none;
font-size: 15px;
font-weight: bold;
padding: 5px 10px;
height: 18px;
border: solid 1px transparent;
}
First of all, I'd like to apologize for the lack of a serviceable example of what my code looks like. Unfortunately it contains personal information to access a database that has been made available to my university, so I cannot post it. The link to the databse is here:
http://www.studiolegale.leggiditalia.it/#mode=home,__m=site.
Now, if you don't have a proper adblocker, you'll see that a spam popup window appears. I am building a scraper in python using Selenium, and the problem seems to be that I cannot find a way to close that window. I need to get rid of it for the purpose of my project, but I have no idea how. I tried creating an action chain to locate and click the 'X' button, but both the XPath and the ID of said button are dynamic.
I then noticed that the ID of the X button always contains 'close', so I tried writing something like
spamlist = browser.find_element_by_xpath('//div[contains(#id, "close")] ')
spamlist.click
but to no avail. It gives me no error but it doesn't close the window. I admit I am a bit of a beginner, but I really can't think of what I could be doing wrong. Is there something obvious that I am missing?
EDIT 1.1
I have been asked for the HTML code of 'close element' button. Here it is:
<div id="id70a13b6c7dclose70a13b6c7d" style="display: block !important; position: absolute !important; z-index: 10 !important; height: 70px !important; padding: 20px !important; margin-top: -20px !important; margin-left: -20px !important; box-sizing: border-box !important; left: 12px; right: auto; top: 12px; bottom: auto; transform: none; transform-origin: left top;"><div id="id70a13b6c7dclose-cross70a13b6c7d" style="display:block !important;height:30px !important;min-width:30px !important;background:#000 !important;border-radius:5px !important;border:2px solid #fff !important;white-space:nowrap !important;position:relative !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;"><div id="id70a13b6c7dcross-container70a13b6c7d" style="overflow:visible !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;"><div id="id70a13b6c7dcross70a13b6c7d" style="position:absolute !important;height:20px !important;width:20px !important;top:3px !important;left:3px !important;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAgMAAABiJsVCAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMAgGJiSVzhAAAAOElEQVQI12PQYGBqYNjLwP6AYb+D/AMG+Qv1DgzsX/8yMDD+/8LAwFB/AUxAuGAJsBKwYrA2sAEADzMWbZHdzhcAAAAASUVORK5CYII=) !important;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjcgMi43Yy0uNC0uNC0uNC0xIDAtMS40bC42LS42Yy40LS40IDEtLjQgMS40IDBMNyA1IDExLjMuN2MuNC0uNCAxLS40IDEuNCAwbC42LjZjLjQuNC40IDEgMCAxLjRMOSA3bDQuMyA0LjNjLjQuNC40IDEgMCAxLjRsLS42LjZjLS40LjQtMSAuNC0xLjQgMEw3IDlsLTQuMyA0LjNjLS40LjQtMSAuNC0xLjQgMGwtLjYtLjZjLS40LS40LS40LTEgMC0xLjRMNSA3IC43IDIuN3oiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==), linear-gradient(transparent, transparent) !important;background-size:20px !important;overflow:visible !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;"></div></div><div id="id70a13b6c7dcounter70a13b6c7d" style="display:none !important;text-align:center !important;position:absolute !important;min-height:30px !important;min-width:30px !important;color:#fff !important;font:small-caps bold 18px/30px courier new, sans-serif !important;overflow:visible !important;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;"></div></div></div>
Chances are there that the pop up is in iframe.
So you need to switch to the frame before closing the pop up.
Driver.SwitchTo().frame("frame xpath");
Driver.findElement("enter your xpath to close popup").click();
Driver.SwitchTo().defaultContent();
I am new to CSS and recently reading the specification and having some problems in understanding the vertical-align property.
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>
<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>
Above code creates 3 div, each of them contains 3 empty inline boxes (spans):
In the 1st div, everything seems fine. All the 3 spans are aligned to the baseline of the line box.
In the 2nd div, after I set the vertical-align property to top for the 3rd span, the first two spans are moved up. And I get lost from here, I don't understand why they will be moved up, according to what rule.
The 3rd div is even more wired to me. I set the vertical-align property to bottom for the 1st span, and it causes the 2nd span to move slightly lower than the 3rd span (this will be noticed when zoom in enough).
The thing I can find in the specification says below, but what exactly are the multiple solutions? Could anyone shed more light on this?
In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.
I've also created a fiddle. Please run it in Firefox or Chrome if you are interested.
vertical-align is mostly used for inline element for example img tag, which is commonly set to vertical-align: middle; inorder to align correctly within the text.
Demo (Without the use of vertical-align)
Demo 2 (Using vertical-align)
Ok, so that was a general idea of how vertical-align works with a value of middle.
So, first lets see what are the valid values for vertical-align property.
Credits : Mozilla Developer Network
Now, lets solve your doubt step by step..
In the first example, everything's fine according to you but the answer is no, you are applying line-height to the span which varies, but the fact is line-height is actually not applied as the way you think...
Line height is actually not getting applied
Make it inline-block and it will be applied
You can read this answer for more information, that why using line-height on span is useless.
Moving on to your second doubt, you are having line-height on first span, second span but not the third span so what's happening here? As span is inline with the text and anyways line-height won't play the role there as I previously explained, they are happily aligned vertically with the text, whereas when you use vertical-align: top;, it doesn't move the other two boxes above that, instead it aligns to the top of the text.
See how the vertical-align: top; aligns at the top of the text
Coming to the last example of yours, in here, first span element is aligned to the very bottom as expected, well its correct, moving on to second, you said it's slightly in the lower than the third, because it is not aligned at all, line-height is what it makes that element align vertically center and last, moves a bit to the top, which is infact aligned to the top.
Lets make them inline-block and see how they actually behave..
So I hope you got the difference between all the three examples, but its necessary for you to understand the line-height property and inline-block property as well, also don't forget to refer the answer I shared.
I've been trying Masonry but can't get it to work exactly as I wanted. The elements I use vary in width and height, but all fit in a grid (4 different sizes, all multiple of smallest+margins). I've also calculated a distribution of elements (7 of the smallest, 4 of all the others) that can fit precisely.
However it's rare that masonry manages to fit them neatly, sometimes there's one lurking at the bottom, sometimes several are misplaced. It's always so that in one view I can see what items need to be moved for it to fit.
Is there a way to make masonry more aggressive in moving elements? Or have it go over two times to make sure there are no empty spaces?
You should probably look at masonry's "big brother" Isotope here. Mind you, if you have elements that are sorted in a certain order or fixed in a certain order - and that are wider than a single column width - they can "block" a column at narrow browser widths.
EDIT Maybe this fiddle explains it a bit better. If you look at that one and - while observing the numbers in the divs - you see that the next masonry element up (the red element 5) can not possibly fit in the white square as it must come after element 4; so where it must end up means, that, with only three rows fitting, one gets a white gap. Maybe you can use Isotope's shuffle and/or reLayout methods and sacrifice ordering your elements in a strict order? Best would be a jsfiddle with your issue.
<article>
<div class="tile blue"><p>1</p></div>
<div class="tile black"><p>2</p></div>
<div class="tile tall yellow"><p>3</p></div>
<div class="tile grey"><p>4</p></div>
<div class="tile wide red"><p>5</p></div>
<div class="tile green"><p>6</p></div>
<div class="tile grey"><p>7</p></div>
<div class="tile blue"><p>8</p></div>
<div class="tile green"><p>9</p></div>
</article>
$('article').isotope({
itemSelector : '.tile',
masonry: {
columnWidth: 100
}
});
article .tile {
display: block;
float: left;
box-sizing: border-box;
width: 100px;
height: 100px;
font-size: 3em;
font-weight: 700;
padding: 0 6px;
color: #fff;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
border:1px dotted black;
}
article .tile.wide {
width: 200px;
}
article .tile.tall {
height: 200px;
}
.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }
To expand on Dan's answer, having just had this problem myself, it seems that Packery is a more up to date; much more maintained version of Masonry - from the same author. It's not clear to me why both projects exist as separate entities, with only typos fixed in the latter.
The good news is - it's almost totally a drop-in replacement. The only change I had to make (other than names masonry->packery where used) was to remove an option, because it is the default and only option in Packery.
That was isFitWidth: true, my feeble attempt to make Masonry pack things something close to how nicely Packery does without any options at all.
Another nice change with Packery is that gutter: x applies to vertical as well as horizontal gutters. In Masonry, this was horizontal only - though trivial with margin-bottom in CSS, this felt like a needless hack.
I have a div with some inner content that I need to have an ellipsis when it overflows. I've done this many times on other elements but for some reason this is not behaving as expected.
Also, I left white-space:nowrap; out on purpose because the content then does not break to the next line within the span, as a result I only see 2-3 words before the ellipsis starts. I would like the text to span the entire height of the parent container then have the ellipsis start for content that exists beyond those bounds.
Here is a working Demo: http://jsfiddle.net/sadmicrowave/DhkSA/
CSS:
.flow-element{
position:absolute;
font-size:12px;
text-align:center;
width:75px;
height:75px;
line-height:70px;
border:1px solid #ccc;
}
.flow-element .inner{
position:absolute;
width:80%;
height:80%;
border:1px solid blue;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
text-align:center;
}
.flow-element .long{
float:left;
height:50px;
width:100%;
line-height:12px;
border:1px solid red;
text-overflow:ellipsis;
overflow:hidden;
}
HTML:
<a class='flow-element' style='top:100px; left:50px;'>
<div class='inner'>
<span class='long'>Box 1 and some other content that should wrap and do some other stuff</span>
</div>
</a>
Can someone please help. I need to display as much text as possible within the red outlined span while having an ellipsis when text content overflows the container...
Thanks in advance
you can't apply text-overflow: ellipsis to inline elements (span), it can be used with block elements only (div)
and also use white-space:nowrap; when using text-overflow: ellipsis;
check this, i have converted your inner span to div, just for proof of concept
http://jsfiddle.net/3CgcH/5/
i don't know why you have used span, but as per your logic you can make changes as i suggested
Update:
someone will think that in the question if i put white-space: nowrap; to span element then the text-overflow: ellipsis: is working so may be i am wrong, but it is not the case because questioner has used float: left in the span tag that means the span tag will be converted to a box block and work like a normal block level element, which is also wrong thing to do because if you need the block element behavior then use a block level element
Reference:
http://www.w3.org/TR/CSS2/visuren.html#propdef-float
http://dev.w3.org/csswg/css3-ui/#text-overflow
Add this:
white-space:nowrap;
to .flow-element .long
then the overflow-ellispsis works.
I think you will find the problem is caused by having text-align: center;
In my case it helped to set display: block;
Add white-space:nowrap; to your .inner div.