JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Window › Modal min-width or auto-size
- This topic has 5 replies, 2 voices, and was last updated 3 years, 1 month ago by
yavordashew.
-
AuthorPosts
-
July 16, 2021 at 9:33 am #102059
Jozef.Lukac
MemberHello,
we are currently using fixed sizing for the model windows.
smart-window {
–smart-window-default-width: 250px;
–smart-window-default-height: 180px;
}
The application uses i18n to load resources at runtime.
Because of the different translations the width and height of the ui elements vary.
We cannot use fixed sizes for the windows in modal mode.
Is there currently a way to handle this situation?
In case not, will there be some enhancements added to enable to case?
Best regardsJuly 16, 2021 at 2:24 pm #102061yavordashew
MemberHi Josef.Lukac,
In situation when the resources for the window will be different size depending on your use case you can set these CSS variables for example like so:smart-window { --smart-window-default-height: auto; --smart-window-default-width: 50%; }
This way the window will take the half width of the parent container and height will be set depending of the amount of content in it.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/July 19, 2021 at 12:14 pm #102083Jozef.Lukac
MemberHi Yavor,
Thank You for answer. this works for us partly.
We use smart-window as modal popups at the application where major part is yours docking layout.
Docking layout use whole dimension of browser at width and height.
When I enabled auto height dimension for the modal, smart-window was correctky sized depends on content.
But display on wrong place below of whole docking layout(need to scroll under screen),
not as before with fix dimensions in the middle of browser.
Regards Jozef.July 19, 2021 at 3:36 pm #102084yavordashew
MemberHi Jozef,
Thank you for the additional information.
Another option for you could be to set the height and the width of the smart-window component to percentage values like so:smart-window { --smart-window-default-height: 50%; --smart-window-default-width: 50%; }
Also in order for the window to be positioned in the center it must have certain values like percentages or pixels.
If its possible to create a code example that showcases the behavior from your last reply it will be best, so that we are able to give you a solution about it and to assess the use case.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/July 20, 2021 at 7:56 am #102085Jozef.Lukac
MemberHi Yavor,
I created sample here: https://stackblitz.com/edit/github-nwtehy?file=src%2Fapp%2Fpopup%2Fpopup.component.css
Popup behave alike in our application. If I use percentage, modal is centered as with pixels, but not adjusted by content.
Thank You,
Jozef.July 20, 2021 at 3:03 pm #102086yavordashew
MemberHi Jozef,
With the shared code example I was able to get a bit more context of your use case and I was able to resolve your issue.
In your app.component.html file:<div id="container"> <smart-docking-layout #docking [layout]="layout"></smart-docking-layout> <smart-slider #slider></smart-slider> <smart-multiline-text-box #multilinetextbox></smart-multiline-text-box> <popup></popup> </div>
In your app.componen.css file:
body, html{ width: 100%; height: 100%; } #container { width: 100%; height: 100%; position: absolute; } smart-slider { margin-top: 100px; } smart-docking-layout { width: 100%; height: 100%; }
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.