JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Docking Layout Hide – show LayoutPanel in Docking Layout

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #104407
    Oleg Ilin
    Participant

    G’day.

    Could I ask how to hide-show the  LayoutPanel in Docking Layout?

    Is it possible?  Maybe there are implicit ways or workarounds?

    Best Regards .

    #104408
    Steven Peterson
    Participant

    Hi,

    You can set an id for the panels that you want to hide.
    This way you can manipulate their CSS and toggle their visibility.
    Here is an example of showing and hiding the Input and Output LayoutPanels:
    https://codepen.io/Steevee222/pen/WNgrbGa

    I hope this helps, if not, please do not hesitate to contact us!

    Best Regards,
    Steven Peterson

    Smart UI Team
    https://www.htmlelements.com/

    #104410
    Oleg Ilin
    Participant

    Dear Steven!
    I would like to express my deepest gratitude to you for such a quick and complete answer.

    Best regards,

    Oleg I.

    #104412
    Oleg Ilin
    Participant

    I was delighted early (. Your method  works for panels, but does not work for individual buttons nested in a panel. In another way, I can hide the entire panel, but individually, only the “slider-tab” node cannot be hidden according to your method.  Do you have other options?
    Sincerely,
    Oleg I

    docking.layout = [
    {
    type: ‘LayoutGroup’,
    orientation: ‘horizontal’,
    items: [
    {
    type: ‘LayoutGroup’,
    items: [
    {
    type: ‘LayoutPanel’,
    id: ‘inputPanel’,
    label: ‘Input’,
    items: [{
    label: ‘TextBox Tab’,
    content: ‘<smart-multiline-text-box id=”multiLine”>Write more text here …</smart-multiline-text-box>’
    },
    {
    label: ‘Slider Tab’,
    content: ‘<smart-slider id=”slider”></smart-slider>’
    }]
    },

    #104417

    Hi,

    The solution to this problem is a bit complex, but here you are: https://codepen.io/Svetoslav-Borislavov/pen/yLxeqVP
    You should save the removed tab details and its index in the tabs then remove the tab at that index from the tabs element.
    When you want to show the tab again you should insert the tab in the smart-tabs element.

    I hope this helps you resolve the problem, if not, do not hesitate to contact us!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104447
    Oleg Ilin
    Participant

    Dear Svetoslav,
    I have carefully tested your solution. Unfortunately, your idea can’t be used in an industrial system. The visibility property hides panels but leaves empty areas on the screen, resulting in a sloppy layout. Look at two screenshots.

    https://disk.yandex.ru/i/ecgnNiU5phEe3Q

    https://disk.yandex.ru/i/xzazQMKqTx2Bew

    Frames with the hidden attribute remain on the screen as white bars.
    Can the white stripes be removed?
    Best wishes,
    Oleg I.

     

    • This reply was modified 1 year, 9 months ago by Oleg Ilin.
    #104449
    Oleg Ilin
    Participant

    Dear Svetoslav,

    See this link, pls

    https://disk.yandex.ru/i/hDZIRz2PIY7oTg

    #104450
    Steven Peterson
    Participant

    Hi,

    You can use the docking layout methods to dynamically remove the desired items and later add them.

    Here is a link for the API with all the methods:
    https://www.htmlelements.com/docs/docking-layout-api/

    Best Regards,
    Steven Peterson

    Smart UI Team
    https://www.htmlelements.com/

    #104463
    Oleg Ilin
    Participant

    Dear Svetoslav and Steven,

    I thank you  for your attention to my question.
    Your hints helped to find a solution with CSS. You’re supposed to use ‘block: none’ (not a property visibility )  in the right block surrounding the needed item . The only one difficulty is that the blocks for Tabs and LayoutPanel hiding are fundamentally different.
    Best Regard ,
    Oleg I

     

    https://disk.yandex.ru/i/NpoFVu_MxCbOvg

    #104469

    Hi,

    Good! We are happy to hear that your problem is now resolved!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.