Hi ,
I need help with resizing of the Bottom Sheet widget in Mobile Application.
I tried the following Css Code :
I added this class in the Extended Class property of the widget. This is resizing the entire Bottom Sheet widget.
I am looking for CSS only to resize the content part of the bottom sheet , and using different classes because I am using many bottomsheet widgets.
Thanks,
Cynthia
Hi @Cynthia Maria ,
Below are the css classes to adjust the heights.
Bottom-sheet widget CSS Class
.osui-bottom-sheet {
max-height: 10vh;
min-height: 50vh;
}
Content CSS Class
.osui-bottom-sheet__content {
Regards,
Vinod
Hi Cynthia,
If you look at the generated HTML, you can see that OutSystems creates a div with class="osui-bottom-sheet__content" for the bottom sheet content. So I think you should give your bottom sheet an extended class, let's say "ThemeBottomSheet" and then add the following CSS:
.ThemeBottomSheet .osui-bottom-sheet__content { min-height: 110px !important;}
This will apply the min height only to elements with the class osui-bottom-sheet__content that are a descendant of an element with the class ThemeBottomSheet
Hope this helps,
Kind regards,
Wouter.
Hi Wouter ,
is there a way to resize bottom sheets using it's class and id.
because I want sheet1 to be 200px and sheet2 to be 300px
Can you help me out with the CSS code please
I wouldn't recommend using id.
If the bottom sheet already has Extended class "ThemeBottomSheet", than add " sheet1" to the Extended Class for sheet1 and then use the following CSS:
.ThemeBottomSheet.sheet1 .osui-bottom-sheet__content { min-height: 110px;}
Same for sheet 2: add " sheet2" to ExtendedClass and add CSS e.g.:
.ThemeBottomSheet.sheet2 .osui-bottom-sheet__content { min-height: 90px;}
Happy to help,