JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Docking Layout › Hide – show LayoutPanel in Docking Layout
- This topic has 9 replies, 3 voices, and was last updated 1 year, 9 months ago by svetoslav_borislavov.
-
AuthorPosts
-
February 18, 2023 at 10:14 pm #104407Oleg IlinParticipant
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 .
February 20, 2023 at 8:24 am #104408Steven PetersonParticipantHi,
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/WNgrbGaI hope this helps, if not, please do not hesitate to contact us!
Best Regards,
Steven PetersonSmart UI Team
https://www.htmlelements.com/February 20, 2023 at 8:25 pm #104410Oleg IlinParticipantDear Steven!
I would like to express my deepest gratitude to you for such a quick and complete answer.Best regards,
Oleg I.
February 21, 2023 at 1:50 am #104412Oleg IlinParticipantI 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 Idocking.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>’
}]
},February 21, 2023 at 6:37 am #104417svetoslav_borislavovParticipantHi,
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 BorislavovSmart UI Team
https://www.htmlelements.com/March 1, 2023 at 3:35 pm #104447Oleg IlinParticipantDear 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.
March 1, 2023 at 4:14 pm #104449Oleg IlinParticipantMarch 2, 2023 at 5:37 am #104450Steven PetersonParticipantHi,
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 PetersonSmart UI Team
https://www.htmlelements.com/March 3, 2023 at 9:37 pm #104463Oleg IlinParticipantDear 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 IMarch 6, 2023 at 4:44 am #104469svetoslav_borislavovParticipantHi,
Good! We are happy to hear that your problem is now resolved!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.