Achieve a vertical scrolling effect within an ASP repeater by implementing CSS2.1 styling

I am having an issue with my aspx page where I need to call a repeater. The problem is, I want to have a fixed-sized page while keeping the scroll inside of the repeater. How can I achieve this?

The div in my ASP wouldn't accept the overflow-y option because it's not supported in CSS2.1 and using the overflow option gives me both vertical and horizontal scrolls!

<asp:Repeater ID="TheRepeater" runat="server" OnItemDataBound="TheRepeater_OnItemDataBound" EnableViewState="true" EnableTheming="true">
        <HeaderTemplate>
            <div style="overflow-y: scroll;  margin-top:5px; margin-left:5px; min-height:15px; ">
                </HeaderTemplate>
                <ItemTemplate>
                    <div >
                        <%#DataBinder.Eval(Container.DataItem, "Object")%> - 

                        <%#DataBinder.Eval(Container.DataItem, "AssignedTo")%> 
                    </div>
                </ItemTemplate>
                <FooterTemplate>
            </div>  
        </FooterTemplate>
    </asp:Repeater>
asp.netscrollrepeatercss

Answer №1

Here is a sample code snippet for using an ASP.NET Panel and Repeater in your project:

<asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical">
<asp:Repeater ID="TheRepeater" runat="server" OnItemDataBound="TheRepeater_OnItemDataBound" EnableViewState="true" EnableTheming="true">
        <HeaderTemplate>            
                </HeaderTemplate>
                <ItemTemplate>
                    <div>
                        <%#DataBinder.Eval(Container.DataItem, "Object")%> - 

                        <%#DataBinder.Eval(Container.DataItem, "AssignedTo")%> 
                   </div>                      
                </ItemTemplate>
                <FooterTemplate>               
        </FooterTemplate>
    </asp:Repeater>
</asp:Panel>

Feel free to use this code as a reference in your implementation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mozilla browser experiencing issues with mouse move event functionality

Here, I have a background image on the body and with the following script, when the user moves the mouse, the image in the background also moves. body { background-image: url('../images/1.png'); background-size: 98%; background-posi ...

javascriptjqueryhtmlcss

It is recommended that the page does not scroll while utilizing both the sidenav and toolbar simultaneously in Angular Material

Using md-sidenav without md-toolbar works fine. The sidenav opens correctly, as shown in the image below. https://i.sstatic.net/PjsPp.png However, when a toolbar is added before the sidenav or its containing section, opening the sidenav causes the page t ...

cssangularjsmaterial-designangular-material

The iPhone 6 Plus's Safari browser, when in landscape mode, displays multiple tabs open at once. Additionally, when a Bootstrap modal

Encountering an issue with the bootstrap modal on iPhone Safari 6+ in landscape mode. This glitch only happens when using multiple tabs on the browser. Follow these steps to replicate the problem: 1) Visit http://getbootstrap.com/javascript/ on your iP ...

csstwitter-bootstrapmobile-safariiphone-6-plus

Input form with multiple fields. Automatically display or hide labels based on whether each field is populated or empty

I am attempting to create a form where the placeholders move to the top of the input when it is focused or filled. However, I have encountered an issue with having multiple inputs on the same page. Currently, my JavaScript code affects all inputs on the pa ...

javascripthtmljquerycssplaceholder

Adjusting the duration of the carousel in Bootstrap 4.2

Is there a way to alter the transition or fade duration of a carousel in BS4.2 using scripts? According to the BS documentation: Adjusting transition duration To modify the transition duration of .carousel-item, you can utilize the $carousel-transition Sa ...

javascriptcssbootstrap-4carousel

Tips for enabling scrolling on mobile devices

Hello there, I'm facing an issue with scrolling on my website when viewed on mobile devices. Even though I have set the div height to 100%, it appears as 'auto' on mobile screens. As a result, when the text exceeds the screen height, it bec ...

cssresponsive-design

