how can I send a text in an HTML block and inline elements?
<gr_block p="0,7" style="display: inline;">My text</gr_block>
this also is connected to it
<span data-text="true">My text</span>
this is the messenger of facebook I'm trying to send a message via Watir. any ideas?
Messenger
update:
<div class="_5rp7 _5rp8" spellcheck="false">
<grammarly-ghost spellcheck="false">
<div data-id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm="gramm" data-gramm_editor="true" class="gr_ver_2" gramm="true" contenteditable="true" style="position: absolute; color: transparent; overflow: hidden; white-space: pre-wrap; border-radius: 0px; box-sizing: content-box; height: 19px; width: 307.951px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; z-index: 0; border-width: 0px; border-style: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); top: 0px; left: 0px;" width="307.951416015625">
<span style="display: inline-block; font: 400 14px/17.92px "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; color: transparent; overflow: hidden; float: initial; clear: none; box-sizing: border-box; vertical-align: baseline; white-space: pre-wrap; width: 100%; margin: 0px; padding: 0px; border: 0px; letter-spacing: normal; text-shadow: none; height: 19px;">
<gr_block p="0,16" style="display: inline;">My text</gr_block>
</span><br></div>
</grammarly-ghost>
<div class="_5rpb"><div aria-autocomplete="list" aria-controls="js_8" aria-describedby="js_1" aria-expanded="false" aria-label="Type a message..." class="notranslate _5rpu" contenteditable="true" role="combobox" spellcheck="false" tabindex="0" style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word; z-index: auto; position: relative; line-height: 17.92px; font-size: 14px; transition: none; background: transparent !important;" data-gramm="true" data-txt_gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_editor="true"><div data-contents="true"><div class="" data-block="true" data-editor="fenr1" data-offset-key="8b6hl-0-0"><div data-offset-key="8b6hl-0-0" class="_1mf _1mj"><span data-offset-key="8b6hl-0-0"><span data-text="true">My text</span></span></div></div></div></div><grammarly-btn><div class="_1BN1N Kzi1t BD-0J _7_mnr MoE_1 _2DJZN" style="z-index: 2; transform: translate(294.951px, 5px);"><div class="_1HjH7"><div title="Protected by Grammarly" class="_3qe6h"> </div></div></div>
</grammarly-btn></div>
</div>
Second element
<div aria-autocomplete="list" aria-controls="js_8" aria-describedby="js_1" aria-expanded="false" aria-label="Type a message..." class="notranslate _5rpu" contenteditable="true" role="combobox" spellcheck="false" tabindex="0" style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word; z-index: auto; position: relative; line-height: 17.92px; font-size: 14px; transition: none; background: transparent !important;" data-gramm="true" data-txt_gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_editor="true">
My text
What you are asking is not possible by webdriver because webdriver doesn't change the content of the page, but it's possible by Java script.
Write the below code
element=b.element(xpath: "//span[text()='My text']")
b.execute_script("arguments[0].innerText='Your Text here'",element)
Your Text here will appear in the place of My text.
Related
I am using HTML5 and CSS3 to make my website.
My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image used as a banner. I have tried everything possible and I haven't had any luck.
Any ideas would be greatly appreciated! Thanks.
Here's the Nav Bar HTML Code:
<p>Abelia </p>
<ul>
<li>Home</li>
<li><a href="#">Services<i class="
fas fs-caret-down"></i></a>
<ul>
<li>Electricity</li>
<li>Water</li>
<li>Housing</li>
</ul>
</li>
<li>About Us
<ul>
<li>Vison</li>
<li>Projects</li>
<li>Team</li>
</ul>
</li>
<li><a>Contact Us</a></li>
</ul>
<div class="banner-area">
<h2>Welcome To Abelia Group</h2>
</div>
This is nav bar CSS code
.menu_bar{
background-color: #c0392b;
height: 80px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5%;
position: fixed;
}
.logo a{
font-size: 30px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: beige;
letter-spacing: 4px;
}
.menu_bar ul{
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.menu_bar ul li{
padding: 5px 15px;
position: relative;
}
.menu_bar ul li a{
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
letter-spacing: 2px;
font-size: 20px;
color: beige;
transition:all 0.2s ;
}
.menu_bar ul li a:hover{
color: black;
}
.fs-caret-down{
height: 2px;
width: 1px;
color: rgb(255, 255, 255);
}
.dropdown_menu{
display: none;
}
.menu_bar ul li:hover .dropdown_menu{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu ul li{
width: 150px;
padding: 10px;
}
.dropdown_menu2{
display: none;
}
.menu_bar ul li:hover .dropdown_menu2{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu2 ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu2 ul li{
width: 150px;
padding: 10px;
}
/*content*/
.banner-area{
background-image: url(image/mypic.jpg);
background-size: cover;
background-position: center;
top: 80px;
height: 680px;
width: 100%;
position: fixed;
}
.banner-area:after{
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 800px;
background: rgb(21, 21, 29);
opacity:.7 ;
z-index: -1;
}
Description:
Good afternoon community, could you help me know how to click a button in a Power BI interface? I was trying this but it doesn't work for me
await page.ClickAsync(".themableBackgroundColor");
Url Power Bi:
https://app.powerbi.com/view?r=eyJrIjoiNGE3Mjg4OWMtZTFhYi00MDUyLTllNzAtNDJmOGE4NjY2MzMwIiwidCI6IjhhNDc1YTdmLThlOGYtNDliMi1iMDRkLTZlY2IwNTkzYzYzMyJ9
Image of Power Bi buttons:
Image of Power Bi buttons
Example code Html
<button type="button" class="themableBackgroundColor" style="width: 40px; height: 40px; overflow: hidden; position: relative; display: block; background-color: transparent; cursor: pointer;">
<span class="button-text" style="text-align: right; max-width: 32px; pointer-events: none; color: rgb(102, 102, 102); font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 13.3333px; position: absolute; right: 4px; top: 20px;"></span>
<div class="button-icon"><svg viewBox="0 0 22.59 32" width="32" height="32" style="fill: none; pointer-events: none; position: absolute; left: 4px; top: 4px;"><polygon points="20.04 29.25 11.21 25.43 2.37 29.25 2.37 2.5 20.04 2.5 20.04 29.25" style="vector-effect: non-scaling-stroke; stroke-width: 3px; stroke: rgb(102, 102, 102); stroke-opacity: 1;"></polygon></svg></div>
<div class="button-outline" style="pointer-events: none; top: 0px; left: 0px; position: absolute; width: 40px; height: 40px; border: none;"></div>
</button>
Just use this function to click the button via script:
let btn = document.querySelector(".themableBackgroundColor")
btn.addEventListener("click", () => console.log("Button Clicked!"))
btn.click();
I have tried everything, including "text-decoration: none;" and making sure all padding is removed. Should be a pretty basic and elemental procedure but nothing works.
Yes, I have read all I can find here and tried it or looked elsewhere on the net for a solution. Nothing is working.
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="site.css"/>
</head>
<style>
#main-nav {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 100%;
height: 30px;
margin: auto;
padding: 0;
text-decoration: none;
background-color: #D6D5D6;
list-style-type: none;
text-align: center;
}
.nav-list {
text-decoration: none;
text-align: center;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 1000px;
margin-: auto;
padding: 0;
}
.nav-list > li {
margin: 0;
float: left;
width: 200px;
height: 30px;
position: relative;
line-height: 30px;
}
.nav-list > li > a {
width: 200px;
height: 30px;
text-align: center;
padding-top: 12px;
list-style-image: none;
}
.nav-list > li > a:hover {
background-color: #FFF;
}
#dropdown {
position: relative;
top: 30px;
width: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
list-style-image: none;
list-style-type: none;
color: #F00;
}
.dropdown: li{
background-color:#697;
position:relaive;
width:200px;
height:30px;
text-decoration: none;
}
.dropdown: li a {
color: #ddd;
text-decoration:none;
position: absolute;
width:200px;
height:30px;
padding: 10px 0 0 10px;
box-sizing: border-box;
}
.dropdown: li a:hover {
background-color: #CCC;
}
body {
margin-left: 0px;
margin-top: 0px;
}
#transbar {
position: absolute;
z-index: -1;
width: 1000px;
left: 0px;
top: 0px;
}
#wrap {
width: 1000px;
top: 668px;
position: absolute;
margin-right: auto;
margin-left: auto;
}
#textbox {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-style: normal;
height: 575px;
width: 1000px;
position: absolute;
z-index: -1;
margin-top: 80px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
</style>
<div id="wrapper">
<body>
<nav class="main-nav">
<ul class="nav-list">
<li>About
<ul style="list-style: none;" class="dropdown">
li>The Film</li>
<li>The Park</li>
</ul>
</li>
<li>Updates
<ul style="list-style: none;" "dropdown">
<li>Slideshow<li>
</ul>
</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Add this to your CSS to remove underline effect for <li> links:
a:link {
text-decoration: none;
}
As for displaying <li> elements in the center of the page I've provided a simplified version of your code that centers each <li>.
HTML:
<ul>
<li>About</li>
<li>The Film</li>
<li>The Park</li>
<li>Updates</li>
<li>Slideshow</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
CSS:
a:link {
text-decoration: none;
}
ul {
text-align: center;
list-style-type: none;
}
ul li {
display: inline-block;
}
NOTE: you may want to adapt this to your current code, next time you ask a question like this probably best to post a link to a jsfiddle example of your code.
I got it to work. Fooling around with the width in the CSS "Box" attribute did the trick. I am using Dreamweaver as my text editor, btw. A width of 123px added to the ul CSS script did it for the first listed column. For the ul li column I had to mess with that as well. A measure of 68px on the width centered that. I don't know why this works, and as you tell I'm a novice at this.
Fiddle — just open it in Chrome and Firefox, all latest.
There is .button class in my CSS — I use it for all kind of buttons: a.button, button.button, etc.
As you see, there are no difference in Chrome between button.button and any other *.button elements.
As you see in FF — button.button is slightly bigger than any other *.buttons.
How can I made FF to render any buttons properly, like Chrome do?
UPDATE:
This is absolutely not a duplicate of any post on SO.
StackOverflow asks for a code:
.button {
font: normal 100% Arial, sans-serif;
position: relative;
display: inline-block;
text-align: center;
text-decoration: none;
vertical-align: middle;
color: #00f;
background-color: transparent;
border: 1px solid #00f;
border-radius: 3px;
user-select: none;
outline: 0;
cursor: pointer;
white-space: nowrap;
}
.button_medium {
padding: 0 12px;
}
.button__text {
font-weight: 400;
display: inline-block;
line-height: 1;
vertical-align: top;
white-space: nowrap;
}
.button__text_medium {
font-size: 90%;
line-height: 28px;
letter-spacing: -1px;
}
<div style="padding:5em;">
<button class="button button_medium" type="button">
<span class="button__text button__text_medium">Save</span>
</button>
<label class="button button_medium">
<span class="button__text button__text_medium">Save</span>
</label>
<span class="button button_medium">
<span class="button__text button__text_medium">Save</span>
</span>
<a class="button button_medium">
<span class="button__text button__text_medium">Save</span>
</a>
</div>
Have you tried? AFAIK it is really a duplicate. See also: http://css-tricks.com/forums/topic/button-padding-issue/
The following code will fix your issue:
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
I'm trying to make my first website in Dreamweaver, and I've run into a problem I can't seem to fix. I have a div containing an unsorted list, and the elements of the list are rollover images. There are 5 images, so I have 3 on the first line and 2 on the second line. They are sized to be a certain percentage of the page.
I want the div to extend down to the end of the bottom row of images automatically, I do not want to have to hard code the value for the size. I have the div size set to auto, but it does not seem to recognize the images in the unsorted list. It is sizing its self to 0, so all the images are overlaying everything that comes after the div.
If I manually resize the div it fixes the problem, but I'm not sure I want to do this.
Is there anyway to fix this issue without hard coding the height of the div?
Here is the html code for the list of roll over images..
<div id="rolloverlocs">
<ul>
<li><img src="images/Davie.jpg" alt="" width="" height="" id="Image1"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image2"></li>
<li><img src="images/Denman.jpg" alt="" id="Image3"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image4"></li>
<li><img src="images/Denman.jpg" alt="" width="" height="" id="Image5"></li>
</ul></div>
And for this part of the css style sheet ..
#rolloverlocs ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: auto;
display: block;
}
#rolloverlocs img {
width: 31%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
float: left;
border-style: solid;
border-color: #000000;
background-color: #E5E9E2;
height: auto;
}
#rolloverlocs {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: auto;
}
try add this style:
#rolloverlocs ul {
overflow:hidden;
}
demo
or you can use this:
html,body{
width:100%;
}
*{
margin:0;
padding:0;
}
#rolloverlocs ul {
list-style: none;
width: 100%;
display: block;
overflow:hidden;
}
#rolloverlocs li{
display:block;
float:left;
width:33%;
}
#rolloverlocs a{
display:block;
width:100%;
height:auto;
}
#rolloverlocs img {
width:94%;
margin:1%;
display: block;
background-color: #E5E9E2;
height: auto;
padding:2%;
}
#rolloverlocs {
width:100%;
}