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
Related
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 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.
I'm trying to select an element from my webpage...
I have inserted a control into my page and i need to set some values an element inside the control at pageload from c# code.. The thing is, as soon as I insert the control into the page... A prefix is appended to the id name... Because of that new name, my css definition won't be appended...
Is there any way to access this element from C# without the need to make it an Id?
Edit: To clarify what Im trying to do here. Im trying to make a generic control, which gets a width and height set to it's parameters. I need to set this manually to the element by adding a style attribute. I can't make the element an id, because this will stop the possibility of making it generic.
This is whats inside of the control... the fact is, I need the imageRotatorDiv to be a class instead of an id. Otherwise i can't use multiple image rotators on one page.
But how can I select a class in a page from c# code? Is it possible?
<div id="imageRotatorDiv" runat="server">
<div class="imageRotator">
<asp:Repeater ID="rprImages" runat="server">
<ItemTemplate>
<asp:Image ID="imgItem" runat="server" />
</ItemTemplate>
</asp:Repeater>
</div>
</div>
you can define your style to a class name instead of id.
<asp:TextBox ID="MyText" CssClass="someclass" runat="server" />
html output
<input type="text" id="Something_MyText" class="someclass" />
css
.someclass { border:solid 1px red; }
In JQuery :
$("div[id$=MyDiv]").addClass("myDiv")
And you just need to define the myDiv CSS class. Or, to modify directly the style :
$("div[id$=MyDiv]").css("font-size", "14px");
JQuery details
I am using the below code inside of a table:
<tr>
<td>User Language:</td>
<td>
<asp:DropDownList ID="Language" runat="server" Width="200px">
<asp:ListItem Selected="True">English</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td><span class="important">*</span>Company:</td>
<td><asp:TextBox ID="Company" runat="server" width="200px" /></td>
</tr>
When the code appears on the site the <asp:Textbox> control is 205px and the <asp:DropDownList> is 200px wide. What is causing that? They both are set to a width of 200px.
Because the textbox has 2px of border and 1px of padding on the sides.
The DropDown is resized regarding the size of the options you provide in it. So, If you have longer options, you will get longer drop down. In addition it takes more place for the arrow that is the right corner.
Not quite related, but here's a quick tip that will save you a lot of headache down the road:
Never use ASP:Textbox or ASP:DropDownList
<textbox runat=server> and <select runat=server> will work in every single case you could ever need, and they don't add any confusing properties such as "width" that don't quite work right.
Use real HTML tags with CSS classes for everything you do, and only add runat=server to the ones you actually intend to mess with from the backend.
When you insert data in the dropdownlist it resizes if you do not set the width property, but if you set the width it will not resize.
I have an asp.net listview. The data that populates it is sorted into groups, and i'm using some code in the listview item template, that essentially checks if the grouping field has changed in the data, and if so it prints a new row, with the heading, so it looks a bit like this:
<ItemTemplate>
<%# AddGroupingRowIfWPHasChanged() %>
<tr id="row" class="GridViewRow" runat="server" >
<td valign="top" align="left" ><%# Eval("item1") %></td>
.......
</itemTemplate>
This works great. However now I need to add a button the the group heading field, and I can't seem to get this to work. Obvioulsy this button only needs adding if the heading has changed, but the AddGroupingRowIfWPHasChanged() method does not seem to have access to the current ListviewItem, so I can't add a control.
Any suggestions on how I can add a control to a list view dynamically, depandant on whether its a group heading or not?
It may be easier to override the ItemInserting event in the codebehind and do it from there
Use a placeholder?
.aspx
<asp:Placeholder id="plhControlHolder" runat="server" />
code-behind
' ** use FindControl if instead a databound event, otherwise you could skip.
Dim plcControlHolder as PlaceHolder = e.Row.FindControl("plcControlHolder")
Dim btnDynamic As New Button
btnDynamic.Id = "MyButton"
plcControlHolder.Controls.Add(btnDynamic)
Try using the GroupTemplate and GroupSeparatorTemplate instead of trying to fit it all in the ItemTemplate.
Create a UserControl to include in place of the AddGroupingRowIfWPHasChanged() method call. Override Render(). Use the logic that's currently in AddGroupingRowIfWPHasChanged() to render the control if the group has changed; otherwise, render an empty string.