Add a text 20px below the body element

After adding text to the body of my HTML page, I noticed that it appears directly at the top. What I am trying to achieve is to have the text displayed 20px below the page. How can I accomplish this? I attempted to use padding, but it applies padding to a ...

htmlcss

The CSS styles do not seem to be taking effect on the Bootstrap

Here's a snippet of code extracted from my website's html and css files. My intention is to make the navbar slightly transparent with centered links, but for some reason, the css styles are not applying correctly to the navbar. HTML <body ...

htmlcssbootstrap-4

The accumulation of MVC 3 Ajax requests is becoming overwhelming

I'm currently working on the following code snippet: $('.defaultLink').click(function () { $.ajaxSetup({ cache: false }); cleardiv(); $('#mainContent').empty() $('#mainContent').load(this. ...

jqueryasp.netajaxasp.net-mvc-3

Implementing dynamic content loading using CSS and jQuery upon link/button activation

I'm facing an issue where I am attempting to align content to the left side of my screen to display a feed while also ensuring that the pushed content is responsive. Unfortunately, the feed is not visible and the content remains unresponsive. Is ther ...

jquerycss

Choosing the right CSS selectors for elements within other elements

I'm trying to add a stagger effect to the fade-in animations of images within a gallery. After looking over my code, I believe the issue lies in how I am setting the animation-delay in the CSS selector. I am not sure if SCSS is supported in this snipp ...

htmlcsscss-selectors

Preventing touchstart default behavior in JavaScript on iOS without disrupting scrolling functionality

Currently experimenting with JavaScript and jQuery within a UIWebView on iOS. I've implemented some javascript event handlers to detect a touch-and-hold action in order to display a message when an image is tapped for a certain duration: $(document) ...

javascriptjqueryioseventsscroll

Struggling to generate a div using my JS/jQuery code

Currently working on a post-it web application to improve my skills in JavaScript and jQuery. I've encountered a few errors that have me stumped. Although I'm new to StackOverflow, I often use it as a helpful resource. You can find the code here ...

javascriptjquerycsshtml

leveraging property values over session values, asp.net site

I've been exploring new ways of handling data instead of my usual method. Previously, I would set session values and reuse them throughout my website. However, I started considering using property values instead and it seems to be working well. Using ...

asp.netsession

Pre-flight CORS Options Stall

My SSL-hosted ASP Web API project is encountering an issue with hanging OPTIONS requests while being consumed by another ASP MVC project. This behavior is causing delays in other API calls. In the Chrome debugger, the requests are marked as 'Pending&a ...

asp.netasp.net-web-apicors

The previous method of using `vue/compiler-sfc ::v-deep` as a combinator has been phased out. Instead, opt for the new syntax `:deep(<

When developing with Nuxt 2, I am encountering numerous [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. errors when running npm run dev. After attempting to resolve the issue by changing a ...

cssvue.jsnpmnuxt.jsvue-sfc

Push notifications in Asp.net

I'm experiencing issues with push notifications not being received on my android app. Despite trying multiple providers, I still haven't been able to get it to work. Since my backend is in Asp.net, I was considering using Azure push hub, but I&ap ...

androidasp.netazurepush-notification

Enhance the code for updating the content within a div element

I recently discovered that utilizing jQuery allows for updating the content within a div. My goal now is to enhance this script so the content remains consistent, even while loading or not. Take a look at my current code: function changeContent () { va ...

javascriptjqueryhtmlcss

What is the best way to link to this list of options?

#episode-list { padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,.8) } input { width: 100%; padding: .5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #d9d9d9 } <div id="epis ...

javascripthtmlcss

What is the best way to have the text in my table cell wrap when it reaches the width of the image in the same cell?

Within the table, I have <td> elements structured like this: <tr> <td> <p class="tableText">Lengthy random text..........</p> <img src="www.imageurl.com/img.png" width="33vw"> </td> &l ...

htmlcsshtml-tableword-wrap