I am trying to get style properties from an element using selenium which displays as below.
element.style {
left: 0px;
margin: 0px;
width: 414px;
top: 0px;
}
.Content
{
min-height: 500px;
padding-top: 10px;
}
Using the below code retrieves only the element style properties "left: 0px;margin: 0px;width: 414px;top: 0px;"
var style = webelement.GetAttribute("style");
How to get all the styles specific to Content class ?
To retrieve the value of WebElement's style and Content you can use the following solutions:
style using GetAttribute("style") as follows:
var style = webelement.GetAttribute("style");
Content using GetCssValue("Content") as follows:
var style = webelement.GetCssValue("Content");
References
You can find a couple of relevant detailed discussions in:
How to convert #ffffff to #fff or #fff to #ffffff while asserting the background color rgb(255,255,255) returned by Selenium getCssValue("background")
How can I verify text is bold using selenium on an angular website with C#
GetAttribute in Selenium VBA for style
How to get background-image from inline css using selenium
Related
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
I'm using iViewUI for my Tag component, but I wanted to customize its size and where the "X" close button is.
I was able to change the width by simply adding a class to the Tag, but for some reason, even i'm trying to override also its children icon, is not responding to the change at all, is not applying it. Checked on browser, not adding it there either.
This is what I've done so far:
<Tag class="Badge-tag" color="warning" closable #on-close="removeTag">{{ badge }}</Tag>
Then on the less file I added the following:
.Badge-tag {
width: 60px;
position: relative;
.ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
I had no luck at all. I don't know why is not setting it.
If you put above css as global css, I think it should work.
I create a demo on jsfiddle here, please check
If you use scoped css, you can try using deep selector
.Badge-tag {
width: 60px;
position: relative;
/deep/ .ivu-icon.ivu-icon-ios-close {
position: absolute;
right: 2px;
top: 4px;
}
}
I just want to change the size of Dojo Filtering Select design element via CSS.
I tried manual or CSS File. It did not work.
<xe:djFilteringSelect id="djselect1" value="#{document1.Language}" style="min-height: 8px;height:8.px;"></xe:djFilteringSelect>
Any suggestion is important
Cumhur Ata
You just need to override the dijitTextBox CSS class.
You might need to use CSS specificity to make sure that the CSS is picked up (instead of using !important).
Here's a simple example:
.dijitTextBox {
width: 40px;
height: 8px;
}
As you are using Bootstrap theme you need to adjust the arrow button too.
This works for me:
.dbootstrap .dijitTextBox {
height: 24px;
}
.dbootstrap .dijitComboBox .dijitButtonNode.dijitArrowButton {
height: 22px;
}
.xsp.dbootstrap .dijitInputContainer {
padding-top: 0px;
}
.dbootstrap .dijitComboBox input.dijitArrowButtonInner {
margin-top: -3px;
margin-left: -5px;
}
.dbootstrap .dijitMenuItem {
padding: 0px 10px;
}
I am struggling to find a way to override google's new recaptcha styling. I believe the new version loads its styling from within the api JS file.
Would anyone know how to override this to make it responsive within bootstrap?
<script src="https://www.google.com/recaptcha/api.js?render=onload"></script>
<div class="g-recaptcha" data-sitekey="key"></div>
just make the iframe responsive like this
.g-recaptcha{
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
.g-recaptcha iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
this will make it res
I would add just one more things to Boukraa Mohamed idea:
.g-recaptcha > iframe
This way it will work even if the iframe down-inside of multiple div tags.
Use the below mentioned code
.g-recaptcha {transform: scale(0.85); transform-origin: left top;}
Your question makes not clear which properties you want to override.
The Google's code loads an iframe in the div with class g-recaptcha. The iframe has its own styles sheets. You can manipulate the style sheets in an iframe with javascript or jQuery, see: How to apply CSS to iframe?.
Before using jQuery to manipulate the style sheets you should make sure that the iframe had loaded. See: https://developers.google.com/recaptcha/docs/display#explicit_render it seems that the api does not provide a function to trigger this onload event.