Hide – show LayoutPanel in Docking Layout

[Oleg Ilin]

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 .

[Steven Peterson]

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/

[Oleg Ilin]

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

Best regards,

Oleg I.

[Oleg Ilin]

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>’
}]
},

[svetoslav_borislavov]

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/

[Oleg Ilin]

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, 1 month ago by Oleg Ilin.

[Oleg Ilin]

Dear Svetoslav,

See this link, pls

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

[Steven Peterson]

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/

[Oleg Ilin]

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

[svetoslav_borislavov]

Hi,

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

Best Regards,
Svetoslav Borislavov

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

[Author]

Posts