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:
On the abp-modal tag itself
<abp-modal [busy]="isModalBusy" [(visible)]="isModalOpen" class="overflow-scroll">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)
-
0
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>Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hello tunji,
Does this solution resolve your problem ?
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
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
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
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?
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
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)
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
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>Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
