This topic contains 5 replies, has 2 voices, and was last updated by Avatar Yavor Dashev 1 week, 6 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #102059
    Avatar
    Jozef.Lukac
    Participant

    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

    #102061
    Avatar
    Yavor Dashev
    Participant

    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/

    #102083
    Avatar
    Jozef.Lukac
    Participant

    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.

    #102084
    Avatar
    Yavor Dashev
    Participant

    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/

    #102085
    Avatar
    Jozef.Lukac
    Participant

    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.

    #102086
    Avatar
    Yavor Dashev
    Participant

    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/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.