21
Views
5
Comments
Solved
Excess space under navigation tab, how to remove or hide?
Question
Application Type
Reactive

Hello everyone!
Anyone who has an idea on how to remove or hide this excess spaces under tab contents? Please see image for reference. I have here 4 tabs, which is the 4th tab is the only tab who needs this space (with green line). All other tabs are affected by this excess space under the contents which is need to be removed.


Thanks!

2023-04-27 07-42-14
Anusha Kothalawala
Solution

You can set to ContentAutoHeight = true in Tab 

UserImage.jpg
RD.

Thanks for your answer! Quick and easy solution solved my issue. Appreciate it!

2024-12-02 13-16-47
Vipin Yadav

Hi @RD. 

You can add below css based on the tab condition 

Conditionally Add the Class:

  • Go to the container where the tab content is rendered.
  • In the Style Classes property, set a dynamic expression to conditionally apply the class

If(ActiveTab = 4, "tab-content tab-with-space", "tab-content")

CSS -

/* Ensure the tab content adjusts to fit its content */

.tab-content {

    margin-bottom: 0; /* Remove extra space by default */

    height: auto;     /* Adjust height dynamically based on content */

    overflow: visible; /* Ensure all content is shown */

}


/* Add bottom margin only for specific tabs */

.tab-content.tab-with-space {

    margin-bottom: 50px; /* Adjust this value as needed */

}

Thanks,

Vipin Yadav



2024-12-02 13-16-47
Vipin Yadav

If possible, please share your OML file with me, and I will review it and get back to you. 

UserImage.jpg
RD.

Thanks for you answer @Vipin Yadav . Appreciate it.

2023-04-27 07-42-14
Anusha Kothalawala
Solution

You can set to ContentAutoHeight = true in Tab 

UserImage.jpg
RD.

Thanks for your answer! Quick and easy solution solved my issue. Appreciate it!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.