I have an asp.net form that is styled with CSS. I am trying to input a string into a textbox through the code behind the asp form.
Problem: All text that goes into any asp.net textbox is centered and in one line Figure 1
Attempted solution: Created a class in my CSS form and changed margins and alignments. Surrounded the textbox in a div with the class
Question: How do I revert the CSS back so all ASP.NET textbox's are back to normal
If you add class attribute to the form element then the given styles apply for all the elements within that form element.
Instead of doing that if you want to apply style for only one element add id attribute to the element and give styles.
Ex:
.form {
text-align: center;
}
above code apply center text for all elements.
<input id="txtBxId " value="Hello World!"/>
#txtBxId {
text-align: center;
color: red;
}
but if you do like this it will apply for single element
you can use textbox in centered text with 2 ways :
1) tag
<center>
<asp:TextBox ID='text'>
</center>
2) Input :
<html>
<style>
#txtBxId {
text-align: center;
color: red;
}
</style>
<body>
<input id="txtBxId " value="Hello World!"/>
</body>
</html>
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!
I have a drop down list, when I change the drop down list a telerik tree will be loading which is in a partial view and ajax loading bar appears in the tree content only. But I want to disable the page (user should not be able to use the page but he should see the page) while the content is loading and show the user a "loading....." screen.
If you use MVC's Ajax.BeginForm to do your ajax call back (rather than jquery) you can use the built in AjaxOption called LoadingElementId. The downside is that it will require you to use a form to post instead of using $.ajax(). In the form you have to have an invisible button and the onchange event for the dropdown would have to build the form data in hidden fields and then issue a click event to the hidden button.
The other approach is to toss a div up like this:
<div id="loading-pane">
<img src='<%: Url.Content("~/Content/Images/ajax-loader.gif") %>' />
</div>
and then css like this
#loading-pane { display:none; opacity: 0.8; position: fixed; top: 0; left: 0;
width: 100%; height: 100%; filter: alpha(opacity=80); -moz-opacity: 0.8;
z-index: 999998; background-color: #ffffff; }
#loading-pane img { position: absolute; top: 40%; left: 47%; z-index: 999999; }
then something like this
$('#MyDropDown').change(function() {
$('#loading-pane').show();
$.ajax({
success: function() {
$('#loading-pane').hide();
}
});
});
Perhaps you could make use of BlockUI
#control {
position: absolute;
right: 0px;
top: 0px;
}
You cannot. That's because ContentPlaceHolder does not render to anything on a page.
You can however wrap a div around it and then apply the styles to it:
<div class="control">
<asp:ContentPlaceHolder runat="server" ID="Content" />
</div>
If your intension is to render out a div-element I would suggest that you used the Panel-control instead. You can still add/remove child Controls if you'd like (as with the ContentPlaceHolder).
// In your CSS
.control { position: absolute 0px 0px; }
// In your form
<asp:Panel ID="pnl" Runat="server" CssClass="control" />