How can I ensure that the ons-scroller stays at the bottom when writing a JavaScript code in Onsen UI?

How can I ensure the ons-scroller stays at the bottom when writing JavaScript?

This is the code I am using:


        <ons-page>
            <ons-toolbar>
                <div class="left"><ons-back-button>Return</ons-back-button></div>
                <div class="center">{{user_msg.title}}</div>
            </ons-toolbar>
            <ons-scroller id="scroll_msg"  threshold="0">      
                <div ng-repeat="msg in msg_history" 
            ng-class="getMsgClass(msg.uid)">
                    <span ng-if="uid == msg.uid ">{{msg.msg}}</span>
                    <span ng-if="uid == msg.uid " style="color:#336699;">: {{msg.nickname}}</span>
                    <span ng-if="uid != msg.uid " style="color:#336699">{{msg.nickname}}:</span>
                    <span ng-if="uid != msg.uid ">{{msg.msg}}</span>
                </div>
            </ons-scroller>

        <ons-bottom-toolbar>
        <input type="text" class="text-input ng-pristine ng-valid ng-touched" 
    placeholder="Enter text message" ng-model="user_msg.message" style="margin:6px;" value="">
    <button ng-click="sendUserMessage()">Send</button>
    </ons-bottom-toolbar>   
        </ons-page>

Answer №1

To implement a scrollable element, simply create the ons-scroller and define its style attribute as position: absolute; bottom: 0px".

For a live example with code snippets, check out this CodePen link.

<ons-navigator>
  <ons-toolbar>
    <div class="center">Scroller</div>
  </ons-toolbar>
  <ons-scroller style="height: 200px; width: 100%; border-bottom: 1px solid #ccc; background-color: white; position: absolute; bottom: 0px">
  <div style="text-align: center">
    <h2>I am now scrollable!</h2>
    <h3>Happy scrolling!</h3>
    <h3>Happy scrolling!</h3>
    <h3>Happy scrolling!</h3>
    <h3>Happy scrolling!</h3>
    <h3>Happy scrolling!</h3>
    <h3>Happy scrolling!</h3>
    <h3>Happy scrolling!</h3>
    <h3>Happy scrolling!</h3>
    <h3>Happy scrolling!</h3>
  </div>
  </ons-scroller>
</ons-navigator>

This solution should provide you with the desired functionality. Hope it helps!

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

Loop through an array of buttons using an event listener

My HTML and Javascript code currently have the functionality to show/hide a row of 3 images upon button click. However, I need this feature to work for two additional rows similar to this one. I believe it involves looping through an array of buttons, but ...

What steps can I take to refactor a portion of the component using React hooks?

I am trying to rewrite the life cycle methods in hooks but I am facing some issues. It seems like the component is not behaving as expected. How can I correct this? Can you provide guidance on how to properly rewrite it? useEffect(() => { updateUs ...

Vue.js is experiencing issues with updating attributes within nested v-for loops

Exploring the realm of vue.js and react, I am currently in the process of adapting a basic editable HTML table example found in a React book to further my understanding of Vue. Here is a breakdown of what occurs within the code: User clicks on a td elem ...

Troubleshooting: Issue with Updating Prototype Ajax Function

I am currently utilizing Prototype within the pylons framework and attempting to execute an Ajax call. Below is the structure of my html: <form method="POST" action = "javascript:void(0)" onsubmit = "new Ajax.Updater('graph','/saffron_m ...

Get all inputs with the same text using Vue 3 composition API and a single ref, or access multiple inputs with the

One of the challenges I'm facing is managing multiple instances of a component called InputWithValidation within a form. I need to check if all instances are valid at once. For a single instance of InputWithValidation, I can easily verify its validit ...

Trouble with tab switching across multiple cards

I have been working on an app that generates multiple cards with 3 tabs on each card. However, I am facing an issue with tab switching. The tab switching works fine on the first card, but when I try to switch tabs on other cards, it still affects the tabs ...

Check to see if my Node.js server is running in development or production mode

Lately, I've been facing a tedious task every time I deploy a node.js server to my production server. It involves changing all the IP addresses, DNS settings, usernames, and passwords for my various connections to databases and external APIs. This en ...

Placing elements from an array into a customized output

Currently, I am dealing with a unique output: dAmn_Raw('send chat:Sandbox\n\nmsg main\n\nthismessage'); In my code, there exists a variable: myvariable that stores a random value selected from an array I formulated. The cha ...

Could you please explain the specific distinctions between pipe and map within Angular 7?

After extensive research, I'm still struggling to understand the distinction between pipe and map in Angular 7. Should we always include a pipe in Service.ts file in Angular 7? Appreciate any clarification on this matter. ...

Utilizing AJAX requests to execute create, update, and delete actions all from one streamlined file instead of separating them into three distinct

In my JavaScript code, I am currently making XMLHttpRequests to separate PHP files for different functionalities in my app - like add.php, update.php, and delete.php. However, having three separate files feels repetitive. Is there a way to consolidate al ...

watchWebpack is compiling all the files

As per the webpack documentation on watching files webpack can keep an eye on files and recompile them whenever there are changes. My understanding is that this implies webpack will only compile the files that have been modified. I have a configuratio ...

Open in a new tab for enhanced content formatting in Prismic on NextJs

In my Prismic RichText editor, I have included two files (terms and conditions) that I would like to open in a new tab. Unfortunately, Prismic does not offer an option like target _blank for this functionality. I am currently working with NextJs and Tail ...

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

I am in need of developing a customized transferbox using HTML, JavaScript, and JQuery. The user should be able to select from a list of options and associate them with attributes. This selection process should involve transferring the selected options be ...

Can anyone tell me the Ionic framework's counterpart to Android Webview?

Recently, I designed a unique IONIC/Angular JS application and I am currently exploring various ways to enhance its features. One particular feature that I have been contemplating is the ability to load a web page within my application, similar to how it ...

Stopping the webdriver in Node.js gracefully without crashing it can be achieved through a

Can the selenium webdriver be halted without terminating node? I've encountered a problem attempting to create an API tool that conducts web automation upon receiving a get request. Essentially, I am executing the selenium webdriver on a get request ...

Exploring Angular 6 with Universal Karma for effective module testing

Issue I have been facing challenges while testing my Angular 6 application with Karma. I am encountering errors such as: Can't bind to 'ngModel' since it isn't a known property of 'mat-select'. Although the import works in ...

Tips for incorporating side effects into an observable property?

I am relatively new to Mobx and I need to automatically call a function when this observable array is updated. The observable array: @observable Todos = [] I have many functions to manage this array (addTodo, removeTodo, ...) and I would like to avoid ...

The requestify Node module encounters issues when the body contains special characters

My current project involves the use of node.js and a library called requestify. Here is the snippet of code causing some trouble: console.log('body'); console.log(body); return new Promise(function (f, r) { requestify.request(myurl, { ...

Encountered errors while trying to install ng-bootstrap, installation of package was unsuccessful

I am currently developing an Angular application and I require an accordion component for it. My efforts to install the ng-bootstrap package using the command 'ng add @ng-bootstrap/ng-bootstrap' have been unsuccessful as the installation fails ev ...

How can I extract data from an XML file and include it in a JSON file using GulpJS?

Being relatively inexperienced with Gulp/Node programming, I am facing some difficulties while trying to accomplish a simple task :) Within my XML file, there exists a node like the following: <widget version="1.1"></widget> My goal is to ext ...