I want to write css for textbox in asp.I'm familiar with html,php. Struck to convert html css to asp css.
css for html input
input[type=text],textarea,select,input[type=password]{
float:right;
margin-right:20%;
width:155px;
}
I want to convert this to input boxes
<asp:textbox runat="server"></asp:textbox>
<asp:dropdownlist runat="server"></asp:dropdownlist>
You need to find something which has the type attribute equal to text in HTML
CSS
input:not([type]), input[type="text"] {
background: green;
}
or make the HTML explicit.
<input name='t1' type='text' id='txt1' />
Now you can customize the CSS attribute according to your requirement.
Hope it helps
You can use CssClass property and then style it as you require. For example
<asp:TextBox runat="server" ID="MyTextBox" CssClass="MyCss"></asp:TextBox>
and then style it using MyCss
Further info here
Related
Please see aspx page below, I have a text box that I am trying to italicize the placeholder text. Do I use css? I've never really used so if so please show with example. Thanks!
<asp:TextBox ID ="txtMyTextBox" runat="server" ClientIDMode="Static" MaxLength="30" Width="115px" placeholder="Text Box"></asp:TextBox>
So you want to style the place holder of your textbox control. Follow this format to structure it:
::placeholder {
/* your css declarations; */
}
And if you want to style different textboxes differently, you can add styles like below to your textbox.
<style>
.MyTextBox::placeholder {
color:red;
font-style: italic; /*I see you needed an example for italic text*/
}
</style>
<asp:TextBox ID ="txtMyTextBox"
runat="server" ClientIDMode="Static"
MaxLength="30" Width="115px"
CssClass="MyTextBox"
placeholder="Text Box">
</asp:TextBox>
Working Example:
.MyTextBox::placeholder {
color:red;
font-style: italic; /*I see you needed an example for italic text*/
}
<input type="text" class="MyTextBox" placeholder="Hello World"/>
For IE 10-11:
.MyTextBox:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
I want to increase the space between two textboxes without using the line break. I've created a CSS rule but it has no effect when displaying the page.
These are the textboxes
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label><asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox><br />
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label><asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> <br />
I have this CSS rule in CSS file
div#page .textboxcontainer{
margin: 10px auto;
Any help is really appreciated
margin doesn't work on asp:label, since asp:label is rendered into span, which is an inline element
Try adding display:inline-block to your css rule.
Your <asp:Label> will render as an HTML span, which displays inline by default, causing top and bottom margin to be ignored. Add display: block or display: inline-block to your .textboxcontainer rule.
ASP Label controls render in a <span> tag at runtime. This is what is giving you trouble. Simply wrap the label and textbox control in their own div and you will get that block separation. Add a class to that div and give it a margin-bottom: XXpx and you are on your way
<div class="form-group">
<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label>
<asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label>
<asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox>
</div>
CSS
.form-group{
margin-bottom: 10px;
}
I'm a beginner in CSS and i need to set the style for all the asp:Labels i got in my page.
I can do this for html label control:
label
{
color:red;
}
<label ID="mylabel" runat="server">My Text</label>
but that doesn't work for asp:Label control.
I could find online that i can do it adding a CSSClass attribute to each asp:Label control and then set the attributes of my CSSClass at the top of the page.
.myclass
{
color:red;
}
<asp:Label ID="mylabel" runat="server" CSSClass="myclass">Test</asp:Label>
But this way i'll have to go through all the asp:Label controls and give them CSSClass="myclass". Is there a way i style all my asp:labels in the same way i styled the html labels above?
The asp label renders like a span tag. So try to give style for a span tag.
label, span { color:Red; }
See here for more information
You can use inline style sheet as follows:
<asp:Label ID="Label1" runat="server" Text="Label" style="color:Red;
font: 12pt Verdana;font-weight:700;"></asp:Label>
You can do it from the back end also:
VB:
Label1.Attributes.CssStyle.Add("color", "Red")
C#:
myDiv.Attributes.CssStyle.Add("color", "Red");
I have a Checkbox with text that is fairly lengthy as shown below. One thing we don't want is for the text to wrap below the checkbox. What I have done to fix this is to put spaces. Also not that part of the text is bold as well:
<asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Attend in person. This is the best way to gain critical knowledge and express your thoughts and opinions.<br /> Ample time will be provided for individual discussions during breaks and at the networking reception.
Is there a way for the text not to wrap below the checkbox and still have the boldness in the text I need?
Note that I still want the text to wrap but not below the checkbox. Meaning it should wrap below the previous line's text.
From the moment you have the text outside of your check box you can warp it with a span and nowrap style as:
<span style="white-space: nowrap;">
<asp:CheckBox ID="chkOption1" runat="server" /> <b><u>Option 1</u></b> - Att ........
</span>
if you place your text inside the text of your check box, you can use the style attribute as:
<asp:CheckBox runat="server" ID="chkOption1" style="white-space: nowrap;" Text="too long text" />
The render html is the same.
This link describes a solution. In short:
do not use the CheckBox Text
rather, use an extra Label
set the CheckBox style float: left
set the Label style display: table
I just found a solution: the key is to use display:table and display:table-cell.
Here is the asp.net code:
<asp:CheckBox ID="..." runat="server" CssClass="mobilesubtitle" />
and here is the html code produced (relevant parts):
<span class="mobilesubtitle">
<input type="checkbox" name="..." id="...">
<label for="...">text</label>
</span>
All you need to do in css is:
span.mobilesubtitle {
display: table;
}
span.mobilesubtitle > input{
display: table-cell;
}
span.mobilesubtitle > label {
display: table-cell;
vertical-align: top;
}
inline-table also seems to work.
I have a login FORM inside a Hidden DIV, this DIV is hidden using CSS display:none; when I click on some other DIV, I show this DIV using jquery .slideDown(), so I can be able to use this form.
When I click on the button, the OnClick="Login" doesn't seem to work,and when I removed this form from this hidden div to simply another place in the body, it worked. What's the problem?
ASP.NET:
<div id="userCPContainer">
<form id="loginForm" runat="server">
<asp:Label ID="Label1" runat="server" Text="Username" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="usernameField" runat="server" MaxLength="50" class="loginFields"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="Password" class="loginLabels"></asp:Label>
<br />
<asp:TextBox ID="passwordField" runat="server" MaxLength="50"
TextMode="Password" class="loginFields"></asp:TextBox>
<asp:Button ID="loginButton" runat="server" Text="Log in" onclick="Loginn" class="loginButton"/>
</form>
</div>
JQUERY:
function showUserCP() {
$("#userCPContainer").slideDown(200);
$(".userCPDiv").css("background-color", "#000000");
$(".userCPDiv").css("border-color", "#000000");
}
function hideUserCP() {
$(".userCPDiv").css("background-color", "rgb(43, 147, 206)");
$(".userCPDiv").css("border-color", "rgb(43, 147, 206)");
$("#userCPContainer").slideUp(200);
}
$(".userCPDiv").click(function (e) {
//Either way, hide Main Menu
hideMainMenu();
if ($("#userCPContainer").is(":visible")) {
hideUserCP();
}
else {
showUserCP();
}
e.stopPropagation();
});
CSS:
#userCPContainer
{
overflow:hidden;
border-style:solid;
border-top-style:none;
border-color:rgb(43,147,206);
border-width:2px;
position:absolute;
right:0px;
top:0px;
display:none;
z-index:1;
width:300px;
background-color: #000000;
}
Nothing really complicated...
When you use CSS display: none; the problem is that all that's inside that DIV gets removed completely from the HTML Document and that causes that ASP.NET does not recognize this element when you show it via jQuery. I see to possible solutions:
Use visibility: hidden instead of display: none;, if you do this you will probably have some problems with the DIV height because it will take the space needed to render but it will not be visible.
Use a ScriptManager and an UpdatePanel and put the div and the form inside those elements, so the server will know when you render the Button in the client. Also, make sure that you register your jQuery scripts inside the ScriptManager
Hope this helps you