We Keep Coding

Is it possible to add tools in the toolbar and designed in CSS in a ASP.net (C#) project?

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>

How to add space in-between the list items of a RadioButtonList asp.net Control?

Having spent some time googling the issue and trying a few things I can't seem to find a solution for this. I have a RadioButtonList control that looks like:
<asp:RadioButtonList ID="rblCheck" runat="server" RepeatDirection="horizontal">
<asp:ListItem Value="red">Red</asp:ListItem>
<asp:ListItem Value="green">Green</asp:ListItem>
</asp:RadioButtonList>
Now when I look at it in a browser both the buttons are really close together. Is there any way for me to space them out? I tried margin-left css but that didn't sort it. Any suggestions would be awesome. Thanks.

You can do it in many ways. For instance you can set the CssClass property of RadioButtonList control. Look below.
<asp:RadioButtonList ID="rblCheck" runat="server" RepeatDirection="horizontal" CssClass="spaced">
<asp:ListItem Value="red">Red</asp:ListItem>
<asp:ListItem Value="green">Green</asp:ListItem>
</asp:RadioButtonList>
Then in your css declarations you can define the spaced class like this
.spaced input[type="radio"]
{
margin-right: 50px; /* Or any other value */
}
Or if you wish to use different spacing for list items you can do it by specifying it with style attribute for each listitem this way
<asp:RadioButtonList ID="rblCheck" runat="server" RepeatDirection="horizontal">
<asp:ListItem Value="red" style="margin-right:20px">Red</asp:ListItem>
<asp:ListItem Value="green" style="margin-right:30px">Green</asp:ListItem>
</asp:RadioButtonList>

Just add some CSS for it:
input[type="radio"] {
margin: 10px 10px;
}

Just add some CSS for it
input[type=radio] {
margin-left: 8px;
}

How did you assign the CSS to that list? The reason I ask is because if you tried to assign the CSS to the list by referencing the ID "rblCheck" that won't work (.NET will change the ID and append some numbers to the value).
Try adding the CSS inline or giving the list a class to assign the CSS to.

how do i change the width of my textbox in css?

i added a asp.net textbox into my webpage and cover it with css like shown below
<tr>
<td id="policeprofileachievement" colspan="2" align="center">
<b>Achievement :
<asp:TextBox ID="txtAchievement" runat="server" ReadOnly="True" TextMode="MultiLine"></asp:TextBox>
<br />
</td>
</tr>
In my source code i have added a width for the textbox. But in my css, i added this but it didnt resize my textbox width
#policeprofileachievement [type="text"] {
position:absolute;
margin-top:250%;
left:0%;
width:150px;
}
AND/OR
I removed the policeprofileachievement from my CSS and added this ( which is recommended by many )
#txtAchievement{
position:absolute;
margin-top:250%;
left:0%;
width:150px;
}
But there doesn't seem to have any changes on my textbox size either
Is there any other way to resize my textbox size?
Regards

.txtbox
{
position:absolute;
margin-top:250%;
left:0%;
width:150px;
}

#txtAchievement{
position:absolute;
margin-top:250%;
left:0%;
width:150px;
}

Why dont you simply create a css class and add it to your textbox's cssclass property, like so..
.tb_style
{
position:absolute;
margin-top:250%;
left:0%;
width:150px;
}
THEN ADD IT TO YOUR TEXTBOX LIKE SO
<asp:TextBox ID="txtAchievement" runat="server" ReadOnly="True" TextMode="MultiLine" Height="150px" Width="500px" CssClass="tb_style"></asp:TextBox>
This will also allow you to add same style to other TextBox(s) and create a constant look and feel to the webpage with minimal effort
Make sure you dont write some rule inline to your textbox thats also there in the cssclass...cuz your inline rule will override the rule in class.

The CSS selector #policeprofileachievement[type="text"] means "a tag with ID policeprofileachievement and type=text", which selects nothing because the td with id=policeprofileachievement has no type attribute.
You can use #txtAchievement to select the textbox because it has an id (no need to specify [type="text"]).
Alternatively, if for some reason you need to select multiple text input fields under policeprofileachievement, you could do
#policeprofileachievement input[type="text"]

CSS means cascading style sheet. So your css code block renders second but the text box that you have written already has a width component which will be 'cascaded' by the css you have written. Remove the css width property and your code should work.
With your present code try giving width below 150px. That may work.

Try this:
put space between #policeprofileachievement and [type="text"]
means style for inner all [type="text"] in #policeprofileachievement
#policeprofileachievement [type="text"] {
position:absolute;
top:250%;
left:0%;
width:150px;
}

Try this.It should work..For me its working..
.aspx
<asp:TextBox ID="txtAchievement" runat="server" ReadOnly="True" TextMode="MultiLine"> </asp:TextBox>
CSS
<style>
#txtAchievement
{
width:50px;
}
</style>

C# ASP.Net RadioButtonList within table: <td> border also creating border arount LIST ITEMS

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.

ASP.Net Checkboxlist Background color

I have a checkboxlist on aspx
<asp:CheckBoxList ID="cblCalendarFilter" runat="server" />
I add the listItems from code behind.
newCkItm = new ListItem();
newCkItm.Text = childrenFoldersData[i].Description.Trim();
newCkItm.Value = childrenFoldersData[i].Id.ToString().Trim();
newCkItm.Selected = true;
I can add the background of the ListItem by
newCkItm.Attributes.Add("style", "background-color:Red;");
The colors will be different from one item to another and the name of the item will also be different. So, the problem is the background color is only covering the text length. The background color is not aligned for all Items. I checked with the inspector and found out that..
The background color style is applying to <span> surrounding the text
All spans are inside the <td>.
I am wondering if there is a way to apply that style to <td> without much effort. I'd rather not use jquery and javascript by searching the name.
Is there any way to do that??

I have tried and found this solution & it worked for me.
Just try to give padding-right
for example:
newCkItm.Attributes.Add("style", "background-color:Red;padding-right:30px");

Instead of adding a style attribute to each item, and because you mentioned each item needs a different background colour, I'd add an id attribute:
newCkItm.Attributes.Add("id", "alpha");
That way you can keep all your styles separate from your code and not have to recompile, etc. every time you need to tweak the CSS.
With the <asp:CheckBoxList /> the CSS itself would look something like this:
#cblCalendarFilter {
border:none;
border-collapse:collapse;
}
#cblCalendarFilter td {
padding:0;
}
#cblCalendarFilter span {
display:block;
padding:2px;
}
#cblCalendarFilter #alpha {
background:red;
}
#cblCalendarFilter #beta {
background:yellow;
}
Hopefully making the span block-level will fix the issue you had with the background colour only covering the text length.

How about if you use a Repeater which has tr/td with CheckBox inside it and do the logic on the ItemDataBound event where you can retrieve the td:
<table>
<asp:Repeater ID="rpt" runat="server" OnItemDataBound="rpt_ItemDataBound">
<ItemTemplate>
<tr>
<td id="myTd" runat="server">
<asp:CheckBox runat="server" ID="myCheckBox" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>

I think there is no other way, you have to individually access the element and assign the css to items. I tend to use foreach loop, access the item and add attributes. TBH, I would stay with checkboxlist compared to repeater, unless I need some extra functionality