The values of the css properties can be retrieved using a get() method:

Syntax:

driver.findElement(By.id(“id“)).getCssValue(“name of css attribute”);
driver.findElement(By.id(“id“)).getCssValue(“font-size”);
 
 
 
 
 
 
 
 
 

The post HOW TO RETRIEVE CSS PROPERTIES OF AN ELEMENT? appeared first on Pro-Tek Blog.

Add CSS property resize as none for text area element in the following way

textarea{
resize: none;
}
 
 
 
 
 
 
 
 

The post HOW TO DISABLE RESIZABLE PROPERTY OF TEXT AREA? appeared first on Pro-Tek Blog.

The best way is to apply a ternary operator to the view element.
For ex. ng:class=”( = = = ) ? : <else,apply false condition>”.
In the above syntax, we check for the condition if the current value id equal to the required value. If it is true, then the first assigned class is applied. If it is false, then the second assigned class is applied
 
 
 
 
 
 

The post WHAT IS THE BEST WAY TO CONDITIONALLY APPLY A CLASS? appeared first on Pro-Tek Blog.

Internet Explorer versions before IE9 do not support media queries. But we use IE’s conditional commenting to achieve this. Using this, you can specify an IE 8/7/6 specific style sheet which over writes the previous rules.

For example:

<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css”/>
<!–[if lt IE 9]> <link rel=”stylesheet” type=”text/css” media=”all” href=”style-ie.css”/>
<![endif]–>

This won’t allow for a responsive design in IE8, but could be a simpler and more accessible solution than using a JS plugin.

The post HOW TO WRITE CSS MEDIA QUERIES IN IE8? appeared first on Pro-Tek Blog.

Give opacity as 0.5 in your background color rgba like background-color:rgba(255,0,0,0.5); based on your color in your style property of the element tag.

Eg.
<p style=”background-color: rgba(255,0,0,0.5);”></p>

The post USING CSS, HOW TO MAKE THE BACKGROUND OF AN ELEMENT TRANSPARENT/SEMI-TRANSPARENT BUT HAVE THE CONTENT (TEXT & IMAGES) OF THE ELEMENT OPAQUE? appeared first on Pro-Tek Blog.

Float property is used for wrapping text around images, Floats can be used to create entire web layouts and are also helpful for layout in smaller instances.

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables

One of the most common symptoms of float-heavy layouts is the “collapsing parent”. One of the most common ways to fix a collapsed parent element is to place an element with the clear property after our floated element. This will cause the parent to begin reflowing after the floated element. In IE 7, the Bottom Margin Bug is shown when a floated parent has floated children inside it, bottom margin on those children is ignored by the parent.

Quick fix:using bottom padding on the parent instead.

The post FLOATING ELEMENTS – HOW TO USE THEM, TROUBLES WITH THEM, AND HOW TO WORK AROUND THE TROUBLES? appeared first on Pro-Tek Blog.

Float property can be used to align an entire block element to the left or right such that other content flows around it.

For instance, Float is used for wrapping text around images or create table-like columns in an HTML layout without the use of tables.

The most common problems of float-heavy layouts are:

The “collapsing parent”.

(a) Fix 1: one of the most common ways to fix a collapsed parent element is to place an element with the clear property after the floated element. This will cause the parent to begin reflowing after the floated element.

(b) Fix 2: There is a method that allows a parent element to clear itself of any floated elements inside it. It uses a CSS property called overflow with a value of hidden. Note that the overflow property was not intended for this type of use, and could cause some issues such as hiding content or causing unwanted scrollbars to appear.

In IE 7, the Bottom Margin Bug is when if a floated parent has floated children inside it, bottom margin on those children is ignored by the parent. Quick fix:using bottom padding on the parent instead.

The post IN CSS, WHAT DOES IT MEAN BY FLOATING ELEMENTS – HOW TO USE THEM, TROUBLES WITH THEM, AND HOW TO WORK AROUND THE TROUBLES? appeared first on Pro-Tek Blog.

Yes, by using :before and :after, we can achieve this. However, for dynamic data, we may have to use JQUERY.

Only CSS (static text)

<h1></h1>
h1:before {
content: ‘Exam';
color: #0000ff;
font-size: 32px;
}
h1:after {
content: ‘ple';
color: #ff0000;
font-size: 32px;
}

Result:

The post IS IT POSSIBLE TO APPLY CSS TO HALF OF A CHARACTER/WORD? appeared first on Pro-Tek Blog.