[Silk UI Mobile] Drop Down cannot appear in Tab Navigation

[Silk UI Mobile] Drop Down cannot appear in Tab Navigation

  
Forge Component
(15)
Published on 19 Oct (15 hours ago) by OutSystems R&D
15 votes
Published on 19 Oct (15 hours ago) by OutSystems R&D

Hi,

I have 2 tabs using Tab Navigation widget. On first tab put Section Expandable. On second tab put drop down widget. When I go to second widget I cannot see drop down when clicked. Apparently, the drop down opened on first tab instead.


1. Open Section Expandable widget on first tab
2. Then go to second tab click drop down widget. Nothing happen on second tab.
3. Go back to first tab. Drop down list opened on first tab.

Can you please confirm this behavior and if it's a bug what is the workaround solution?


Best Regards

Hello Eric :)

This behavior had already been identified and has been fixed, but it's not out on the forge yet. 

Thanks for the headsup!

Hi Rita, How do you know about this issue had been identified? And any information about when it will be released?


Any workaround for this issue in case clients don't want to update?

Solution

Fairydust and a bit of magic ;) 

Just kidding, I'm part of the Silk team.


The release will be done sometime this week. I can give you a workaround of course, but out of curiosity, why would you not want to update?

Here's the CSS that should fix those problems:

.tabs [data-dropdown] {
    position: relative;
}

.tabs [data-dropdown] > div.dropdown-list {
    position: absolute;
    z-index: 10;
    top: 60px !important;
    left: 10px !important;
}

.tabs-content {
    border-top-width: 0;
    overflow: visible;
    white-space: nowrap;
    width: 100%;
}

.tabs .dropdown-background-window {
    left: initial !important;
}

Good luck!

Solution

You're great! It works like a fairy dust and magic. All good. Hopefully new release will be available soon.