In my code, I want to add a repeating-linear-gradient to my div from my code behind. At the moment, I am trying to set this by the following code:
_div.Style.Add("background-image", "repeating-linear-gradient(90deg,rgba(0,100,200,.5),rgba(0,100,200,.5) 1px,transparent 1px,transparent 1px,rgba(0,100,200,.5) 1px)");
But the code has no effect on the div itself. I have been able to change the display with similar code:
_div.Style.Add("display", "inherit");
Any help would be appreciated.
Edit
Here is the HTML for the div
<div id="_div" runat="server">
<asp:Label ID="_Label" runat="server"></asp:Label>
</div>
Here is the CSS for the div
#output_div {
display: none;
padding-top: 2%;
padding-bottom: 2%;
width: 50%;
margin: 0 auto;
/*Below line works, but would like to set it dynamically on the server side*/
/* background-image: repeating-linear-gradient(90deg, rgba(0,100,200,.3), rgba(0,100,200,.3) 1px, transparent 1px, transparent 1px, rgba(0,100,200,.3) 1px);*/
background-size: 4px 4px;
}
Give it a try with following approach,
_div.Attributes.Add("style", "background-image: repeating-linear-gradient(90deg,rgba(0,100,200,.5),rgba(0,100,200,.5) 1px,transparent 1px,transparent 1px,rgba(0,100,200,.5) 1px)");
That way, style attribute will be rendered to the output HTML.
Update
You can also try adding a specific CSS class.
.myBackgroundImg {
background-image: repeating-linear-gradient(90deg, rgba(0,100,200,.3), rgba(0,100,200,.3) 1px, transparent 1px, transparent 1px, rgba(0,100,200,.3) 1px);
}
Then you can apply it in the code behind.
_div.Attributes.Add("class", "myBackgroundImg");
Try the below line -
_div.Style.Add("background", "repeating-linear-gradient(90deg, rgba(0,100,200,.5) , rgba(0,100,200,.5) 1px,transparent 1px,transparent 1px,rgba(0,100,200,.5) 1px)")
You may have to use ScriptManager & UpdatePanel also.
I have problem in Visual Studio 2008 (ASP.net with C#).
I have div#apDiv13, now I want to make my div a hyperlink.
I set my div's background and now I want it to be a hyperlink on mouse over
or go to some address in web on-click.
This is very bad idea but technically it's possible. What you need to do is display link as a block and set its size to 100% vertically and horizontally so it fills the container div.
Example (http://jsfiddle.net/snLwg/)
div {
background: red;
width: 300px;
height: 300px;
}
div a {
display: block;
height: 100%;
width: 100%;
}
Simple way:
<a href="http://stackoverflow.com/">
<div>Contents of your div</div>
</a>
Getting the error from the title when attempting to click on an <a> tag in a regression test script. I've researched the issue here: Selenium::WebDriver::Error::MoveTargetOutOfBoundsError: Element cannot be scrolled into view:[object HTMLSpanElement] and here as well: https://groups.google.com/forum/#!msg/webdriver/R2jwSWrIK44/RaCLRPlKIWEJ but I don't understand the root cause of the issue.
I've tried using By.jQuery, By.Id, By.Css, By.Xpath, as well as selecting by index and always get the same error. Here's the relevant code:
HTML:
<div id="divTabs">
<a id="tabECheck" target="#divECheck">eCheck</a>
<a id="tabAceComments" target="#divAceComments">Ace Comments</a>
<a id="tabReviewComments" target="#divReviewComments">Review Comments</a>
<a id="tabReviewHistory" target="#divReviewHistory">Review History</a>
</div>
CSS:
#divTabs{
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
width: 27px;
padding: 0px;
height: auto;
display: table-row;
margin-bottom: 10px;
}
#divTabs a
{
border: 1px solid #CCC;
padding: 3px;
white-space: nowrap;
cursor: pointer;
color: #3966BF;
display: table-cell;
background-color: #FFF;
}
C#:
element = driver.FindElement(By.Id("tabReviewComments"));
element.Click();
As you can see, I'm trying to click on the 3rd <a> tag with the id of "tabReviewComments." However, if I have the script click on the first <a> tag with the id of "tabECheck", it works in the sense that I don't get the "can't scroll element into view" error, the element is clicked, and the script moves on past that line. Sadly, I need to click on that third <a> tag. Any ideas short of moving the <a id="tabReviewComments" target="#divReviewComments">Review Comments</a> to the top?
Thanks!
Its likely that the element is actually un-clickable as far as the browser goes, this may be because
Its position is off-screen (negative space)
Its behind another element (like modal overlay or something)
It has 0 size (sometimes css can be funny, browser maybe calculating size differetnlty to what your seeing)
A UI bug in your system whereby the element isn't visible for another reason
I have a 1000px wide div, which contains a menu control. Inside this menu, I have 5 items (links). I want to use whole length of line, so in css file is wide of every item set to 200px.
.level1
{
border-width: 0px;
margin: 0px;
padding: 0px;
background-color: #99FF66;
font-family: Arial, Helvetica, sans-serif;
color: #FF0000;
height: 20px;
font-size: 12px;
line-height: 20px;
text-align: center;
width: 200px;
}
However, when page is loaded, I get two rows, because the last item doesn't fit.
See, that inserted black line is 200px wide (and the link "vzkazy" is longer). So the question is: Why is the MenuItem wider ? And how to set it's wide to 200px ? Thanks.
in your code at jsFiddle you applied your level1 class to ul and all anchor tags so i think you need not to applied same style to your ul tag you can do somethiong: ul.level1 li{ here your code }
I am using a httphandler to dynamically resize images that are rendered on a page. I have a preset width that all images must confirm - and the height of the images can vary (proportions constrained to the original width and height). I am caching the images - however, when they are originally loaded, the httphandler is called after the page is rendered - so for longer images - sometimes on intial load, layout breaks with larger images as they overlap the content that is below it. Here is an example screenshot from here http://www.teakmonkeystudios.ca/photos/photo.aspx?id=10801:
Here is the css:
.gallery
{
margin-left:0px;
padding-left:5px;
}
ul.gallery div.top_frame
{
width:732px
}
ul.gallery div.view_frame
{
margin-left:5px;
}
ul.gallery div.image_frame
{
border: 1px solid #dddddd; padding-top: 5px; height:100%; min-height:490px;
padding-bottom: 5px; text-align: center;
}
ul.gallery div.button_frame
{
width: 732px; text-align: right; margin: 4px 0px 0px 0px;
}
ul.gallery div.name_frame, ul.gallery div.original_name_frame
{
margin: 0px 0px 0px 5px;
}
ul.gallery div.name_frame h2
{
margin: 2px 0px 3px 0px;
padding: 0px;
}
ul.gallery div.date_frame
{
margin-left:5px;
margin-bottom:5px;
}
ul.gallery div.update_frame
{
width: 732px; margin-bottom: 5px; margin-top: 5px;text-align:right;
}
ul.gallery div.desc_frame
{
margin-left:5px;
background-color:#eeeeee;
}
ul.gallery li
{
width: 732px;
display: -moz-inline-stack;
display: inline-block;
vertical-align:top;
margin: 5px;
zoom: 1;
*display: inline;
_height:100%;
color:#000000;
letter-spacing:0px;
line-height:normal;
}
ul.breadcrumbs li
{
float:left;
margin:0px;
padding:0px;
width:100%;
}
ul.breadcrumbs li a
{
font-size:12px;
}
Since the image in the screenshot below may be cached you may not see the broken layout. I wonder if rendering the images in a table would be better? Or is there a css fix? I've even tried Jquery and used document ready to adjust the height of the image containers - but the image may not be loaded - so I can't return the height of the image in the function. Any suggestions on how to solve this issue?
If your images are all going to be the same width, output the IMG tag with a width attribute. this may help.
<img src="..." width="720">
Using input type="image" for this type of application is a bit odd. Why not just use an A-tag wrapped around an image?
This is the key to your problem:
however, when they are originally loaded, the httphandler is called after the page is rendered
An IHttpHandler sees the request before the response is sent to the browser and can do whatever it needs, including responding with a resized image. I'm doing that a lot, never had a problem. Since it doesn't work for you, I'm 100% you've got a bug in your HttpHandler.
If i create the image and load it into the cache in the custom image's prerender event - it seems to have fixed this issue. Originally the control rendered the image info to the src string in the browser and the image was then intercepted by a httphandler that calls a cachemanager (if exists - return, if not - create). Since the problem above seemed to happen only when the image was initially created - I figured recreating it before it was 'requested' may help - and it appears it has. If there are consequences to this - I will edit my solution.