Top method for converting scrolling into an element

When trying to create a scrollable element, I attempted the following:

 .scroll-content {
    overflow: hidden;
 }
    
.scrollabe {
  overflow-y: scroll;
}
<ion-content>
  <ion-grid style="height:100%" *ngIf="plat && ticket">
    <ion-row>
      <ion-col col-4 padding>
        <ticket-info [ticket]="ticket"></ticket-info>        
      </ion-col>
      <ion-col class="scrollabe" col-8 no-margin>
          <ticket-acao [ticket]="ticket"></ticket-acao>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

However, this caused my content to be hidden: My element

I also tried an alternative approach:

.scroll-content {
  overflow: hidden;
}
 <ion-content>
  <ion-grid *ngIf="plat && ticket">
    <ion-row>
      <ion-col col-4 padding>
        <ticket-info [ticket]="ticket"></ticket-info>        
      </ion-col>
      <ion-col col-8 no-margin>
        <ion-scroll scrollY="true" style="height: 100%;width: 100%">
          <ticket-acao [ticket]="ticket"></ticket-acao>
        </ion-scroll>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Unfortunately, the same issue persisted...

The problem was resolved by reducing the height, but that meant sacrificing the responsive layout.

So, what is the best solution for achieving this?

htmlcssangularionic-framework

Answer №1

Remove the style="height: 100%" as well as the two CSS rules that were previously defined. The scrolling functionality will be automatically handled by the ion-content component when the ion-grid exceeds its boundaries.

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

Issue with implementing MUI Grid within a dialog across various screen sizes

While working with a MUI dialog and MUI grid, I encountered an issue. The code I am using is directly from the website, with only minor modifications to the dialog function names and the box wrapping the dialog. Despite changing the size of the dialog, t ...

javascriptcssreactjsmaterial-ui

Upgrade the arrow accordion in bootstrap by incorporating images instead

I have implemented a Bootstrap accordion with a toggle arrow. Here is an example: http://jsfiddle.net/zessx/r6eaw/12/ My question is, if I want to change the arrow with an image, what do I need to edit? Or how can I implement it? This is the image I want ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

javascriptpythonhtmlcssdjango

Issues with Angular JS and Ionic Controller functionality not functioning correctly

I am having an issue where my controller in controller.js is not being called when I click on a button with ng-click in index.html. Any assistance would be greatly appreciated. My technology stack includes AngularJS 1 and the Ionic framework. Below are th ...

angularjsionic-framework

Update the status of the reactive form control to invalid

I'm attempting to mark a form control as invalid, however, the following code snippet is not producing the desired result this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true}) ...

angularjsangularangular2-forms

Utilize CSS in the same way as the legend tag styling

I'm looking to create a stylish border around my HTML component. While I know the HTML legend element can achieve this, I want to use it outside of a form. For reference on using HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml ...

htmlcsslegend

How can we determine the total character count of a file that has been loaded into a textarea

I have a textarea where I can count the number of characters as I type. function calculateCharacters(obj){ document.getElementById('numberCount').innerHTML = obj.value.length; } <textarea name="textField" id="my_textarea" class="text_edit ...

javascripthtmlfile-uploadtext-editorcounting

What are the steps to adjust the width of a website from the standard size to a widescreen

Is it possible to create a "floating" screen adjustment on websites? I know you can set the standard size of pixels, but how do sites adjust for different screen sizes like wider laptop screens? Does it automatically detect the reader's screen size an ...

javascripthtmlcss

I am not familiar with this HTML element, it's a mystery to me

As I develop a data-recollection view in HTML, I've recognized the necessity of creating something similar to this: To elaborate, it's an image created hastily, with an input where users can enter data. When they click the "+" button, another in ...

javascripthtml

Troubleshooting a WordPress Blog Homepage CSS Dilemma

My goal is to keep the featured image size consistent on the main blog page. I made adjustments to this code: HTML: <div class="featured-image-excerpt"> <img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="http://mrod ...

htmlcsswordpress

Incorporate a New Feature into my NPM Package

I've been searching high and low for an answer to this, but I'm still stuck. I'm working on a module in Angular 2 with ng-module, and everything is functioning properly. However, I'm struggling to assign a property to another property w ...

angularjsnode.jsangulartypescript

Combining HTML, PHP, and Ajax within a single document

Hey everyone! I'm diving back into web programming and challenging myself to create a simple mailing form using just HTML, PHP, and Ajax all within a single file. The goal is to have a self-contained HTML document that doesn't refresh when the fo ...

phphtmlajax

Display div content depending on the clicked ID in AngularJS

Unique Header Links HTML <ul ng-controller="pageRouteCtrl"> <li ui-sref-active="active"> <a ui-sref="home" class="" ng-click="getPageId('live-view')">LIVE</a> </li> <li> <a ng-clic ...

javascripthtmlangularjsng-show

retrieving information from an array nested within a JSON object in an Angular application

I am struggling to retrieve two specific values from a JSON object. The content of the JSON is as follows: [ { "type":"session_start", "properties":[ { "property":"activity&q ...

angulartypescript

Customizing Image Layout with jQuery Masonry - Tips for Aligning Images

I've successfully created a jQuery masonry layout that showcases recent posts from various categories on the homepage. However, I'm facing two challenges and seeking help to address them: How do I remove the small white gaps beneath some ima ...

phpjqueryhtmlcss

Schedule - the information list is not visible on the calendar

I am trying to create a timeline that loads all data and events from a datasource. I have been using a dev extreme component for this purpose, but unfortunately, the events are not displaying on the calendar. Can anyone offer any insights into what I might ...

javascriptangulartypescriptdevextreme

Tips for adding extra spacing between icon and text field using Vuetify

The code snippet below is used for the username section: <v-text-field prepend-icon="fas fa-user" height="60px" placeholder="Username" outlined ></v-text-field> Is there a way to add space between the user ...

javascriptcssvue.jsvuetify.js

Achieving text-overflow: ellipsis functionality with mandatory content following

I have a list containing text and corresponding counts, displayed as follows: +----------------------------+ | Text A (123) | | Some other text (456,789) | +----------------------------+ Due to space limitations in my UI, I need to ensure ...

css

Dynamic filtering of items using Knockout's foreach binding based on value change

I'm working on some HTML/Knockout code where I want to display a dayDivider div only when there is a new date. This means that messages from the same day should appear under a date banner. Typically, I would save the last value in a temporary variable ...

jqueryhtmlknockout.js

Tips for associating an id with PrimeNg menu command

Within my table, I have a list of items that I would like to enhance using PrimeNg Menu for dropdown menu options. The goal is to enable navigation to other pages based on the selected item id. When a user clicks on a menu item, I want to bind the id of th ...

javascriptangulartypescriptprimeng