[OutSystems UI] [Outsystems UI] Tabs pattern doesn't work properly on OSUIMobilePhone base theme
Forge component by OutSystems R&D
Application Type
Mobile
Service Studio Version
11.11.6 (Build 44614)

Hi,

I found out that the Tabs pattern doesn't work properly on OSUIMobilePhone base theme. Changing between tabs didn't change its content.

Previously, my mobile app relied on the old DEPRECATED_Tabs pattern but unfortunately I can't use that anymore.

The only workaround now, it seemed is to change the base theme to OutsystemsUI, but that really messes up with my current mobile app's UI.

Is there another solution apart from using Button Group as Tabs replacement?


Relevant screenshot attached.

TabsScreenshot.png

Solution

Hi all,

Another workaround is by copying the Tabs pattern style sheet from OutsystemsUI and put them into OSUIMobilePhone as custom CSS.

Problem solved.

.tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.tabs.tabs-vertical {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

.tabs .tabs-header,
.tabs .tabs-header .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
    position: relative;
    width: 100%;
    z-index: 2;
}

.tabs.justified .tabs-header {
    width: 100%;
}

.tabs-header-tab {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    border-bottom: var(--border-size-m) solid transparent;
    color: var(--color-neutral-8);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    margin-left: var(--space-l);
    padding: var(--space-base) var(--space-xs);
    -webkit-transition: border 150ms linear;
            transition: border 150ms linear;
    white-space: nowrap;
}

.is-rtl .tabs-header-tab {
    margin-left: 0;
    margin-right: var(--space-l);
}

[data-block*="TabsHeaderItem"]:first-child .tabs-header-tab {
    margin-left: var(--space-none);
}

.is-rtl [data-block*="TabsHeaderItem"]:first-child .tabs-header-tab {
    margin-right: 0;
}

.desktop .tabs-header-tab:hover {
    border-bottom: var(--border-size-m) solid var(--color-neutral-6);
    color: var(--color-neutral-10);
}

.tabs-header-tab.active {
    border-bottom: var(--border-size-m) solid var(--color-primary);
    color: var(--color-neutral-10);
    font-weight: var(--font-semi-bold);
}

.desktop .tabs-header-tab.active:hover {
    border-bottom: var(--border-size-m) solid var(--color-primary);
}

.tabs.justified [data-block*="TabsHeaderItem"] {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.tabs.justified [data-block*="TabsHeaderItem"] .tabs-header-tab {
    margin-left: var(--space-none);
}

.tabs .tabs-content {
    border-top: var(--border-size-s) solid var(--color-neutral-5);
    -webkit-box-flex: 1;
    flex-grow: 1;
    margin-top: -1px;
    padding: var(--space-m) var(--space-none);
    position: relative;
    width: 100%;
    z-index: auto;
}

.tabs .tabs-content-tab:not(.open),
.popup-dialog .tabs .tabs-content-tab:not(.open) {
    display: none;
    -servicestudio-display: block !important;
}

.layout-native .tabs .tabs-content-tab:not(.open) {
    display: inline-block;
}

.tabs.tabs-vertical .tabs-header,
.tabs.tabs-vertical .tabs-header .ListRecords {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    height: 100%;
    width: auto;
    word-break: initial;
}

.tabs.tabs-vertical.justified .tabs-header {
    height: auto;
}

.tabs.tabs-vertical .tabs-header-tab {
    border-bottom: var(--border-size-none);
    border-right: var(--border-size-m) solid transparent;
    -webkit-box-pack: start;
       -ms-flex-pack: start;
     justify-content: flex-start;
    margin-left: var(--space-none);
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);
}

.is-rtl .tabs.tabs-vertical .tabs-header-tab {
    margin: 0;
    border-left: var(--border-size-m) solid transparent;
    border-right: var(--border-size-none);
    padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);
}

.desktop .tabs.tabs-vertical .tabs-header-tab:hover {
    border-right: var(--border-size-m) solid var(--color-neutral-6);
    border-bottom: var(--border-size-none);
}

.is-rtl.desktop .tabs.tabs-vertical .tabs-header-tab:hover {
    border-left: var(--border-size-m) solid var(--color-neutral-6);
    border-right: var(--border-size-none);
}

.desktop .tabs.tabs-vertical .tabs-header-tab.active:hover {
    border-right: var(--border-size-m) solid var(--color-primary);
}

.tabs.tabs-vertical .tabs-header-tab.active {
    border-right: var(--border-size-m) solid var(--color-primary);
}

.is-rtl .tabs.tabs-vertical .tabs-header-tab.active {
    border-left: var(--border-size-m) solid var(--color-primary);
    border-right: var(--border-size-none);    
}

.tabs.tabs-vertical .tabs-content {
    border-left: var(--border-size-s) solid var(--color-neutral-5);
    border-top: var(--border-size-none);
    margin-left: -1px;
    margin-top: var(--space-none);
    padding: var(--space-none) var(--space-m);
}

.is-rtl .tabs.tabs-vertical .tabs-content {
    border-left: 0;
    border-right: var(--border-size-s) solid var(--color-neutral-5);
}

.tabs.tabs-vertical.tabs-header-right .tabs-header {
    -webkit-box-ordinal-group: 3;
               -ms-flex-order: 2;
                        order: 2;
}

.tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-tab {
    border-left: var(--border-size-m) solid transparent;
    border-right: var(--border-size-none);
    padding: var(--space-s) var(--space-none) var(--space-s) var(--space-m);
}

.is-rtl .tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-tab {
    margin: 0;
    border-right: var(--border-size-m) solid transparent;
    border-left: var(--border-size-none);
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-none);    
}

.tabs.tabs-vertical.tabs-header-right .tabs-header .tabs-header-tab.active {
    border-left: var(--border-size-m) solid var(--color-primary);
}

.desktop .tabs.tabs-vertical.tabs-header-right .tabs-header-tab:hover {
    border-left: var(--border-size-m) solid var(--color-neutral-6);
}

.desktop .tabs.tabs-vertical.tabs-header-right .tabs-header-tab.active:hover {
    border-left: var(--border-size-m) solid var(--color-primary);
    border-right: var(--border-size-none);
}

.tabs.tabs-vertical.tabs-header-right .tabs-content {
    border-left: var(--border-size-none);
    border-right: var(--border-size-s) solid var(--color-neutral-5);
    margin-left: var(--space-none);
    margin-right: -1px
}

.is-rtl .tabs.tabs-vertical.tabs-header-right .tabs-content {
    border-right: 0;
    border-left: var(--border-size-s) solid var(--color-neutral-5);
}

.layout-native .tabs.tabs-section-group .tabs-content {
    overflow:  initial;
}

.layout-native .tabs-content-wrapper {
    -webkit-transition: -webkit-transform 230ms ease-in-out;
            transition: transform 230ms ease-in-out;
}

.layout-native .tabs-content-tab {
    display: inline-flex;
    height: 100%;
    position: relative;
    white-space: normal;
    width: 100%;
    vertical-align: top;
}

.layout-native .tabs-content {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    -servicestudio-white-space: normal;
    -servicestudio-overflow: visible;
}

.layout-native .tabs-content-tab > * {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    -servicestudio-position: relative; 
}

.layout-native .tabs-content-tab.open > * {
    position: relative;
}

.layout-native .tabs.tabs-vertical .tabs-content-tab:not(.open) {
    display: none;  
}

.layout-native .tabs.tabs-vertical .tabs-content .tabs-content-wrapper {
    transform: translateX(0px) translateZ(0px) !important;
}
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.