Alignment and padding for asp:CheckBoxList - asp.net

I have an asp.net checkboxlist as follows:
<asp:CheckBoxList ID="CheckBoxList_Genres" runat="server" RepeatColumns="3">
<asp:ListItem Selected="True">Action</asp:ListItem>
<asp:ListItem Selected="True">Comedy</asp:ListItem>
<asp:ListItem Selected="True">Classics</asp:ListItem>
<asp:ListItem Selected="True">Documentary</asp:ListItem>
[...]
I have two problems: the text does not align with each checkbox, and in some browsers (notably Safari), there is no padding between the checkbox and the text (the text rides up against the checkbox). I am aware of the answer posted here:
How to align checkboxes and their labels consistently cross-browsers
However, I can't work out how to implement these styles in the asp:checkboxlist context; I know that a css style can be set for the checkboxlist, but do not think that this allows me to set separate styles for the "label" and the "checkbox". Help would be appreciated.

You should be able to apply the same methods to the CssClass property of your CheckBoxList control as you would a regular checkbox.
Here is some CSS code I used to indent long text next to an ASP.net check box list:
.chkChoice input
{
margin-left: -20px;
}
.chkChoice td
{
padding-left: 20px;
}
ASP.net:
<asp:CheckBoxList id="ChkWork" runat="server" TabIndex="2" CssClass="chkChoice">

In the properties of the check box list, switch the repeatlayout from flow to table. That will align the columns.

some of checkboxlist items, has label, for space between text and the item, for example checkbox, you have to give type of item in Css.
Exlampel:
.myCheckBoxList label
{
padding-right: 5px;
}
and give che checkboxlist class like this:
CssClass="myCheckBoxList"

One of the properties of asp:CheckBoxList is RepeatLayout="Table". This will result to a table-like list where all is checkboxes are aligned.
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" RepeatLayout="Table" Width="100%">
Output:

Related

Hide dropdown box when ASP.NET dropdownlist is empty

since I combined an asp:dropdownlist with an asp:checkboxlist, I have the problem in IE(8) and Firefox (Chrome works fine) that everytime I click the DropDownList, the empty box appears in addition to the popup I manually open when the dropdownlist is clicked.
My question now is: How can I hide this empty box (since there are no entries in it), but keep the dropdown element? I don't want to replace this component, since it still should look like a dropdownlist. If I change it to a text box it's not clear anymore that it can be used as a dropdown.
This is what I currently have in place:
<div style="width: 190px;" class="right">
<!-- the original drop down list -->
<asp:DropDownList CssClass="dropdownbox" ID="ddlCountry" runat="server">
</asp:DropDownList>
<cc1:PopupControlExtender ID="ddlCountry_PopupControlExtender" runat="server" DynamicServicePath=""
Enabled="True" ExtenderControlID="" TargetControlID="ddlCountry" PopupControlID="pnlPopup"
OffsetY="20">
</cc1:PopupControlExtender>
<!-- Popup control extender that maps the country list to the dropdown list -->
<asp:Panel ID="pnlPopup" runat="server" CssClass="dropdowncheckbox">
<!-- List of countries with a checkbox for each entry -->
<asp:CheckBoxList ID="countryList" runat="server"
DataTextField="Countries" DataValueField="Countries" AutoPostBack="True"
OnSelectedIndexChanged="countryList_SelectedIndexChanged">
</asp:CheckBoxList>
</asp:Panel>
</div>
If there is a component that fits my purpose better, please let me know.
Thanks a lot in advance for your suggestions.
Place this code in the event you need to trigger the change
This will work for c#
if(dropdownlist.Items.Count == 0)
{
dropdownlist.Attributes["style"] = "display: none;";
}
else
{
dropdownlist.Attributes["style"] = "";
}
Simply set the Drop Down List Enabled property to false and toggle it to true when it has entries.
dropdownbox.Enabled = false;
do something like this in c#:
if(dropdownlist.Items.Count == 0)
{
dropdownlist.Visible = false;
}
else
{
dropdownlist.Visible = true;
}
Encapsulate the dropdown in a div, give the div an id and the runat="server" property
Check in the code behind of the data to load the dropdown is empty set the div to visible false; if not, set the div to visible true.

styling asp controls by using stylesheet

