I have inherited an .ascx control that consists of an asp:repeater construct containing a HeaderTemplate, an ItemTemplate and an empty FooterTemplate.
Both the header and the item templates are linked to a data source.
My question is simply this, I want to have a vertical slider applied to the ItemTemplate such that I can scroll up and down the items contained within whilst the HeaderTemplate remains static.
I have tried using an asp:Panel within the ItemTemplate but this doesn't render the row within the template.
I've resorted to encapsulating the whole of the asp:Repeater within an asp:Panel that specifies a vertical scrollbar. This works but scrolls the header out of view if the number of rows in the ItemTemplate is large.
If anyone can help and suggest a way forward I would be most grateful.
It can be done in a simple manner with some CSS tricks e.g.
Repeater Item Template Markup
<HeaderTemplate>
<div class="template">
</HeaderTemplate>
<ItemTemplate>
Your Stuff
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
CSS Defined for "template"
.template {
height: 200px;
overflow-y: scroll;
}
Hope this will help !!
Related
I have found some info on container use in Several containers at one page and Twitter Bootstrap Containers, but was left wanting a bit more input.
From Twitter Bootstrap's own example we see multiple container divs on the same page. But what about ASP.Net MasterPages and UserControls.
Should a single container be used on the Master, therefore enclosing all Content areas in a single top-level container (and then the Content pages would be comprised of row divs)? Or should the container div be pushed down to the Content page?
And taking this one step further, what about a rather complicated UserControl (.ascx) that is comprised of several row divs; should the ascx markup have its own container, or start with a row div assuming the containing page has an enclosing container?
Finally, more generally, does anyone have a rule-of-thumb regarding when to use a new container div?
I put the container div in my master page since all my pages will be using the row/span's in the child pages. In the unlikely event that I want my child page to not use the container, I simply close the div tags...
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
</div> <!-- ending the container -->
<!-- whatever -->
<div> <!-- the master page ends the container div, so we'll add this instead -->
</asp:Content>
A few helpful hints with bootstrap and asp.net...
Radio buttons and checkboxes.
The text appears underneath the radio/checkbox. Fix this by nesting your asp.net radio button list control or similar control inside a div with the radio css class or checkbox css class, and setting the RepeatLayout to flow.
<div class="radio">
<asp:RadioButtonList ID="rblFleettype" runat="server" RepeatLayout="Flow">
<asp:ListItem Selected="True">Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
</asp:RadioButtonList>
</div>
Alerts for error messages.
A lot of asp.net controls can be converted to templates to expose the error literals/labels, then you can apply CssClass="alert alert-error" to the error label. But if you do this it will show the red error boundaries even when there is no error yet. To fix that you can use the PreRender event for the literal/label to check the Text property and see if it's empty, and then set the Visibility property accordingly.
I have an ASP.Net GridView with properties like so:
<asp:GridView ID="grdOrderEntry" runat="server" AutoGenerateColumns="false" ShowFooter="True"
DataKeyNames="oid" Height="100%">
When I view the control in the browser, there is a lot of white space after the control. When viewing the HTML, the div that is produced by the GridView is much larger than the control, causing the whitespace. Is there a property I can set on the GridView to make the div as small as possible?
If you set the CssClass property you will be able to create some css to address the problem. I would recommend using a live css editor so you can mess around with it until you get the desired effect.
I suspect this is being caused by your Height="100%" attribute, remove that, and it should just stretch around the table it contains (unless there is some css other style added to it as well).
I add a user control dynamically (which only contains a table) to the Panel:
<asp:Panel ID="panel" runat="server"
ScrollBars="Horizontal" Width="160" Direction="LeftToRight">
</asp:Panel>
when I add e.g. two user controls, they have vertical direction. Why ? I want them set from left to right (horizontally)
The Direction property only sets whether the text is displayed left-to-right or right-to-left. It's a usability feature.
What you'll want to do is use CSS to perform what you need. Look into float: right;
Does anybody know of a way to set the width of a custom validtor so that the error message text will wrap if it exceeds the specified width?
I have a user control that contains a custom validator which the containing page can set the error message on based on specific validation results.
The user control sits within a table cell in a page.
If the message is very long it simply prints the entire message on a single line ignoring any column widths that are set.
Thanks for any insight.
EDIT:
I have tried setting the width property on the custom validator itself to no avail.
Put it inside another element you can control the style of... like it's own div with a class you specify.
If the user control is defined such that the error message appears inside a div, try to set the width of that div element.
If your control is in something like this
<asp:TableCell id="some1" runat="server">
<uc:yourControl id="uc1" runat="server" />
</asp:TableCell>
Modify the control to have a div or span element for the message.
I am using Vb.net for coding. I have a grid view control in which i want to introduce a vertical scroll bar if the value from the sql query overflows. How do I go about it?
You could place the gridview in a div with the following style:
overflow: auto; height: 80px;.
The following markup should do this. You'll need to change the height as required.
<div style="overflow-y:auto; height:200px">
<asp:GridView ID="GridView1" runat="server" >
</asp:GridView>
</div>