In the following code, I have two <div> tags that display different colored columns, one red, one green:
<html>
<body>
<style>
html, body {
height: 100%;
}
#red {
width:50%;
background: #f00;
height: 100%;
}
#green {
width: 250px;
background: #0f0;
height: 100%;
}
</style>
<div id="red">
</div>
<div id="green">
</div>
</body>
</html>
When it is displayed, the red div tag completely covers the green div tag due to the percentage width of the red area being greater than the pixel width of the green. (You can see this on JFiddle)
The problem I'm having is that in Selenium, I can't find a way to programmatically verify whether or not the green div is visible to the user. Trying greenDivWebElement.isDisplayed() returns true with the above code, despite the fact that the user cannot see it.
I did discover that doing greenDivWebElement.click() does reveal that the green div is not visible as the following error is thrown:
org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (133, 361). Other element would receive the click: <div id="red">...</div>
However, this solution won't work for me in the real world because the sort of things I want to check the visibility of do something when clicked and while I want to make sure that they are visible to the user, I don't want for them to be clicked.
So how can I check if a WebElement is visible to the user if it is covered due to CSS?
I ran into a similar requirement recently. I do not have the complete solution implemented yet but at a high level these are the steps I am taking. To verify element A is not overlapped by any other element
Get the element in question, bind the click() event of the element to a function that does nothing.
Click on 9 points of the element - center; top: left, center, right; middle: left, right; bottom: left, center, right. Selenium clicks on an element at the center point by default. The other points can be calculated by DOM positioning of the element and then moving to the respective points.
Wrap the call block in step 2 in a try/catch to check for Element not clickable... exception.
If an exception is thrown, element is overlapped by another at one of the click points.
The challenge here is definitely the bind/unbind of the click event. For my particular case it is straight forward using JQuery to achieve the binding.
One other way I initially thought of handling the click problem is to disable Javascript in the driver before running the test. But of course this approach will only work if there is no JS trickery involved in rendering page elements.
Part two of the challenge is the granularity of the click points. 8 points along the edges usually works but if there is overlap outside of the click points then the number of click points has to be bumped up.
Related
Slimbox is working perfectly for me with one exception... my slideshows often open way to low. The positioning is effected by any scrolling already done on the page. Every time the page is scrolled a bit, the slideshow opens lower than it had previously for the same page. Scroll down the page much and the show can be completely out of sight.
lbCenter and lbBottomContainer in the CSS control the positioning, but I can't find how to adjust them accurately. The default is:
#lbCenter,
#lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
In an old thread here, I found suggestion for adding:
top: 30px !important;
As long as !important is included, this does work but with a significant caveat; the caption is moved from below to above the image and covers some of it. ( And !Important doesn't seem like an ideal solution )
How can I adjust the positioning of both while keeping the caption below the image?
This one was on me. My links included href="#" as some others required. The # caused the page to scroll to the top even as the slide show opened where the link was located.
<a href="#" onclick="show('homes')">
Eliminating the hash tag resolved it.
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
I am using Pelican for generation of web pages. However I cannot avoid overlapping of code blacks with the menu list this way.
This the concerned code piece
General
Start by reading
The Zen of Python <https://www.python.org/dev/peps/pep-0020/>_
.. sourcecode:: python
import this
For python we have pocket-lint that checks for PEP8 and some other things.
Try the following:
#general .highlight {
display: flex;
}
#general .highlight pre {
width: 100%;
}
The display mode flex allows the contents to rearrange in size and position. By setting this, the bounding box of the surrounding div is pushed to the right, such that background color and border are not overlapping anymore. However, due to the flexible nature of this display mode, the width of the content is reduced to the minimum required. This can be compensated by simply maximizing the width of the element.
I am having trouble trying to get a jquery ui tab panel's height to grow with floating divs within the panel.
the divs have specific data returning to these divs and I need them to float left and right to save ui real estate.
Does anyone know how i can fix this?
Actually, this is a well-known css issue. A discussion is here:
http://www.quirksmode.org/css/clearing.html
To summarize the article, any <divs> that you wish to function as both a tab pane and a float container should have these styles added to them either in your <style> or css <link> files:
overflow: auto;
width: 100%
This isn't a bug. It's intentional. The floating div literally lifts out of the container, and the container will not be aware of the floating div. At least, that was the goal.
You should do a search on here for "clearing floats" or other related css rules, because using the above will cause issues with certain browsers (in short: 'take care to test this, all the same').
So i am looking to do something like what the apple inspector tool does, but with CSS for a project i am working on.
So, the idea is on a certain page of the site, the site is shaded out (much like a lightbox or thickbox) but certain Divs, & other elements are still visible. This is similar to what Safari does when you inspect an element. It blacks out the rest of the page, apart from that element.
So, any idea?
Cheers!
J
In working with Dojo Javascript widgets, it implements modal dialogs by having one large element be hidden (display:none; background-color:#000; opacity:0.5;) most of the time, though positioned to cover the screen (position:absolute; top:0; left:0; and width and height set by Javascript to the full window size). Then it is given a z-index value and all elements that are intended to be visible are given a z-index above it. If you can relative-ly or absolute-ly position all the elements you want to highlight, this method would work for you.
With just CSS? If so, the best I could come up with is this:
<style>
a:hover *:not(#except)
{
background:green;
}
</style>
<a href="#">
Link
<p>
green
</p>
<p id="except">
black
</p>
</p>
Unfortunately the :not() selector is part of CSS3 and most browsers do not yet support it (but Safari 4 does).
That is one possibility, but not so nice.
Another option would be with Javascript. If you are only working with rectangular block elements how about getting the x and y value of the element to stay normal, then cutting out four pieces (up, down, left, right) of that element. Absolutely position some divs whose background is some semi-transparent PNG.
ie.
------------------
|lef|---up---|rig|
|t--|________|ht-|
|---| normal |---|
|---|________|---|
|---|-down---|---|
------------------