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>
Related
I am creating a treeview in asp.net and able to bind treeview perfectly.But my tree view is looks the following image which is as default layout of treeview control.
I am using the following code
$(document).ready(function () {
$("div[id=tvCategories] input[type=checkbox]").click(function () {
$(this).closest('table').next('div').find('input[type=checkbox]').attr('checked', this.checked);
$(this).parents('div').each(function (index) {
if ($(this).find('input[type=checkbox]:checkbox').length > 0) {
$(this).prev('table').find('input[type=checkbox]').attr('checked', true);
}
});
});
});
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TreeView ID="tvCategories" NodeIndent="25" OnTreeNodeDataBound="tvCategories_TreeNodeDataBound" Style="font-family: 'Lato', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 5px; margin-bottom: 5px; margin-left: 50px; color: Black; font-size: 12px"
runat="server" ShowCheckBoxes="All">
</asp:TreeView>
</ContentTemplate>
</asp:UpdatePanel>
But I want need the following layout. which I am not able to create this
Please help me to create this.Is Trieeview control is match for this layout or bind it by other way ?
What you are intending to do is not possible to elegantly do because of the default HTML that is rendered by the TreeView control (Table -> Div -> Table, Div etc).
You could however use a CSS control adaptor to change the way the default HTML is rendered (Ul -> Li -> Ul -> Li). The HTML that is rendered using this approach is nested and therefore can be targeted using CSS to attain the look you are seeking to achieve. You may have to rewrite some of your code and create a custom implementation.
See http://samples.asp.net/cssadapters/TreeView.aspx for code examples.
I hope that helps!
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'm using two DIV s one below the other. In the Top DIV I'm using a Multiline Label in which data is generated Dynamically.
When the Data in the Label is a bit larger then Space is not generated but the exceeded data merges with the lower DIV
Here is the Css for Div
white-space:inherit;
Here is the Css for Label
float: left;
width: 30%;
overflow:auto;
Can you help me?
Give the fist DIV class name .container and write css as -
.container{
overflow: hidden;
}
The label is merging into next div because it has float: left property. overflow: hidden; will help you prevent this behavior.
Below is one item in my page, which consists of the div containing two side by side divs. The first of which is an outline number to an entry in an outline, and the second item to the right of it is the content of that entry in the outline. The Controls_ContentPanel div can contain many different things, often some text paired with a single input control. In the case of the textbox, I had a problem in that the textbox's font styles were not inherited, and so it's font was larger, and thus the line-height was larger, and thus the text in the same div as the textbox used the larger line-height. However the line-height in the first div containing the outline number text was smaller, and thus the text in the span that was paired with the textbox was not aligned with the text in the outline number. I fixed this by jacking the line-height of both divs up to 22px.
That works, but now I have another problem when I have a radio button, because the input button's computed height is 13px and the text in the same div is moved down a few pixels and doesn't align with the outline text. If I reduce the height of the radio button to 11px it fixes the problem. If I make it larger it makes the problem worse, such that the text with the radio button is aligned at the bottom of the button, and is lower than the outline number text. I tried applying a CSS class to the RadioButton contorl that sets it's height to 11px, but the problem is the span tag gets the class, and the nested input tag does not inherit the height. I am developing a server control and I want to use CSS that does not globally effect all radio buttons on the page, but only the radio buttons I generate. So I had hoped to use Css Class, but it is not effecting the radio button itself since ASP.NET is rendering the css class on the span tag instead of the input tag. So either looking for a nice way to apply the css class to the input tag from my C# code, or some other way to get the text in both div's to align consistently.
Simplified snippet of code trying to apply CSS class to radio button control, but the generated html applies the css class to a span tag instead:
RadioButton radioButton = new RadioButton();
radioButton.CssClass = "Controls_RadioButtonInput";
this.Controls.Add(radioButton);
My CSS file:
/*The first three indent levels*/
.Controls_IndentLevel0
{
font-weight: bold;
font-size: 12pt;
}
.Controls_IndentLevel1
{
font-weight: bold;
font-size: 10pt;
}
.Controls_IndentLevel2
{
font-weight: normal;
font-size: 8pt;
}
/*The div tag that contains each node*/
.Controls_NodePanel
{
clear: both;
font-family: MS Sans Serif;
font-weight: normal;
/*font-size: 8pt;*/
font-style: normal;
line-height: 22px;
border: 1px;
margin: 3px;
}
/*The div tag that contains the outline number*/
.Controls_OutlineNumberPanel
{
float: left;
line-height: 22px;
}
/*The div tag that contains the content of a node, such as a label and textbox, a table, or any of the other controls we've implemented.*/
.Controls_ContentPanel
{
float: left;
line-height: 22px;
}
/*Trying to fix a text alignment issue caused by large radio buttons*/
.Controls_RadioButtonInput
{
height: 11px;
}
The generated HTML:
<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__10">
<div class="Controls_OutlineNumberPanel" id="ID_1__10_0">
<span id="ID_1__10_0_0">XIV.</span>
</div>
<div class="Controls_ContentPanel" id="ID_1__10_1">
<div id="ID_1__10_1_0">
<span disabled="disabled" class="Controls_RadioButtonInput">
<input type="radio" disabled="disabled" value="ID_1__10_1_0_0" name="a" id="ID_1__10_1_0_0">
</span>
<span id="ID_1__10_1_0_1">
text here for radio button selection
</span>
</div>
</div>
</div>
Edit, I tried adding line-height to the spans directly, as a test, and no luck. According to firebug they were already inheriting the line-height, but I applied it directly just to make sure, and it had no improvement on the alignment:
<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__6">
<div class="Controls_OutlineNumberPanel" id="ID_1__6_0">
<span id="ID_1__6_0_0" style="line-height: 22px;">non0005</span>
</div>
<div class="Controls_ContentPanel" id="ID_1__6_1">
<div id="ID_1__6_1_0">
<span disabled="disabled" class="Controls_RadioButtonInput" style="line-height: 22px;">
<input type="radio" disabled="disabled" value="ID_1__6_1_0_0" name="a" id="ID_1__6_1_0_0">
</span>
<span id="ID_1__6_1_0_1" style="line-height: 22px;">
Competitive HC Only [Competitive 4% and/or 9% Housing Credits]
</span>
</div>
</div>
</div>
Try making the inner spans have the same line-height as the divs (22px) and then setting the vertical-align to be middle.
i have a tagtextbox on my page
when a user selects a category that category name goes to tagtextbox
now i want that this category name user cant change but he can append some more tags
means first tag becomes readonly and further he can add too in same text box
This is not possible.
Instead, you can put the first category name in a <span>, and put the textbox after the span.
You can then apply border: none to the textbox and make your own border around the entire thing to make it look like a single textbox.
CSS :
<style type="text/css">
.div {
margin:20px;
padding:10px;
background:#ccc;
float:left;
}
.textarea {
border:0;
display:block;
font-size:12px;
padding:5px 5px 0;
outline:none;
}
.span {
display:block;
background:#fff;
font-size:14px;
padding:5px 5px 5px;
color:green;
outline:none;
}
</style>
HTML :
<div class="div">
<div class="span">
<asp:TextBox runat="server" ID="txtNumber" BorderStyle="None" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" ValidationExpression="\d+" ControlToValidate="txtNumber" ErrorMessage="Only Numbers are allowed" Display="Dynamic" />
</div>
</div>
You can't make part of a textbox editable and another not.
My suggestion would be to change the type of element from a TextBox to a div or span via Javascript as soon as the user begins to enter the next tag.
If you want to allow append has in "paste" action, then you can't do that. Else and you just want to append via your code, why not use just a div to show what he has selected and add the selections to your post on a hidden textbox?
Adding to what SLaks said - Here is an example of a CSS & HTML hack where someone has added a span under the textbox. To make it look like it is part of the same textbox there is a border round the enclosing div. It looks quite effective.
textbox with uneditable name at the bottom