i want to ask how i can apply style on asp tags by using stylesheet???
For example i want to style a asp button control like following
<asp:Button ID="btnhme" runat="server" Text="Home" Width="145px"
BackColor="#3399FF" />
i know i can style it by using its properties but i want that if i have 10 buttons in my page then same style is apply to all buttons automatically and i have to do it for my all pages buttons and labels controls and i cannot set properties for all separately
is there is a solution by using stylesheet and if not by using stylesheet then what should i do that the style apply to all button controls and textbox,labels controls also
<asp:Label ID="lbllogin" runat="server" Text="LogIn Here"></asp:Label>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
please guide me how i can solve this issue
Thanx :)
Add the CssClass property to the Button control, for example, and add a corresponding class to the CSS file.
aspx
<asp:Button ID="btnhme" runat="server" Text="Home" Width="145px" BackColor="#3399FF" CssClass="my-buttons" />
CSS
.my-buttons { background-color:#3399FF; }
well you could set default css for each element, this would automatically cause every control of this type to take on this css:
input[type=text] {
//styling
color:blue;
}
label {
//styling
color:blue;
}
or you could come up with your own css class and just attach it to the elements you want:
.myTextClass
{
//styling
color:blue;
}
.myLabelClass
{
//styling
color:blue;
}
then attach the class using the CssClass property:
<asp:Label ID="lbllogin" runat="server" Text="LogIn Here" CssClass="myLabelClass"></asp:Label>
<asp:TextBox ID="txtuser" runat="server" CssClass="myTextClass"></asp:TextBox>
You can register default skin for server controls with desired properties responsible for styling.
Look at this article: How to: Apply ASP.NET Themes
If the page theme does not include a control skin that matches the SkinID property, the control uses the default skin for that control type.

How to maintain scroll position of a div when the page loads

is there a way to scroll-down to a particular div when the page loads? i have 100+ rows so when the page loads i am highlighting the div background based on certain conditions so same way is that possible to position to the particular div?
i am using a repeater with
<asp:Repeater EnableViewState="true" ID="rpt" runat="server" OnItemDataBound="rpt_ItemDataBound">
<ItemTemplate>
<div style='padding: 10px;' id="mydiv" runat="server">
<div>
<asp:Label runat="server" ID="lblName" Text='<%# Eval("Name") %>'> </asp:Label>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
protected void rpt_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (......)
mydiv.Attributes.Add("class", "selected_div");
}
Use tabindex property of div. set the focus of div using tab-index.
check this link : Set keyboard focus to a <div>
If you are using jquery, you could use the scrollTo plugin, on the page's ready function, using your "selected_div" class as selector.
Such as:
$(document).ready(function() {
$(document).scrollTo('.selected_div');
}
Without jquery you can use the standard javascript function .scrollIntoView(true) on the div element. However, you'd have to locate the element first, in order to call that function.
A combination of both is also valid. Using jquery to locate the selected div using your class selector, and on the element calling .scrollIntoView(true).

Give CSS STYLE to RadioButtonList

I have Page in which I use a RadiobuttonList that is in an HTML table. I have given a CSS style to table and td. I have also given a CSS style to RadioButtonList, but it doesn't take its style from RadioButtonList - it takes it from td. Is there any way to make RadioButtonList follow the style of RadioButtonList instead of td?
I assume you talk about styling an asp:RadioButtonList.
Add a CssClass on your asp:RadioButtonList and define it in your CSS
<asp:RadioButtonList runat="server" CssClass="radiobuttonlist">
<asp:ListItem Text="Item1" Value="1"></asp:ListItem>
<asp:ListItem Text="Item2" Value="2"></asp:ListItem>
<asp:ListItem Text="Item3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
CSS
.radiobuttonlist { }
.radiobuttonlist tr { }
.radiobuttonlist tr td { }
.radiobuttonlist tr td input { }
.radiobuttonlist tr td label { }
It's really difficult to style radio buttons, checkboxes, and selects consistently across multiple browsers. Your best bet is to try using some js like this jQuery plugin - Fancy Checkboxes.
The ability to style radio buttons via CSS is limited. How they look varies from browser to browser and OS to OS. You're best to leave them alone unless you want to replace them with a scripted version.

Keep Elements on Same Horizontal 'Row'

I have the following div in a page, but the button is being rendered below the input, despite there being plenty of room for them both in the same 'row' as I want them. How can I force this 'same row' issue?
<div id="pageHeader" style="text-align: right;">
<asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm">
</asp:TextBox>
<asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" />
</div>
NEW: This issue was due to the fact that I'm using telerik ajax here, and had included searchInput as an updated control in the ajax settings of my RadAjaxManager. This control 'wraps' all of its updated controls in block displayed divs by default. I just had to override this default as follows:
protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e)
{
e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
}
By default, input elements render with display:inline, which makes them appear in line :) However, in your case it seems that something is breaking the default behavior, so you will need to explicitly specify that you want display:inline instead of display:block. So, to sum up:
You can use the following CSS to obtain the desired view:
#pageHeader input
{
display:inline !important;
}
Thank you so much for the code. It worked great. Telerik Ajaxmanager was the problem.
protected void ajaxManager_AjaxSettingCreating(object sender, Telerik.Web.UI.AjaxSettingCreatingEventArgs e)
{
e.UpdatePanel.RenderMode = UpdatePanelRenderMode.Inline;
}
You can also change your existing div to be an asp:Panel that gets updated by the RadAjaxManager (rather than the individual control(s)):
<asp:Panel id="pageHeader" runat="server" CssClass="righty">
<asp:TextBox ID="searchInput" runat="server" CssClass="searchTerm">
</asp:TextBox>
<asp:Button ID="searchButton" runat="server" CssClass="btn" Text="Search" onclick="searchButton_Click" />
This may result in an additional control being posted back - and so is slightly worse performance-wise - but I think it improves readability somewhat.

Resources