JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Window › Modal min-width or auto-size

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 16, 2021 at 9:33 am #102059
    Jozef.Lukac
    Member

    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

    July 16, 2021 at 2:24 pm #102061
    yavordashew
    Member

    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/

    July 19, 2021 at 12:14 pm #102083
    Jozef.Lukac
    Member

    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.

    July 19, 2021 at 3:36 pm #102084
    yavordashew
    Member

    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/

    July 20, 2021 at 7:56 am #102085
    Jozef.Lukac
    Member

    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.

    July 20, 2021 at 3:03 pm #102086
    yavordashew
    Member

    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
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.