Struggling to implement a vertical scroll bar in HTML code?

<body  ng-app="myApp" ng-controller="myCtrl">
    <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >       
        <div class="tittle" style="width: 25%;">                
                <a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
                <a href=""  style="text-decoration: none;" ng-if="!x.title"># No title</a>
                    <hr style="color: red">
                </a>
            </b>                
        </div>  
        <div class="text">              
            <div style="width: 70% ;float:right; background-color: white;">
                <div ng-show="showDiv">
                     <div style="float: right;">
                     <img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
                     </div>
                     <div style="color: purple;text-align: center;font-size:21px">
                        {{x.title}}
                     </div><br>
                     <div>
                        {{x.text}}
                     </div>
                     <b>
                        URL:-
                     </b>
                     <a href="{{x.url}}" style=" color: blue;"> To see in details, click here! </a><br> <br>
                </div>
             </div>
        </div>
    </div>

i have created a news feed module where the titles are displayed in a left side div and descriptions along with related images are shown in a right side div. However, I am facing issues with adding a vertical scroll bar to the left-side div (title-div) without it being specific to each individual title. Additionally, I need assistance in automatically loading the first title's description upon page load. Can someone help me with these two tasks?

Answer №1

Make sure to include a wrapper.

The overflow scroll applies to all tittle elements because the title class is within the ng-repeat loop, causing it to be repeated for each title individually.

To fix this, place another wrapper div outside the ng-repeat and set the overflow scroll on that container instead.

    <div class="wrapper">
     <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >       
        <div class="tittle" style="width: 25%;">                
                <a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
                <a href=""  style="text-decoration: none;" ng-if="!x.title"># No title</a>
                    <hr style="color: red">
            </b>                
        </div>  
        <div class="text">              
            <div style="width: 70% ;float:right; background-color: white;">
                <div ng-show="showDiv">
                     <div style="float: right;">
                     <img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
                     </div>
                     <div style="color: purple;text-align: center;font-size:21px">
                        {{x.title}}
                     </div><br>
                     <div>
                        {{x.text}}
                     </div>
                     <b>
                        URL:-
                     </b>
                     <a href="{{x.url}}" style=" color: blue;"> To see in details, click here! </a><br> <br>
                </div>
             </div>
        </div>
    </div>
</div><!-- .wrapper -->

Then, apply overflow:scroll to the wrapper.

.wrapper {
  overflow:scroll;
} 

Keep in mind that this will create a scroll for both the title and text together since they are within the same wrapper. If you need separate scrolls, you must create two wrappers with two different ng-repeat loops.

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

ways to change the font color style of a header element using css

Below is the HTML code that I need to work with: <h5 class="post-title">Welcome To The Site</h5> I am attempting to change the font color to red using this CSS: .post-title{ color:red ! important; } However, my attempt was unsuccessful ...

Methods for incorporating external javascript.php files into CodeIgniter 2.1.3

Let's kick off this topic by discussing the following: I've discovered that it is possible to use PHP with external Javascript, as shown here. This leads me to believe that there could be a way to echo JavaScript within a file named javascript. ...

Utilizing jQuery's POST Method to Fetch JSON Data on a Website

I've developed a Java REST API and now I want to retrieve JSON data on my website (which is built using HTML & CSS) by utilizing jQuery. The method to be used is POST, and here is the structure of my JSON: { "sessionID" : "25574", "interactiv ...

Unable to interpret data from the API

