I am customizing a label and placed the name of the label in the one cell of a grid and an asterisk(image) in the next cell.
<ui:image field="requiredImage" src="images/required_indicator.gif"/>
<ui:style type="com.equillore.mcmexternal.client.ui.IndicatorLabel.Style">
#sprite
.requiredAsterisk
{
gwt-image: 'requiredImage';
width: 7px;
height: 14px;
}
.labRequired
{
color:#B22222;
font-size:14;
font-style:normal;
font-weight:bold;
font-family: serif;
letter-spacing: 0.07em;
}
</ui:style>
<g:Grid >
<g:row>
<g:customCell>
<g:Label ui:field="label" addStyleNames="{style.labRequired}"/>
</g:customCell>
<g:customCell>
<g:Label addStyleNames="{style.requiredAsterisk}"/>
</g:customCell>
</g:row>
</g:Grid>
when I run this the asterisk image is however displayed in front of the label(labRequired) as well just after it. So it is displayed twice.
why is this happening and how can I get rid of the 'extra' astersik image?
Kind regards
<ui:image field="requiredImage" src="images/required_indicator.gif"/>
This line is actually inserting the image in the UIBinder. Remove it.
Instead add it as a managed resource in the client bundle.
https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Image_Sprites
Related
I am using flying saucer to create pdf from html.
#page land { size: A4 landscape; }
.landscapePage {
page:land;
height: 14cm;
width: 30cm;
background-color: green;
}
<div class="landscapePage">
</div>
But i don't know why it created a blank page before landscape page. How do I avoid it?
This is the button with classname action. How can I point to only this button inside this snackbar class. I need the xpath.
<div class="snackbar-container snackbar-pos bottom-center" style="width: 475px; background: rgb(50, 50, 50); opacity: 1;" xpath="1">
<p style="margin: 0px; padding: 0px; color: rgb(255, 255, 255); font-size: 14px; font-weight: 300; line-height: 1em;">Show similar patients for Jerry Rocker</p>
<button class="action" style="color: rgb(76, 175, 80);">SHOW</button>
</div>
Tried this.
WebElement
snackbarButton=driver.findElement(By.xpath("//button[contains(#class,'action') and contains(#class,'snackbar-pos']"));
<div class="snackbar-container snackbar-pos bottom-center" style="width: 475px; background: rgb(50, 50, 50); opacity: 1;" xpath="1">
<p style="margin: 0px; padding: 0px; color: rgb(255, 255, 255); font-size: 14px; font-weight: 300; line-height: 1em;">Show similar patients for Jerry Rocker</p>
<button class="action" style="color: rgb(76, 175, 80);">SHOW</button>
</div>
Presumably you intent to click on the button with text as SHOW associated with the element with text as Show similar patients for Jerry Rocker and to achieve that you to induce WebDriverWait for the element to be clickable and you can use either of the following Locator Strategies:
xpath1:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//p[text()='Show similar patients for Jerry Rocker']//following::button[1]"))).click();
xpath2:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//p[text()='Show similar patients for Jerry Rocker']//following::button[#class='action' and text()='SHOW']"))).click();
If you want to get the button which is a child of <div> tag which class attribute contains snackbar-pos you could go for the following expression:
//div[contains(#class,'snackbar-pos')]/button
Demo:
However it might make more sense to stick to this xpath attribute:
//div[#xpath='1']/button
Or even this Jerry Rocker text:
//p[contains(text(),'Jerry Rocker')]/following-sibling::button
References:
XPath Tutorial
XPath Axes
XPath Operators & Functions
You can use below given xpath.
//div[#class='snackbar-container snackbar-pos bottom-center']//child::p//following-sibling::button[#class='action']
Hope this will help.
Color Picker Field dropdown:
Should also need to be provided the functionality to add custom colors when clicking on the "More Colors" just like in MS Paint. Any out of the box solutions are also welcome.As far as i have checked in SenchaGXT am unable to find the correct implementation for this.
I was able to create this functionality using few edits of my own to the native components.I used a split button and attached a color menu to it and made it like a color picker.
SplitButton colorPicker = new SplitButton();
final ColorMenu colorMenu = new ColorMenu();
colorMenu.getPalette().addValueChangeHandler(new ValueChangeHandler<String>(){
public void onValueChange(ValueChangeEvent<String> event){
String color = event.getValue();
System.out.println("Color value is "+color);
StyleInjector.inject(".CustomColor1 > div > div { background-color: "+color+" !important; border-color: #c4c5c5 !important;} ");
colorMenu.hide();
}
});
colorPicker.setMenu(colorMenu);
colorPicker.setHeight(20);
colorPicker.setWidth(150);
StyleInjector.inject(".CustomColor1 > div {background:none !important; background-image:none !important; background-color: #FFFFFF !important; border-color: #c4c5c5 !important; border-width: 1px !important;} ");
colorPicker.setStyleName("CustomColor1");
and I have got the desired output like this.
So ,I have achieved what i wanted.
Happy coding!
For a website I have to assert the use of colours. The element is easy to find but I can't seem to figure out how to assert the color as the css uses psuedo code to generate the displayed color. I use the following to get to the element and retreive the color:
assertEquals("rgba(236, 117, 4 , 1)", driver.findElement(By.xpath("//*[#class='ab-toggle']")).getCssValue("color"));
The code on the page is:
<div class="ab-toggle">::before</div> //in chrome
<div class="ab-toggle"></div> //in firebug
The css:
.contenthere .ab-toggle::before {
color: #ec7504;
content: "▾";
display: inline-block;
font-family: "icons";
font-size: 1.6em;
line-height: 1;
margin-left: 0.3em;
vertical-align: middle;
}
If I run my code it returns a comparisonFailure:
org.junit.ComparisonFailure: expected:<[rgba(236, 117, 4 , 1)]> but was:<[rgba(34, 34, 34, 1)]>
I can see this colour in the CSS too but don't know how to go about getting the correct color from the assert statement
.contenthere a.expandable-toggle {
color: #222;
cursor: pointer;
I also tried to get to the element using a css selector instead of xpath, when I use the following:
assertEquals("rgba(236, 117, 4 , 1)", driver.findElement(By.cssSelector("div.ab-toggle ::before")).getCssValue("color"));
it results in a NoSuchElementException. And when I try:
assertEquals("rgba(236, 117, 4 , 1)", driver.findElement(By.cssSelector("div.ab-toggle")).getCssValue("color"));
it simply returns the old result, same as when I use xpath to locate the element
are there any Java script or any sample available for the Link / text / image that stays static even when the webpage is scrolled.
I am looking for something similar to the one on the bottom left side of the webpage borders(Helpful?, "Yes", "No").
http://www.ehow.com/facebook-for-business/
Regards,
Gourav
Try this code this may help you. but this code required lot more css and javascript code to make this same as ehow.
<style>
.mainDiv {
height: 1000px;
border: solid 1px #000000;
}
.fixDiv {
height: 250px;
width: 20px;
border: solid 1px #000000;
position: fixed;
margin-top: 200px;
}
</style>
<html>
<body>
<div class="fixDiv">h e l p f u l l? Yes No</div>
<div class="mainDiv">Gaurav</div>
</body>
</html>
This can be done using simple css
create a style for div with id="poll" and give this style
div#poll {
position: fixed;
left: 0;
top: 100px;
}
<div id="poll">
<img src="image.jpg" alt="image" class="contimage" border="0"/></div>
This div will be shown in the left side of the window