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.
Related
I wish to make buttons just like the navigation ones in opera gx new tab or firefox new tab in asp.net for my web site
background-origin: content-box;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
I tried something like this but I think is much deeper than that...
your css codes have no relationship with the color ,and i'm not sure which color you do want,but I could give you some suggetions to get the color you want .
You could copy the img to the default Paint App of windows and get the RGB color:
You could adjust the value until you got the value you want
I tried as below:
<style>
input{
width: 230px;
height: 80px;
background-origin: content-box ;
background-position: 50% ;
background-repeat: no-repeat ;
background-size: cover ;
background-color:rgb(28,23,38);
border-color:rgb(250,30,78);
border-style:solid;
color:rgb(250,30,78);
font-size:40px;
}
</style>
<input type="button" value="Click" id="but"/>
the button:
I have an image control that is displaying a logo on the page. The image is 500 x 500 pixels, but when this appears on screen the control shrinks it down to 19x20. I can't figure out how to override any CSS that is setting this smaller size, or how to generally make it bigger. If I use Google Chrome, Inspect and then edit the attributes I can see that it should be fine, I just can't get it to run properly.
Here are some code snippets from my site:
ASPX:
<asp:Image ID="imgLogo" runat="server" Height="500" Width="500" CssClass="logoImage" ImageAlign="Middle" /> <p></p>
The CSS I'm using is:
logoImage {
width: 500px;
height: 500px;
}
The generated mark-up is:
<img id="mainContentPlaceHolder_imgLogo" class="logoImage" skindid="btnCSV" src="../App_Themes/Main/images/logo.gif" align="middle" style="height:19px;width:20px;">
The image URL is set in the code behind.
Your class definition is missing a dot. Also try adding !important attribute:
.logoImage {
width: 500px !important;
height: 500px !important;
}
But do try find out where that height:19px;width:20px comes from (maybe from mainContentPlaceHolder size or from in-code assignment).
I'm creating a form and am trying to do validation on my bootstrap form, using bootstrap components. I'm using a c# class library to do my server side validation, and then use the c# code-behind to validate the styles when the form meets a validation condition. I use a panel to hold my form control as such:
<asp:Panel ID="TeacherNamePanel" CssClass="form-group" runat="server">
<asp:TextBox ID="tbTeacherName" CssClass="form-control input-lg" placeholder="Teacher-in-charge" runat="server"></asp:TextBox>
</asp:Panel>
and in the code-behind to validate the style:
if (teacherName.Length == 0)
{
TeacherNamePanel.CssClass = "form-group has-error has-feedback";
Label span = new Label();
span.CssClass = "glyphicon glyphicon-remove form-control-feedback";
span.Attributes["style"] = "vertical-align:middle";
TeacherNamePanel.Controls.Add(span);
}
else
TeacherNamePanel.CssClass = "form-group";
However, my glyphicon is not centred in my form's input control, it's too low. Anyway to rectify this problem? Tried to change the positioning for "top" in the css for .has-feedback .form-control-feedback but to no avail.
Just a couple of ways to achieve what your after.
Use different syntax:
span.Attributes["style"] = "vertical-align:middle";
to
span.Attributes.Add("vertical-align", "middle");
Add a css class and apply it to label with the CssClass property. For instance:
This goes in your css file
.centerAlign {vertical-align: middle;}
then the following should work
span.CssClass = "centerAlign";
and will generate:
<span class="centerAlign">your text</span>
Try using !important to force the attribute to override predefined ones like so:
span{vertical-align:middle!important;}
Solved! I copied the following css from bootstrap.css
.has-feedback .form-control-feedback {
position: absolute;
top: 25px;
right: 0;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
}
and pasted it in my own stylesheet and adjusted top and right to fit my input box. Thanks for your help and advice guys!
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