I have a checboxlist item that has a Y scrollbar... but how do i remove this, so it shows all the items with the scrollbar... there isn't many in the first place
You should be able to handle this through CSS by using the "overflow" property (or overflow-y for vertical scroll bars) :
<!-- Apply the overflow-y: hidden style to the CheckBoxList container -->
<asp:CheckBoxList ID="CheckBoxList1" runat="server"
DataSourceID="FaithGroup" DataTextField="DESCRIPTION"
DataValueField="DESCRIPTION" AppendDataBoundItems="True"
style="overflow-y: hidden">
<asp:ListItem value="All" Selected="True">All</asp:ListItem>
</asp:CheckBoxList>
You may also be able to use overflow: auto as well. If the above suggestion does not work, try wrapping your entire CheckBoxList within a <div> with one of the mentioned styles :
Hi Rion Williams, tried the suggested examples, but still having now luck... is it something to do with the following items that are used to populate the CheckBoxList ? (asp:PanelControlExtender / asp:Panel)
this got rid of the scroll-bars... but its not showing all the items... only top 5 selections... there should be another 5-6 items... is it because of the default size set?
Most likely. You can easily adjust the size of the panel to limit the height until you find one that suits your needs :
<!-- Example setting Default Height to 500px -->
style="display: none; overflow-x: hidden; height: 500px;"
<!-- You may also try using height: auto; -->
style="display: none; overflow-x: hidden; height: auto;"
sam233
Member
36 Points
218 Posts
Removing Y scrollbar from CheckBoxList
Jan 22, 2013 01:44 PM|LINK
I have a checboxlist item that has a Y scrollbar... but how do i remove this, so it shows all the items with the scrollbar... there isn't many in the first place
<asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="FaithGroup" DataTextField="DESCRIPTION" DataValueField="DESCRIPTION" AppendDataBoundItems="True"> <asp:ListItem value="All" Selected="True">All</asp:ListItem> </asp:CheckBoxList>Rion William...
All-Star
27894 Points
4616 Posts
Re: Removing Y scrollbar from CheckBoxList
Jan 22, 2013 02:04 PM|LINK
You should be able to handle this through CSS by using the "overflow" property (or overflow-y for vertical scroll bars) :
<!-- Apply the overflow-y: hidden style to the CheckBoxList container --> <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="FaithGroup" DataTextField="DESCRIPTION" DataValueField="DESCRIPTION" AppendDataBoundItems="True" style="overflow-y: hidden"> <asp:ListItem value="All" Selected="True">All</asp:ListItem> </asp:CheckBoxList>You may also be able to use overflow: auto as well. If the above suggestion does not work, try wrapping your entire CheckBoxList within a <div> with one of the mentioned styles :
<div style='overflow-y: hidden;'><!-- or possibly overflow:auto; --> <asp:CheckBoxList ... > <asp:ListItem ... ></asp:ListItem> </asp:CheckBoxList> </div>sam233
Member
36 Points
218 Posts
Re: Removing Y scrollbar from CheckBoxList
Jan 22, 2013 02:30 PM|LINK
didn't work..
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <asp:UpdatePanel ID="updatepanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label2" runat="server" Text="Faith Group:" CssClass="newsSummary"></asp:Label> <asp:TextBox ID="TextBox2" runat="server"> </asp:TextBox> <asp:PopupControlExtender ID="TextBox2_PopupControlExtender" runat="server" Enabled="True" ExtenderControlID="" TargetControlID="TextBox2" PopupControlID="Panel1" OffsetY="22"> </asp:PopupControlExtender> <asp:Panel ID="Panel1" runat="server" Height="116px" Width="245px" BorderStyle="Solid" BorderWidth="2px" Direction="LeftToRight" ScrollBars="Auto" BackColor="#CCCCCC" Style="display: none"> <%--<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="FaithGroup" DataTextField="DESCRIPTION" DataValueField="DESCRIPTION"> </asp:DropDownList>--%> <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="FaithGroup1" DataTextField="DESCRIPTION" DataValueField="DESCRIPTION" AppendDataBoundItems="True" style="overflow-y: hidden"> <asp:ListItem value="All" Selected="True">All</asp:ListItem> </asp:CheckBoxList> </asp:Panel> </ContentTemplate> </asp:UpdatePanel>Rion William...
All-Star
27894 Points
4616 Posts
Re: Removing Y scrollbar from CheckBoxList
Jan 22, 2013 02:45 PM|LINK
Can you post what the rendered HTML Source looks like? Also did you try wrapping that entire area with a <div> using the appropriate property?
<div style='overflow-y: hidden;'> <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="FaithGroup1" DataTextField="DESCRIPTION"DataValueField="DESCRIPTION" AppendDataBoundItems="True"> <asp:ListItem value="All" Selected="True">All</asp:ListItem> </asp:CheckBoxList> </div>You may have to explicitly specify your dimensions if you use the above method :
<div style='overflow-y: hidden; height: 300px; width: 400px;'> <!-- Your Checkbox List --> </div>sam233
Member
36 Points
218 Posts
Re: Removing Y scrollbar from CheckBoxList
Jan 22, 2013 03:00 PM|LINK
Hi Rion Williams, tried the suggested examples, but still having now luck... is it something to do with the following items that are used to populate the CheckBoxList ? (asp:PanelControlExtender / asp:Panel)
Rion William...
All-Star
27894 Points
4616 Posts
Re: Removing Y scrollbar from CheckBoxList
Jan 22, 2013 03:03 PM|LINK
You'll need to apply those CSS properties to whichever container will hold your CheckBoxList (your Panel may be the culprit) :
<!-- Changing the ScrollBars property to Horizontal may fix your issue altogether --> <asp:Panel ID="Panel1" runat="server" Height="116px" Width="245px" BorderStyle="Solid" BorderWidth="2px" Direction="LeftToRight" ScrollBars="Horizontal" BackColor="#CCCCCC" Style="display: none"> <asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="FaithGroup1" DataTextField="DESCRIPTION" DataValueField="DESCRIPTION" AppendDataBoundItems="True"> <asp:ListItem value="All" Selected="True">All</asp:ListItem> </asp:CheckBoxList> </asp:Panel>if not you may need to add the overflow property to your Panel element as well :
<asp:Panel ID="Panel1" runat="server" Height="116px" Width="245px" BorderStyle="Solid" BorderWidth="2px" Direction="LeftToRight" ScrollBars="Auto" BackColor="#CCCCCC" style="display: none; overflow-y: hidden;"> <!-- Your CheckBoxList --> </asp:Panel>sam233
Member
36 Points
218 Posts
Re: Removing Y scrollbar from CheckBoxList
Jan 22, 2013 03:08 PM|LINK
im not applying any css properties to the containers.
/*************************************** * TITLE: Prosimii Screen Stylesheet * * URI : prosimii/prosimii-screen.css * * MODIF: 2004-Apr-28 21:43 +0800 * ***************************************/ /* ##### Common Styles ##### */ body { font-family: verdana, helvetica, arial, sans-serif; font-size: 73%; /* Enables font size scaling in MSIE */ margin: 0; padding: 0; } html > body { font-size: 9pt; } acronym, .titleTip { border-bottom: 1px dotted rgb(61,92,122); cursor: help; margin: 0; padding: 0 0 0.4px 0; } a { color: rgb(61,92,122); background-color: transparent; text-decoration: underline; margin: 0; padding: 0 1px 2px 1px; } a:hover { color: rgb(117,144,174); text-decoration: none; } ol { margin: 1em 0 1.5em 0; padding: 0; } ul { list-style-type: square; margin: 1em 0 1.5em 0; padding: 0; } dl { margin: 1em 0 0.5em 0; padding: 0; } ul li { line-height: 1.5em; margin: 1.25ex 0 0 1.5em; padding: 0; } ol li { line-height: 1.5em; margin: 1.25ex 0 0 2em; padding: 0; } dt { font-weight: bold; margin: 0; padding: 0 0 1ex 0; } dd { line-height: 1.75em; margin: 0 0 1.5em 1.5em; padding: 0; } .doNotDisplay { display: none !important; } .smallCaps { font-size: 117%; font-variant: small-caps; } /* ##### Header ##### */ .superHeader { color: rgb(130,128,154); background-color: rgb(33,50,66); text-align: right; margin: 0; padding: 0.5ex 10px; } .superHeader span { color: rgb(195,196,210); background-color: transparent; font-weight: bold; text-transform: uppercase; } .superHeader a { color: rgb(195,196,210); background-color: transparent; text-decoration: none; margin: 0; padding: 0 0.25ex 0 0; } .superHeader a:hover { color: rgb(193,102,90); background-color: transparent; text-decoration: none; } .midHeader { color: white; background-color: rgb(61,92,122); margin: 0; padding: 0.26ex 10px; } .headerTitle { font-size: 300%; margin: 0; padding: 0; } .headerSubTitle { font-size: 151%; font-weight: normal; font-style: italic; margin: 0 0 1ex 0; padding: 0; } .headerLinks { text-align: right; margin: 0; padding: 0 0 2ex 0; position: absolute; right: 1.5em; top: 3.5em; } .headerLinks a { color: white; background-color: transparent; text-decoration: none; margin: 0; padding: 0 0 0.5ex 0; display: block; } .headerLinks a:hover { color: rgb(195,196,210); background-color: transparent; text-decoration: underline; } .subHeader { color: white; background-color: rgb(117,144,174); margin: 0; padding: 0.5ex 10px; } .subHeader a, .subHeader .highlight { color: white; background-color: transparent; font-size: 110%; font-weight: bold; text-decoration: none; margin: 0; padding: 0 0.25ex 0 0; } .subHeader a:hover, .subHeader .highlight { color: rgb(255,204,0); background-color: transparent; text-decoration: none; } /* ##### Main Copy ##### */ #main-copy { margin: 0; padding: 0.5em 10px; clear: left; } #main-copy h1 { color: rgb(117,144,174); background-color: transparent; font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; font-size: 200%; margin: 0; padding: 0; } #main-copy h2 { color: rgb(61,92,122); background-color: transparent; font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 151%; margin: 0; padding: 1ex 0 0 0; } #main-copy p { line-height: 1.75em; margin: 1em 0 1.5em 0; padding: 0; } .newsHeading { color: rgb(61,92,122); background-color: transparent; font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; font-size: 145%; text-decoration: none; margin: 0; padding: 1ex 0 0 0; display: block; } .newsHeading:hover { color: rgb(117,144,174); background-color: transparent; text-decoration: underline; } .newsDate { font-style: italic; margin: 0 !important; padding: 0; } .newsSummary { margin: 1.5ex 0 2.5ex 0.75ex !important; padding: 0; } .more { text-align: right; margin: 0; padding: 0.5em 0; } .more a { color: rgb(61,92,122); background-color: transparent; font-size: 92%; text-decoration: underline; margin: 0; padding: 0.25ex 0.75ex; } .more a:hover { color: rgb(117,144,174); text-decoration: none; } .rowOfBoxes { clear: both; } .quarter, .oneThird, .half, .twoThirds, .fullWidth { margin: 1em 0; float: left; border-left: 1px solid rgb(204,204,204); } .quarter { width: 21%; padding: 0 1.9%; } .oneThird { width: 28%; padding: 0 1.9%; } .half { text-align: justify; width: 46%; padding: 0 1.9%; } .twoThirds { text-align: justify; width: 63%; padding: 0 1.9%; } .fullWidth { text-align: justify; width: 96%; padding: 0 1.2em; border-left: none; } .filler { /* use with an empty <p> element to add padding to the end of a text box */ border: 1px solid white; } .noBorderOnLeft { border-left: none; } .dividingBorderAbove { border-top: 1px solid rgb(204,204,204); } /* More elegant alternatives to .noBorderOnLeft & .dividingBorderAbove * that don't require the creation of new classes - but which are not * supported by MSIE - are the following: * * .rowOfBoxes > div:first-child { * border-left: none; * } * * .rowOfBoxes + .rowOfBoxes { * border-top: 1px solid rgb(204,204,204); * } */ /* ##### Footer ##### */ #footer { color: rgb(51,51,102); background-color: rgb(239,239,239); font-size: 87%; text-align: center; line-height: 1.25em; margin: 2em 0 0 0; padding: 1ex 10px; clear: left; } #footer a { color: rgb(0,68,204); background-color: transparent; text-decoration: underline; } #footer a:hover { text-decoration: none; } /* GRIDVIEW FORMATTING*/ .mGrid { width: 100%; background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse; } .mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #717171; } .mGrid th { padding: 4px 2px; color: #fff; /*background: #424242 url(grd_head.png) repeat-x top; */ background: rgb(61,92,122) url(grd_head.png) repeat-x top; border-left: solid 1px #525252; font-size: 0.9em; } .mGrid .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; } /*.mGrid .pgr { background: #424242 url(grd_pgr.png) repeat-x top; }*/ .mGrid .pgr { background:rgb(61,92,122) url(grd_head.png) repeat-x top; } .mGrid .pgr table { margin: 5px 0; } .mGrid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; } .mGrid .pgr a { color: #C0BFBF; text-decoration: none; } /*#666*/ .mGrid .pgr a:hover { color: #fff; text-decoration: none; } /*#000*/ /*DETAILSVIEW*/ .tblwithhlines { border-left: 1px solid #D0CFD4; border-right: 1px solid #D0CFD4; border-bottom: 0px solid #D0CFD4; border-top: 1px solid #D0CFD4; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; margin: auto; } .tblwithhlines th { padding-left:10px; background-image:url(../images/package_bg.gif); background-repeat:repeat-x; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:11px; font-weight:bold; height:20px; margin: auto; } .tblwithhlines td { padding:10px 0 4px 10px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; font-size:11px; font-weight:normal; background-color:#ECEFF1; border-left: 0px solid #D0CFD4; border-right: 0px solid #D0CFD4; border-bottom: 1px solid #D0CFD4; border-top: 0px solid #D0CFD4; margin: auto; } /*allow sorting on table to turn header text to white*/ .mGrid a:link { color: White; }Rion William...
All-Star
27894 Points
4616 Posts
Re: Removing Y scrollbar from CheckBoxList
Jan 22, 2013 03:15 PM|LINK
I know that is why I mentioned to add the following to your Panel control that "contains" your GridView :
as shown in the second example above.
sam233
Member
36 Points
218 Posts
Re: Removing Y scrollbar from CheckBoxList
Jan 22, 2013 03:21 PM|LINK
this got rid of the scroll-bars... but its not showing all the items... only top 5 selections... there should be another 5-6 items... is it because of the default size set?
Rion William...
All-Star
27894 Points
4616 Posts
Re: Removing Y scrollbar from CheckBoxList
Jan 22, 2013 03:26 PM|LINK
Most likely. You can easily adjust the size of the panel to limit the height until you find one that suits your needs :