On the portfolio section of my site I have a ul of image screenshots of sites I have made. The main div is set to min-width: 700px and views fine in a web browsers. However on mobile/tablet the last img in the ul does not move to a new line and is instead cut off.
Can someone please advise on the best css rule to apply or if I should restructure the ul completely.
View the issue here: portfolio
Remove the white-space: nowrap property for #container1, #container2, #container3, #container4.
The images do not move to the next line because of nowrap.
Related
I have created a simple grid with one column:
public MyGrid() {
addComponentColumn(this::getIcon).setClassNameGenerator(i -> "icon-img");
setItems(/** some items */);
setClassName("sidebar-grid");
}
And I have a css theme called mangaTheme. I use it like this #Theme("mangaTheme"). In the mangaTheme folder I have styles.css file with the following content:
.icon-img {
padding: 0;
}
.sidebar-grid {
width: 102px;
margin: auto;
margin-left: -30%;
}
The sidebar-grid css properties are applied properly as the grid is moved, but the icon-img properties are not applied whatsoever:
The classnames are applied:
What am I doing wrong or missing? I have also read this guide: https://cookbook.vaadin.com/dynamic-grid-cell-styling
EDIT: After configuring my workspace as was mentioned in the answer this is the resulting structure, but it still does not seem to function properly.
What you're missing is that the cell <td> element is inside the shadow DOM of the vaadin-grid component, and thus cannot be styled with global CSS. To style parts of components that are inside the component's shadow DOM, you need to inject the CSS into the component.
In the Cookbook example, this is done through the themeFor parameter in the annotation that loads the stylesheet:
#CssImport(themeFor = "vaadin-grid", value = "./recipe/dynamicgridcellstyling/dynamic-grid-cell-styling.css")
In your theme folder, however, you can do the same thing by putting that CSS in a stylesheet called vaadin-grid.css in the components subfolder, i.e.:
themes/mangaTheme/components/vaadin-grid.css
Another thing you're missing is that the classname is applied to the <td> cell, but the padding is on the vaadin-grid-cell-content element slotted into the cell, not the cell itself, so you need to rewrite your selector:
.icon-img ::slotted(vaadin-grid-cell-content) {
padding: 0;
}
(The sidebar-grid CSS class works fine as-is because it's applied to the vaadin-grid root element, which is in the page's regular DOM.)
I am learning to automate procress in a website. I chose http://logos.iti.gr/logos/ as a website to automate. I am facing a problem when uploading the image file using the upload an image button because this button when clicked seems to convert into a text field.
The other tutorials I followed get the id of the text field and use sendkeys to send the path because they do have separate text field and upload button key.
Here is the code that I tried :
driver.get("http://logos.iti.gr/logos/");
driver.findElement(By.id("fileToUpload")).clear();
System.out.println("Cleared");
driver.findElement(By.id("fileToUpload")).sendKeys("/home/test.jpg");
I don't know what the problem is. It just get IPDL protocol error: Handler returned error code!
org.openqa.selenium.ElementNotInteractableException: Element <input id="fileToUpload" class="input_file" name="fileToUpload" type="file"> could not be scrolled into view
Build info: version: '3.141.5', revision: 'd54ebd709a', time: '2018-11-06T11:42:16'
You get ElementNotInteractableException - it is thrown to indicate that although an element is present on the DOM, it is not in a state that can be interacted with. In your case it happens because the element has style display:none. Basically, selenium (and real users as well) can't interact with non-visible elements. You need to make element visible at the frist place and then continue.
driver.get("http://logos.iti.gr/logos/");
WebElement el = driver.findElement(By.id("fileToUpload"));
System.out.println("Making element visible");
((JavascriptExecutor)driver).executeScript("arguments[0].style.display = 'block';", el);
el.clear();
System.out.println("Cleared");
el.sendKeys("/home/test.jpg");
By the way here is the default element style (you can see it in browser dev tools). Pay attention to display:none. When you change the value to block don't be confused that you actually don't see any changes on a screen because element's width and height are very small.
.input_file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
display: none;
}
Try updating your client and Firefox. Hopefully that should solve this issue.
I have never faced any issue with file uploads until the webpage mandates the dialog box while clicking the image upload. I am using latest version of ChromeDriver and Chrome.
If possible, you too switch to ChromeDriver since I find the pair working seamlessly together in my experience! :)
I am having a problem in clicking the link text given inside a span tag.
html code :
<div id="menu" style="width: 1752px;">
<div class="dd_menu" dd_event_id="dd_event_2">
<a class="dd_menu_menu_entry dd_menu_entry_clickable" href="javascript:void(0);" style="left: 3px; width: 111px;" dd_menu_id="0">
<a class="dd_menu_entry dd_menu_entry_clickable" href="javascript:void(0);" style="left: 114px; width: 131px;" dd_menu_id="1">
<span class="text" style="background-color: rgba(0, 0, 0, 0);">FirstMenu</span>
I need to click on the text 'FirstMenu' .
I have used the xpath : .//*[#id='menu']/div/a[2]/span
It does not seem to work. How do I fix it?
If your requirement is to "click on the link FirstMenu", then you should use that as the locator. No need to mess around with XPath.
driver.findElement(By.partialLinkText("FirstMenu")).click();
The .partialLinkText() locator strategy should account for any extra whitespace padding due to the extra span element.
Your xPath returns span element so you're clicking that span. To make your xpath return a link ament your query to the following:
//*[#id='menu']/div/a[span]
This query returns a "link" that has span element as a child.
Try to use below xpath :-
//span[contains(.,'FirstMenu')]
If it doesn't work then there may be any frame present. You need to switch it on first.
Please let me know if there is more element with name FirstMenu on DOM
Hope it will help you :)
The problem got solved by using the same xpath i specified above with the usual syntax driver.findElement(By.xpath("//*[#id='menu']/div/a[2]/span")).click(); after i gave the order by which testcases have to be executed and using #Test(priority=something) and giving some implicit waits.
Thank you all for the suggestions.
regards,
roma
It is not good to use xpath. If the html of the page is changed your code would stop working. Try with css selector.
This is is simple code and you can modify it for you case:
var collection = driver.getelementsBy(By.cssSelector('div#menu div'))
It should return you collection with elements
And after that you can iterate through collection and find the element you want to click.
Hope the answer helps you.
Taking this instagram link for eg. https://www.instagram.com/janelaverdegarden/, I want to load all the images by scrolling to the bottom of the page. To do that, I have to click LOAD MORE button, scroll down to bottom page, wait for page to load, scroll up abit, and scroll down to bottom page and wait for page to load again till no more images are left (manually).
However, I want to load the page automatically using Selenium. Thus, initially, I thought that once the page is fully loaded to the end of the page with all the images, the web element rbSensor will disappear, allowing me to mark that the page has reached the bottom with no more images to be loaded. However, it still remains there. So is there any other way to check if the page is fully loaded with all the images?
<div data-reactid=".0.1.0.1:$mostRecentSection/=10">
<div class="_nljxa" data-reactid=".0.1.0.1:$mostRecentSection/=10.0">
<div class="ResponsiveBlock" data-reactid=".0.1.0.1:$mostRecentSection/=10.1">
<div class="rbSensor" data-reactid=".0.1.0.1:$mostRecentSection/=10.1.$sensor">
<iframe class="rbSensorFrame" data-reactid=".0.1.0.1:$mostRecentSection/=10.1.$sensor.0"/>
</div>
</div>
</div>
Code. As I used rbSensor to load the page, even if the page is fully loaded with all the images, the element will still be clicked continuously as the element is still in the html.
while (driver.findElements(By.className("rbSensor")).size() > 0) {
jse.executeScript("window.scrollTo(0,-300)"); //scroll up abit
//click on button if found
driver.findElement(By.className("rbSensor")).click();
Thread.sleep(2000); //pause for 2 seconds
}
Using the answer below in Page scroll up or down in Selenium WebDriver (Selenium 2) using java is not what I want and will not work in this case.
jse.executeScript("window.scrollBy(0,250)", "");
Try using a different class name
className("_oidfu")
has href attribute
Scrolling answer can be found here: Page scroll up or down in Selenium WebDriver (Selenium 2) using java
I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?
Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait.
<h:outputLink id="lnk" value="#">
<p:printer target="tbl" />
<p:graphicImage value="http://www.primefaces.org/showcase/images/print.png" />
</h:outputLink>
I didn't find any suitable attribute in the <p:printer> tag.
Update: sorry, nevermind the <p:printer> can be used on a <h:dataTable> as well, so you can also just answer the second question only.
Both qustions are answered with CSS #media print rule. It allows you to specify CSS styles which are specific to printed output. You can embed those rules in a normal CSS stylesheet file or <style> element the usual way.
I want to print a <p:dataTable>, so I use <p:printer>, but I want to skip printing the skin and make it look like a <h:dataTable>. How can I do this?
Lookup the classname of the <p:dataTable> and override it in your #media rule:
#media print {
.primeFaces-dataTable-className {
border: 0;
margin: 0;
padding: 0;
background: none;
color: black;
}
}
There are likely more, I don't know it all from top of head, you should be able to check using Firebug or Chrome developer tools what classname is been used and which properties are all been set so that you know which you should reset to 0, none or some other default.
Also, is it possible to change the paper orientation of the print? I would like to print it as landscape instead of portrait.
Use CSS.
As per CSS 2.1, you can specify it as follows:
#media print {
#page {
size: landscape;
}
}
This has however browser specific impediments, it's not supported in FF and in MSIE <=7. For workarounds, check the accepted answer of this question: Landscape printing from HTML