We are using Keyoti Spell Cheker in our web application and its working fine with Zk but I have to add NoSpell checking for Datebox so I have to add the following line in my code:
<zk xmlns:x="xhtml" xmlns:zk="zk" xmlns:d="http://www.zkoss.org/2005/zk/client/attribute">
And in component I have to add an attribute like this: d:nospell='true'
It's working fine for textbox and intbox but not for datebox. I have added it like this:
<datebox d:nospell='true'></datebox>
But the spell checker is still doing spell checking in the datebox component so I just inspected the element and the HTML code looks like this:
<i id="t_3475" class="z-datebox" nospell="true"><iframe id="t_3475-real_IF" scrolling="yes" frameborder="0" src="http://localhost:7080/module-web/core/a.rapidspellweb?t=r&n=blank.html" style="display: none; overflow-x: hidden; overflow-y: scroll; border-width: 1px; border-color: rgb(171, 173, 179) rgb(227, 233, 239) rgb(227, 233, 239); border-style: solid; height: 19px; width: 86px; background: none repeat scroll 0% 0% rgb(255, 255, 255); animation-delay: 0s; animation-direction: normal; animation-duration: 0s; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation-play-state: running; box-shadow: none; caption-side: top; clear: none; color: rgb(0, 0, 0); content: none; counter-increment: none; cursor: text; direction: ltr; empty-cells: show; align-self: stretch; flex: 0 1 auto; flex-direction: row; order: 0; justify-content: flex-start; font-family: arial,sans-serif; font-size: 12px; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: 400; ime-mode: auto; letter-spacing: normal; list-style: disc outside none; opacity: 1; padding: 2px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; pointer-events: auto; quotes: "“" "”" "‘" "’"; transform: none; transform-origin: 50% 50% 0px; perspective-origin: 50% 50%; perspective: none; backface-visibility: visible; transition-delay: 0s; transition-duration: 0s; transition-property: all; unicode-bidi: normal; vertical-align: baseline; color-interpolation: srgb; color-interpolation-filters: linearrgb; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; vector-effect: none;" tabindex="null"></iframe><input id="t_3475-real" class="z-datebox-inp" type="text" size="11" value="" autocomplete="off" style="display: none;" oldvalue="2013-08-13"></input>
How can we fix this issue so that we can disable spell checking on datebox components?
Related
I need to take the CSS selector to use in selenium code the tag is
<div id="pbpopup-container" style="border-radius: 10px !important; box-shadow: rgb(170, 170, 170) 1px 1px 5px !important; display: block !important; overflow: hidden !important; position: fixed !important; right: 20px !important; top: 20px !important; visibility: visible; z-index: 2147483647; border: none !important; opacity: 1; bottom: auto !important; height: auto; width: auto;">
from this tag I need a CSS selector like '//div[#id='pbpopup-container'] and visibility: visible', can anyone help in this.
Since I don't have a selenium at hand right now, take this with a grain of salt:
//div[#id="pbpopup-container"](contains(#style,'visibility:visible'))]
Here is the css that you are looking for.
div[style*='visibility: visible']#pbpopup-container
Screenshot:
I want to create tooltip with vue's style binding. I am thinking to use attr() function from CSS which takes attribute value which is a reactive object dynamicColor. The code which I have now is:
<div class="test">
<span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.marker::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: attr(color) transparent transparent transparent;
}
</style>
But it does not work. I don't want to use bootstrap due to some reasons. I tried to look if I can find for pseudo selector in vue style binding but could not find much. Any ideas on how to achieve this? Thanks.
As suggested by #Stephan-v in comments, I added separate element for arrow. The final code looks like something below:
<div class="test">
<span class="markertip" :style="{'border-color': dynamicColor + ' transparent transparent transparent'}"></span>
<span class="marker" :style="{'background': dynamicColor}">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.markertip {
content: "";
position: absolute;
top: -45%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
}
</style>
I have below HTML path for which I am trying to capture "Inbox" value but I am not able to find particular element in google chrome using Selenium Webdriver.
HTML Path :
<div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: white; text-align: left; width: 84px; height: 14px; padding-left: 1px; padding-top: 1px; left: 1px; top: 1px; background-color: rgb(102, 0, 153);">Inbox"
<img src="/images/tridown.gif" style="position: absolute; width: 8px; height: 4px; top: 9px; left: 75px;">
</div>"Inbox"
<img src="/images/tridown.gif" style="position: absolute; width: 8px; height: 4px; top: 9px; left: 75px;">
</div>
I think left and top is unique identifer for Inbox dropdown, so can you please help us to write command to get "Inbox" value from above HTML
As Michas and Saritha G suggested, your HTML code is formatted correctly, but having said that. Please use this example below:
<div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: white; text-align: left; width: 84px; height: 14px; padding-left: 1px; padding-top: 1px; left: 1px; top: 1px; background-color: rgb(102, 0, 153);"></div>
If you want to retrieve the value for "style" attribute for the element above, you need to first locate this element:
firefox = webdriver.Firefox()
element = firefox.find_element_by_css_selector("this element css selector here")
attributeValue = element.get_attribute("style")
Then attributeValue should have this following string "position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: white; text-align: left; width: 84px; height: 14px; padding-left: 1px; padding-top: 1px; left: 1px; top: 1px; background-color: rgb(102, 0, 153);"
I am using Python as an example.
Old thread, but still...
I solved this using the value_of_css_property(). In my case, I need to wait a loader disappear. So I used this:
loader = wrapper.find_element(By.ID, "loader_view")
while loader.value_of_css_property('display') == 'block':
sleep(1)
# do some stuff...
Here is my code:
HTML:
<div class="main">
<img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>
CSS:
.main{
height:240px;
width: 240px;
background: #F00;
border: 1px solid #CCC;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.in {
width: 240px;
height: 240px;
}
Live example: Jsfiddle
As you see in the example, there is a little background color (red) around at the corners of the image.
How to remove these but keeping border-radius attribute?
Just remove the styles
background: #F00;
border: 1px solid #CCC;
from the class main.
http://jsfiddle.net/3Nzp3/3/
see this fiddle
Remove both line
background: #F00;
border: 0px solid #CCC;
just remove background: #F00; and border: 1px solid #CCC; from your class main. You will get your output
like
.main{
height:240px;
width: 240px;
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
//you can use border: 0px;
}
just remove the code below from the main class
background: #F00;
border: 1px solid #CCC;
i think this will help you .
When using an alpha transparency border with rounded corners in Safari, the background clips into the border. This happens even when using background-clip: padding-box. I know that I can simply wrap the h1's in a span/div/etc and give that the border, but I'm wondering if anyone knows if it is possible to do this without any more mark up.
Here is the css I'm using:
h1.inner {
background: #ffa51f;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
border-top: 10px solid rgba(33,33,33,.05);
border-bottom: 10px solid rgba(33,33,33,.05);
border-right: 10px solid rgba(33,33,33,.05);
color: #FFF;
display: inline-block;
font-size: 47px;
font-weight: 800;
line-height: 1.2;
padding: 0 .6em 0 0;
position: relative;
text-transform: uppercase;
text-align: left;
background-clip: padding-box;
box-sizing: border-box;
}
h1.inner:before {
background: #ffa51f;
border-top: 10px solid rgba(33,33,33,.05);
border-bottom: 10px solid rgba(33,33,33,.05);
content: "";
position: absolute;
top: -10px;
bottom: -10px;
width: 9999px;
background-clip: padding-box;
box-sizing: border-box;
}
h1.inner:before {
right: 100%;
}
Below is a jsfiddle and screenshot with an example of what I'm talking about.
http://jsfiddle.net/39Xen/
http://imgur.com/Hp2bzBm
Is it posible that what you are asking has been addressed here:
CSS rounded corners bug in Safari?
?
It seems that Safari has some limitation with respect to what you are trying to do.
Hope that helps.