I have a <td> like this
<td valign="middle" class="table_td td top" style="width: 347px">
<div id="Style" style="position:absolute;">
<img src="images/additional-keywords-image.gif" style="background: middle right;">
</div>
<span class="feature_text" style="cursor:pointer;" onmouseover="ShowPicture('Style',1)" onmouseout="ShowPicture('Style',0)" id="a1"> Featured Merchant Ad </span><br />
<span class="feature_text_small">(Merchant Ad in Home Page,<br /> for valuable Site Exposure)</span>
Div id="Style" has image bigger than the <td>. AIm is to show the image in div when the moveover happens on the first span. The image shows up fine. But, i want the vertical center of div picture to be at the span with id= "feature_text" and has text "Featured Merchant Ad". I have tried but could not succeed. Where am i doing wrong?
I am not sure if i understod your question correctly, if you want to center the image in the div#style
You dont need this in img
style="background: middle right;"
Try
style="margin:auto;";
and adding this to div#style (div with id style)
style="vertical-align:middle; text-align:center;
Try with:
<div id="Style" style="position:absolute;">
<img src="images/additional-keywords-image.gif" style="background: middle right; position: relative; top: -20px;">
</div>
You are gonna have to play with the top value to get the vertical centering just right (the amount depends on the height of img).
Related
I need to select values (any value from House_TypeList) from dropdown menu with NUnit or just pure selenium. .
They are not seen in HTML.
I have tried select by xpath, by name, by span contains etc etc, I tried sending down key. I have waited for the element to become visible. I am out of ideas. Nothing works. I have not tried yet moving the cursor and trying to select it by that, but had a few problems implementing it and having in mind my luck, not really believing it will work either..
I am a beginner here, maybe I did some mistakes there. But I successfully managed any other inputs, buttons, navigation..
I have checked other similar questions, but could not find the answer that would work for me.
Is it even possible here?
Source:
<div class="dx-item dx-box-item" style="display: flex; min-height: auto; flex-grow: 1; flex-shrink: 1;"
<div class="dx-item-content dx-box-item-content" style="width: auto; height: auto; display: flex; flex-direction: column; flex-basis: 0px; flex-grow: 1;">
<div class="dx-first-col dx-last-col dx-field-item dx-field-item-required dx-col-0 dx-flex-layout dx-label-h-align">
<label class="dx-field-item-label dx-field-item-label-location-left" for="dx_dx-...._typeId">
<span class="dx-field-item-label-content" style="width: 159px;">
<span class="dx-field-item-label-text">Type:</span>
<span class="dx-field-item-required-mark"> *</span>
</span>
</label>
<div class="dx-field-item-content dx-field-item-content-location-right">
<div class="dx-textbox dx-texteditor dx-texteditor-empty dx-dropdowneditor-button-visible dx-widget dx-dropdowneditor-field-clickable dx-dropdowneditor dx-selectbox dx-validator dx-visibility-change-handler" id="slb_HouseManagement_EditHouse_TypeList">
<div class="dx-dropdowneditor-input-wrapper dx-selectbox-container">
<input type="hidden" value="" name="typeId">
<div class="dx-texteditor-container">
<input autocomplete="off" id="dx_dx-4e..._typeId" class="dx-texteditor-input" aria-haspopup="true" aria-autocomplete="list" type="text" readonly="" spellcheck="false" tabindex="0" aria-expanded="false" role="combobox" aria-required="true">
<div data-dx_placeholder="Select..." class="dx-placeholder"></div>
<div class="dx-texteditor-buttons-container">
<div class="dx-dropdowneditor-button dx-button-normal dx-widget" type="button">
<div class="dx-button-content">
<div class="dx-dropdowneditor-icon"></div>
</div></div></div></div></div></div></div></div></div></div>
Done. Found it in Devextreme support, the user had a bit different problem, but it solved mine as well.
IWebElement selectedItem = driver.FindElement(By.XPath("//div[#role='option']/div[text()='Apartment']"));
selectedItem.Click();
The DOM you have provided here does not contain any element for Lists. So I cannot share exact working code here. I will share few sample which you can update and use
With Selenium to select items from a list, you have two options to choose from:-
Select Class
Make an object of select class like below
Select obj =new Select(driver.findElement(By.id("search-box")));
Then you can use several functions on this select obj
obj.selectByVisibleText("Apartment");
Or
obj.selectByIndex(2);
or
obj.selectByValue("Farmhouse");
You can also get all the element in a List and then work around that list
List <WebElement> myHouseList = obj.getOptions();
System.out.println(myHouseList.size());
2.Actions Class
driver.manage().timeouts().implicitlyWait(10 , TimeUnit.SECONDS);
ele= driver.findElement(By.linkText("HouseList"));
Actions act = new Actions(driver);
act.moveToElement(ele).click();
WebElement webele = driver.findElement(By.linkText("Apartment"));
act.moveToElement(webele).click().build().perform();
Hope this helps you!!
Here is my default browser size.And my QR code is at right place.
When i re-size my browser .I got this one.But here my QR code is disappearing if I reduce it more.
I want QR code under the captcha. I have searched it ,got some answers but all not working in my case.Please help.
Here is my code.Thanks in advance.
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10
</table>px; width: 75%">
<table width= "75%" style="margin-left:1%">
<tr>
<td>
#Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">#TempData["ErrorMessage"]</div>
</td>
<td>
<div id="qrcode" style="width: 200px; display: none">
<img src="#Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })" onclick="AppendURL('#this.Model.ShortUrl')"/>
</div>
</td>
</tr>
</table>
</div>
Is this what you need?
<div class="container">
<div class="captcha"></div>
<div class="qrcode"></div>
</div>
.captcha{
float:left;
width:200px;
height:100px;
background:#123;
}
.qrcode{
float:left;
width:200px;
height:100px;
background:#456;
}
DEMO: http://jsfiddle.net/fWAg5/
Capta and qrcode div display inline where there's enough space and stack vertically if space isnt sufficient. But if this something you'd like to do for different resolutions, I'd suggest looking into media queries!
The problem is 1) the table is 600 pixels wide (75% of 800px) so it will never shrink with the window, and 2) the captcha and the QR code are in adjacent table cells, so they can't be made to behave fluidly relative to to each other. You can't float table cells.
So, remove the widths from the outer div and the table, put the QR in the same table cell as the captcha, and float the captcha, for instance by putting that in a container and giving the container some styles.
I made a fiddle, but note that you can't just copy my code back, as I had to remove all the MVC commands to make it look right.
Here is my default browser size.And my QR code is at right place.
When i re-size my browser .I got this one.But here my QR code is disappearing if I reduce it more.
I want QR code under the captcha. I have searched it ,got some answers but all not working in my case.Please help.
Here is my code.Thanks in advance.
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10
</table>px; width: 75%">
<table width= "75%" style="margin-left:1%">
<tr>
<td>
#Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">#TempData["ErrorMessage"]</div>
</td>
<td>
<div id="qrcode" style="width: 200px; display: none">
<img src="#Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })" onclick="AppendURL('#this.Model.ShortUrl')"/>
</div>
</td>
</tr>
</table>
</div>
Is this what you need?
<div class="container">
<div class="captcha"></div>
<div class="qrcode"></div>
</div>
.captcha{
float:left;
width:200px;
height:100px;
background:#123;
}
.qrcode{
float:left;
width:200px;
height:100px;
background:#456;
}
DEMO: http://jsfiddle.net/fWAg5/
Capta and qrcode div display inline where there's enough space and stack vertically if space isnt sufficient. But if this something you'd like to do for different resolutions, I'd suggest looking into media queries!
The problem is 1) the table is 600 pixels wide (75% of 800px) so it will never shrink with the window, and 2) the captcha and the QR code are in adjacent table cells, so they can't be made to behave fluidly relative to to each other. You can't float table cells.
So, remove the widths from the outer div and the table, put the QR in the same table cell as the captcha, and float the captcha, for instance by putting that in a container and giving the container some styles.
I made a fiddle, but note that you can't just copy my code back, as I had to remove all the MVC commands to make it look right.
in my aspx page, i have 3 td inside a table where i have placed
divs to display my content.i'm using ajax to load the data inside
each of the div.in the same td in which i am displaying my content div
i have also placed a div to show loading indicator when the data div
loads.
My problem is positioning the loading indicator div when its seen through
different machines with different resolution or screen size.
At present my loading indicator div are of type absolute.
Can any one suggest an elegant method of position my loading
indicator div in the three td's so dat its correctly centered
no matter whatever is the screen size or resolution.
i'm using c# web application.
Below is the markup of one of the td's,
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Box">
<tr>
<td class="Box_TopLeftCurve">
</td>
<td valign="top" class="Box_TopRep">
</td>
<td class="Box_TopRightCurve">
</td>
</tr>
<tr>
<td class="Box_LeftRep">
</td>
<td align="left" valign="top">
<div class="Box_GridArea">
Data Here
</div>
<div style="position: absolute; top: 347px; left: 207px; width: 134px;display:none;">
Loading Indicator
</div>
</td>
<td class="Box_RightRep">
</td>
</tr>
<tr>
<td class="Box_BaseLeftCurve">
</td>
<td class="Box_BaseRep">
</td>
<td class="Box_BaseRightCurve">
</td>
</tr>
Display the indicator as a background image so that it is easy to center on any resolution.
.loader { background: url('/images/loader.gif') center center no-repeat; }
You could assign the background image to the table or the td in which it should appear.
When loaded you could remove the loader class using jQuery for example:
if (is_loaded) {
$('table td').removeClass('loader')
}
I am writing a webPage using asp.net and c#.
I want to divide my webpage into 2 columns such as in one I will have buttons that change the view in the other column, without "stepping on" the content of the first column.
example:
button 1 | :) a picture...
button 2 |
I tried to use divisions but I think I'm not using them properly.
any help would be great!
thanks!!!
Or code the divs like so:
<div class="wrapper">
<div class="left">
button 1
button 2
</div>
<div class="right">
a picture
</div>
</div>
Then the css is:
.wrapper {
width: 800px;
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 600px;
}
You can change the widths to whatever you want, just make sure that .left width + .right width isn't greater than .wrapper width. Also make sure that the content of the columns doesn't make them wider (i.e. if your picture is wider than 600px, it'll also break the layout).
You might try posting a bit of code so that we can see what is going on. It sounds like a css problem which is more general than asp.net and c#.
if you divide your page to two web page then you use frame in javascript
for it's refrence go to www.w3schools.com
You want a table :)
<table>
<tr>
<td>button 1</td>
<td>a picture</td>
</tr>
<tr>
<td>button 2</td>
<td>...</td>
</tr>
</table>