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'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!
My Problem:
I have a fluid CSS design layout that works brilliantly, albeit until my asp.net: table messes things up! When the user reduces the browser size or if the user is logged on via a mobile device my table will extend itself to it's actual width which is approx 1000px.
What iv'e tried to do:
Iv'e tried using javascript code to fix this and it works only if i specify the max width but i need a way for this code to know the current max width of the screen
My code used:
the script:
<script language="javascript" type="text/javascript">
$('#dvTableDock').width($('#dvPageWidth').width());
</script>
i then create a style:
.TableDock
{
overflow-x: auto;
overflow-y: auto;
width: 870px; // Need to dynamically specify width here
height:200px;
padding: 0 0 17px 0;
}
i then add a div that gets screen width and apply the style and script to another tag that wraps the table:
<div id="dvScreenWidth" visible="false">
</div>
<div class="TableDock" id="dvTableDock">
//table in here
</div>
What i want is for the dock to know when to show the horizontal scroll, i.e when the screen width becomes less than 1000px and the table begins to extend out of the page.
I really hope i have made my self clear in this question but please let me know what other information is needed to help me. Thanks to anyone that helps or corrects any of my mistakes.
Instead of using fixed width (ie, pixels units) use percents.
.TableDock
{
overflow-x: auto;
overflow-y: auto;
width: 95%;
height:200px;
padding: 0 0 17px 0;
}
So this is my own solution which worked:
.TableDock
{
overflow-x: auto;
overflow-y: auto;
//Remove the width and height completely
padding: 0 0 17px 0;
}
I solved this by removing the width and height completely
In my Asp project,..
I have used Icon file in Button. But those Icons not fit to Buttons. It half of the height only visible.
My Code is..
<asp:Button ID="btnCoverPlus" runat="server"
style="background-image: url('Images/plus.ico'); background-repeat:no-repeat; background-position:center; width:32%; font-size:medium;"
Height="25px" onclick="btnCoverPlus_Click" /> <br />
How to fit the Icons in ASP buttons?.
The obvious is to change the icon side, but you can also try to auto resize it with the style by adding :
background-size: 100% Auto;
or direct set the size
background-size: 16px 16px;
please note that only CSS 3 supports that.
try to increase button height by changing Height="25px property
I know I can just use a master page, but what markup do I use on the master page to always have a header at the top and a footer all the way at the bottom using some CSS code?
For the footer:
It's called a Sticky Footer. You can google it and find some (google css sticky footer). I like this one.
Although I am not perfectly sure, what your context is, in general you can do this by setting display:fixed for your footer and header id/class and using bottom:0 for the footer and top:0 for the header.
You probably want to include a high z-index for both so they are always displayed at the upper-most layer.
The problem with this solution is that the actual content of the page scrolls behind both items, and may be unreadable, so you have to tweak the top and bottom margin for both.
This is a quick and dirty information to get you started, as you did not provide more details in your question.
Use position: fixed
So a header might be:
.header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
}
And a footer:
.footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
}
That would be a 100px high header and a 50px high footer at the bottom. Note that position: fixed does not work in IE6 by default