Modal min-width or auto-size

[Jozef.Lukac]

Hello,
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 regards

[yavordashew]

Hi 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/

[Jozef.Lukac]

Hi 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.

[yavordashew]

Hi 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/

[Jozef.Lukac]

Hi 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.

[yavordashew]

Hi 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/

[Author]

Posts