{ id: 8, customerName: "xyz", customerMobileNumber: "123456789", customerBillingAddress: "xyz address", customerShippingAddress: "xyz address", customerProductPurchasedDate: "2021-11-09T09:07:00.000Z", cust ...

Incorporate a distinct, unique value from a JSON dataset into each iteration of the .each statement

My code includes an each statement that looks like this: $.each(data, function(i, value) { sublayers.push({ sql: "SELECT " + firstSel2 + ", cartodb_id, the_geom_webmercator FROM full_data_for_testing_deid_2 where " + firstSel2 + "=&ap ...

Is it possible to utilize both href and ng-click in Angular.js?

Here is a text box: <input type="text" ng-model="SearchText" > And also, a link: <a href="#logout" ng-click="SearchText=''">Logout</a> I am trying to make both actions work in the above hyperlink. The ng-click should clear t ...

The user score tracking database, cataloging personal scoring history

In my database, I have a table called User. Each user in this table has a field named score. I am looking to display how the score of each user has evolved over time. My dilemma is whether to store this score separately. Should I create a new database t ...

Tips for effectively making REST requests from a ReactJS + Redux application?

I'm currently working on a project using ReactJS and Redux, incorporating Express and Webpack as well. I have successfully set up an API and now need to figure out how to perform CRUD operations (GET, POST, PUT, DELETE) from the client-side. Could so ...

Storing Form Input in Browser's Local Memory

I am currently working on a form section where individuals can input their email addresses. However, I have encountered a couple of issues: (1) After submitting an email address, the page refreshes. While I understand that this is inevitable without usin ...

Insert a new child element in front of the final child element

Could anyone offer suggestions on how to achieve my expected result for this code? Note: The code runs successfully from the console, but not from the link function. angular.element('ul.dropdown-user li:last').before('<li class="divider ...

Is it possible to trigger an event for only one connected client instead of broadcasting it to all clients using socket.io?

I am seeking a way to send an event to just one connected client, rather than broadcasting it to all clients using io.emit(). ...

Trouble encountered when toggling between separate parent views in AngularJS

I'm encountering a problem that I just can't seem to figure out the root cause of. My project uses Angular and UI-Router for navigation. The application has both a public section and a private section, each with its own unique design and layout. ...

Display a single unique value in the dropdown menu when there are duplicate options

Hey there, I'm currently working on retrieving printer information based on their location. If I have multiple printers at the same location, I would like to only display that location once in the dropdown menu. I am aware that this can be resolved at ...

How to modify a specific property of an array object in JavaScript

I have an array of objects that looks like this: [ { number: 1, name: "A" }, { number: 2, name: "e", }, { number: 3, name: "EE", } ] I am looking for a way to insert an object into the array at a specific position and ...

The effect of iPad screen orientation on CSS styling

Exploring orientation testing using CSS for iPad. Below is the code snippet from the CSS file: @media only screen and (device-width:768px) and(orientation:portrait) { body { background: green; } } @media only screen and (device-width:768px) and(orient ...

Creating a gradual appearance effect through ng-repeat when adding elements to the beginning of a list

I have come across tutorials that demonstrate how to fade in elements when adding them to the bottom of a page, but I am looking for a way to achieve the same effect when adding elements to the top. ...

ReactJS Application: Issue with Selective Mobile Scrolling

I've been working on a ReactJS web app where we mainly use styled-components for styling, but also sometimes utilize index.css for global styles (such as body and html). The application consists of an app header, a page header, and a container with a ...

What is the process for upgrading TypeScript to the latest version?

Is there a way to upgrade TypeScript version for ASP.net MV5 project in Visual Studio 2015? I attempted searching through Nuget but couldn't locate it. There seems to be an issue with the razor intellisense (index.d.ts file) and I'm hoping that ...

Begin a fresh page within a separate window, proceed to print the contents, and subsequently close the window

I am facing some difficulties with this code. I am attempting to use the "onClick" function to change the image once it is clicked, open a new page in a new window, print the newly opened window, and then close it. The issue I am encountering is that while ...

A regular expression in JavaScript for matching unpredictable numbers without any specific words preceding them

For instance, I am looking to extract the numbers that do not have 'the', 'abc', or 'he' before them; the89 (no match) thisis90 (match 90) iknow89999 (match 89999) getthe984754 (no match) abc58934(no match ...