This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Default textbox border-style and width
I have some TextBox on my page that should be red bordered from the code behind.
But the Multiline TextBox that present a vertica scrollbar, does not show the border from its side.
Here is my code that set the border:
foreach (var str in idsRequired)
{
var ctrl = (WebControl)FindControl(str);
if (ctrl != null)
ctrl.Style.Add(HtmlTextWriterStyle.BorderColor, "red");
}
I get controls by ID and the set theyr border.
Question is: how can i correctly border all the TextBox control?
EDIT
I finnaly end up with setting the border style to 2px and the right border appear. As you can see here:
How can you explain this?
As an advice, try to delegate the style of your controls to CSS files or ASP.Net themes. Why? Because you usually would want to reuse the same style across your website and imagine when you want to change the style again (which in a real application happens a lot), you would have to edit your code directly potentially introducing some undesired bugs, so avoid this and just separate your design from your code
You could declare the style in a CSS file and just import it to your page:
Using CSS
.txtWithRedBorder
{
border-style: solid;
border-color: #FF0000;
}
In your control
<asp:TextBox runat="server" Rows="5" TextMode="MultiLine" CssClass="txtWithRedBorder" />
Remember to place your CSS file under the Theme folder and add the following directive to the page to import automatically all the CSS files to your page
<%# Page Theme="Theme1"....
Or you could create an ASP.Net theme to accomplish the same effect:
<%# Page Theme="Theme1"....
<asp:TextBox runat="server" Rows="5" SkinID="someSkinID" TextMode="MultiLine" />
In your skin file:
<asp:TextBox runat="server" BorderColor="Red" BorderStyle="Solid" SkinID="someSkinID" />
Remember you need to specify the theme:
And this is the result
Related
I'm planning to apply a css on ToolTip attribute of asp:Image but it's not working. This is what I've tried so far.
<asp:Image ID="sampleimage" runat="server"
ImageUrl="~/Image/questionmark.png" ToolTip='<%# Eval("NAME") %>'
CssClass="tooltips" />
^ the text on tooltip shows but the css is not. It only has a white
background color.
.tooltips
{
background-color: Green;
width:150px;
height:20px;
}
This is from my stylesheet from other folders.
I'm totally new at using CSS. Any form of instructions will help. Thank you
You can not style tooltips with CSS only, because they are rendered by the browser, not your web page.
But you can use a JS library to render custom tooltips (which allow custom styling).
I like to use qTip2.
I know this might sound kinda stupid, but is it possible to set buttons, textbox etc etc.. in toolbox in visual studio 2015. but making the design in CSS?
I know you can give the same button the exact style form with CssClass="yourclass". But was thinking for this, and google didn't help me much.
ASP.Net controls render as HTML, so you can use CSS just as you would in any other circumstance.
Using element-based selectors:
input[type="text"] {
color: red;
}
<asp:Textbox runat="server" Text="This text is red!"></asp:TextBox>
Using ID selectors:
If you wanted to use specific IDs, it gets slightly trickier. ASP.Net controls do not render with their assigned IDs. You can circumvent this by applying ClientIDMode="Static" to your ASP elements:
#myTextbox {
color: red;
}
<asp:TextBox runat="server" id="myTextbox" ClientIDMode="static"></asp:TextBox>
It's important to note that you cannot use this for repeated elements (Gridview controls, repeater controls, etc), because element IDs must be unique.
Using class selectors:
Or, as you mentioned, you could use CssClass:
.textbox {
color: red;
}
<asp:TextBox runat="server" CssClass="textbox"></asp:TextBox>
I have the same behavior from many similar questions here.
But I tried anything and nothing happens to me.
I have 2 html controls. One anchor tag and a input button.
I applied vertical-align:top; float:right; display:inline-block; independently and together and nothing happens.
When I click on Close, I see a shadow like a button! I want them inline both controls
At the end of table I incluided a Div like this.
<div style="float:right;">
<asp:Button ID="btnInput" runat="server" Text="Add selected"></asp:Button>Close
</div>
You need to set a width for each element when you make them display:inline-block, otherwise they default to 100%.
Here is a jsFiddle with the closest equivalent markup I could make. (asp buttons don't work)
As Dolchio said, every element must have display: inline-block for this to work. Note that your float:right will not achieve anything helpful in this scenario.
Try adding the CssClass attribute to the asp button and styling that class.
So it would look like <asp:Button ID="btnInput" runat="server" CssClass="myButton" Text="Add selected"></asp> and in your css myButton{display:inline-block,vertical-align: top, width: 200px substitute width for whatever the width of the button is (not entirely familiar with asp buttons and their implied widths).
I am using an asp.net image button control. On page load I have the button set to:
imgbtn.visible = false;
It's not showing the image. However it still displays a gray border rectangle where the button should be. I have also tried setting a style of
border : none;
It still shows a grey rectangle where the button should be.
Is this normal?
Is there a work around?
If you are hiding the image using javascript, try setting the css style display to 'none':
imgbtn.style.display = 'none';
If you don't care keeping the border, directly in your ASP.net page,
Set it like that :
<asp:Image ID="image1" runat="server" Border="0" />
Or;
<asp:Image ID="image1" runat="server" BorderStyle="None" BorderWidth="0" />
If you want to keep borders, just do the same stuff when setting your image visible = false; in your code-behind.
I have created a table with borders collapsed around the table and a small gray border on each <td>. However the border is also surrounding each radio button items. The border attribute on the radio button appears to affect another border. How do I delete the border created on the <td> tag from the radio button list items?
<tr>
<td colspan="2">
<asp:Label ID="lblJoint" CssClass="boldIt" runat="server" Text="Is this for a joint account?" style="float: left; width: 200px;"></asp:Label>
<asp:RadioButtonList ID="rdlJoint" runat="server" RepeatDirection="Horizontal" Width="130px" style="float: left;" BorderStyle="None">
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem Selected="True">No</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
Use Flow RepeatLayout for RadioButtonList or create new css class for it : table.noBorder td { border: none; } and use this class for your radiobuttonlist
Susan,
From what I can tell, when asp radiobuttonlist method is used, by default it creates a table with each radio button as a separate td. The newly created table inherits the css class of the next table up the heirarchy. If you use the 'RepeatLayout="Flow"' attribute, it will convert them to spans using the cssclass you define in the radiobuttonlist definition. Hope that helps.
Oops, just looked at the date. This is a little old, but maybe helpful.
add style="border: none;" as attribute to the td-element
When Asp.Net is interpreted as HTML, by default, tags are placed around each radio button item. If you have set a style on the element in your table, it will also be inherited by the radio button elements. To turn the border off on styling off, use the following property on the radio button control: RepeatLayout="Flow".
The border property on the radio button control is a separate border.