[OutSystems UI] [Outsystems UI] Tabs pattern doesn't work properly on OSUIMobilePhone base theme

Back to Forums

NDP

Solved

Question

Mobile

Forge

OutSystems 11

OutSystems UI

OutSystems UI Patterns

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

30 Jun 2021

NDP

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;
}

01 Jul 2021

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

See the full guidelines