I am new to div stylesheet and i only discovered how to use :
margin-top/left/right/bottom.
What is the position used for ?
What is left/right/top/bottom attrib used for?
What is display used for?
Is there any other attrib which i need to take note of/usage for positioning my div ?
Regards
http://www.w3schools.com/css/pr_class_position.asp
http://www.w3schools.com/css/pr_pos_left.asp
http://www.w3schools.com/css/pr_class_display.asp
http://www.w3schools.com/css/css_positioning.asp
margin is in relation to the closest container while left/right... is in relation to the entire page.
Display determines if the object is visible/hidden or how the element behaves. Like display: inline means the elements will display on the same horizontal plane if possible.
Related
I need to get the value 107801307 that is inside a specific Div but there are several other Divs in the path before getting into that DIV I need. Can anyone help?
Below is the image with the information that I need to extract from the DIV.
As per the HTML you have provided, to extract the text 107801307 you can use the following solution:
Java:
String myText = driver.findElement(By.xpath("//b[#class='label_tratamento'][contains(.,'Ban Claro')]//following::span[1]").getAttribute("innerHTML");
Python:
myText = driver.find_element_by_xpath("//b[#class='label_tratamento'][contains(.,'Ban Claro')]//following::span[1]").get_attribute("innerHTML")
Research xpath locators to find the specific element you want.
Assuming you were using Java, the code would be:
webdriver.findElement(By.xpath("//b[text()='Ban Claro']/following::span").getText();
or
webdriver.findElement(By.xpath("//b[#class='label_tratamento']/following::span").getText();
Use:
driver.findElement(By.xpath(("XPATH OF DIV HERE")[Index of the div where span is. Example: 4)/span)).getText();
Im trying to add a ripple effect to a card using angular material. The ripple effect works the way it supposed except that it expands the hight of the card when the effect is active.
How can I stop the card from expanding?
<mat-card mat-ripple>
<mat-card-content>This is content</mat-card-content>
</mat-card>
Stackblitz that demonstrates the behaviour
Add a class (i.e. last-child) to the last child of your mat-card (in your case mat-card-content) and define the following style:
.mat-card .last-child {
margin-bottom: 0;
}
The problem is that matRipple adds an zero-height element to the mat-card while Angular Material only removes the margin-bottom from the last child.
If you add the footer element (with or without content) you won't need additional CSS and this will lock the height when activating the ripple effect.
<mat-card mat-ripple>
<mat-card-content>This is content</mat-card-content>
<mat-card-footer></mat-card-footer>
</mat-card>
should be as easy as adding matRipple to the mat-card
<mat-card class="action-card" matRipple>
<mat-card-title>
{{content}}
</mat-card-title>
<mat-card-content>
desc
</mat-card-content>
</mat-card>
make sure you inject the MatRippleModule into your module.ts though, that threw me off for a while
Use a div -Tag inside of mat-card -Tag. This Fix my issue.
I am having three divs each with class myDiv(just for example). And each of div has unordered list with list items inside it.
So i can write down xpath as
By.xpath("//div[#class='myDiv']/ul/li")
I want the first myDiv only.
But this will give results of all three divs. How to get only first div contents. Please help to modify this xpath.
As discussed with the OP, following are potential xpaths to go with.
//li[contains(#id,'100_deal')]
(//div[#class='gbwshoveler-content'])[position()=1]
//div [#id="deals-onethirtyfive-hero10903707629515"]//ul/li
(//div[#class='gbwshoveler-content'])[1]
you can get first div using
By.xpath("//div[#class='myDiv'][1]/ul/li")
I have a simple page with products-list (downside) and basket (upside). When i click on any product in products-list, it will move img from product's list td to basket's td. It is realized by tables with some width, height and paddings of td's. But in IE7 there is an issue with padding-top when td is empty. Please, look at this image and tell me, why td in products-list (the grey ones) are not affected from padding-top?
Image:
In IE, if a td tag is empty, it consider it does not exists. Add a (HTML entity for space) in each td who have no content to avoid this bug.
Alternatively, you might be able to use border-top rather than padding-top to fix this issue.
So, if you add a bunch of inputs to a FieldSet, the last one has round corners on the bottom. In my form, tho, I hide and show inputs inside the form, depending on a Checkbox at the top of the form.
So now, it is possible that an input, tho logically not the last one in the Fieldset, to be visually, and temporarily, the last one.
Does anybody know how Sencha determines which is the last input in the Fieldset? Just looks which one is the last in the array of inputs, or there is a property I can set to an input to tell it that it is the last one now ... ?
There is a CSS rule, .x-form-fieldset .x-field:last-child, which styles the last child of a fieldset to have rounded bottom corners. There is a bit more to the rule to handle edge cases, but any fields that are added (or hidden/shown) to that fieldset will have the appropriate styling applied just based on their HTML position alone.
The appropriate rule is in \resources\themes\stylesheets\sencha-touch\default\widgets\_form.scss:294 in release 1.1.0.
Thanks to mistagrooves post from above, I've managed to fix the problem. The idea is that I programmaticlly set a class "last" to the input I want it t be rendered as last, and then in my CSS, I rewrite the rules for that .last class like so:
.last, .last .x-form-field-container, .last .x-form-field-container *
{
-webkit-border-bottom-right-radius: .4em;
border-bottom-right-radius: .4em;
border-bottom: none;
}
.last, .last .x-form-label, .last .x-form-label *
{
-webkit-border-bottom-left-radius: .4em;
border-bottom-left-radius: .4em;
}
Hope it helps