Open Closed

Scroll bars in Angular modal dialogs #461


User avatar
0
tunji created

Hello,

I am relatively new to both abp.io and Angular2 so please bear with me. I am currently on your version 3.0.5.

I am looking to implement scroll bars in a modal dialog (i.e. abp-modal), vertical scroll bars to be specific as the dialog immediately gives you a horizontal scroll bar when a data table is added.

I added the following to the component stylesheet:

overflow-scroll {
    max-height: 30px;
    overflow-y: scroll;
}

Please note that I have set the max-height figure above deliberately to a ridiculously low amount.

I have put the style in the following places in the html and still not getting anything displayed:

  1. On the abp-modal tag itself

     <abp-modal [busy]="isModalBusy" [(visible)]="isModalOpen" class="overflow-scroll">
    
  2. In a new div just after the abp-modal tag above

     <div class="overflow-scroll">
    

I have also tried using styles directly in the html file but still no luck.

Please can you tell me what I need to implement to get a vertical scroll bar implemented in a modal?

Thanks.


7 Answer(s)
  • User Avatar
    0
    muhammedaltug created

    Hello, You can do it this way.

     <abp-modal [(visible)]="isModalOpen" [busy]="isModalBusy">
        <ng-template #abpHeader> header </ng-template>
        <ng-template #abpBody>
          <!-- wrap your modal content with a container which has your class-->
          <div class="overflow-scroll">
                <!-- modal body html goes here -->
          </div>
        </ng-template>
      </abp-modal>
    
  • User Avatar
    0
    muhammedaltug created

    Hello tunji,

    Does this solution resolve your problem ?

  • User Avatar
    0
    tunji created

    Hello Muhammed,

    Apologies for not getting back to you earlier, I had other things take priority than the abp project.

    I did a quick test with your suggested fix this morning and still cannot see a scroll bar unfortunately.

    Any other suggestions?

    Regards

  • User Avatar
    0
    muhammedaltug created

    Hello tunji,

    I realized the given 'overflow-hidden' CSS class example in the issue doesn't have a dot in the beginning. Can you check the CSS class definition? Otherwise, can you give me a full code example with your component files and style files?

  • User Avatar
    0
    tunji created

    Hello again Muhammed,

    Adding the full stop defnitely gave me the scroll bar I was after.

    Thamk you for your support.

    Regards.

  • User Avatar
    0
    tunji created

    Hi Muhammed,

    Apolgies as I might have jumped the gun a bit in agreeing your suggstion was a fix even though it does help.

    My original question was for a vertical scrollbar for the whole dialog and not just a section of it (i.e. the body)

  • User Avatar
    0
    muhammedaltug created

    Hello tunji,

    Sorry for the latency in the answer to your question

    ABP modal does not support binding class to the modal-content section. you can change the overflow-scroll CSS class this way.

    .overflow-scroll .modal-content {
          max-height: 230px;
          overflow-y: scroll;
    }
    

    Give overflow-scroll class to abp-modal component's modalClass input

    <abp-modal modalClass="overflow-scroll">
        <!-- modal content -->
    </abp-modal>
    
Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11