Ionic 4 Tabs with Smooth Scrolling

I recently started using Ionic 4 and I'm trying to create scrollable tabs in Ionic 4. However, when I include multiple tabs as shown in the code below, they become compressed and appear within the same viewing space.

<ion-tab-bar slot="top">
    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>
</ion-tab-bar>

Here's how the above code appears:

I would appreciate any assistance on this matter.

cssangularionic-frameworkionic4

Answer №1

After taking advice from @Diodeus-JamesMacFarlane, I experimented with custom css to find a solution.

I managed to resolve the issue by utilizing display: flex and overflow-x: scroll

Here is an excerpt from my SCSS file:

.segment-card {
    display: flex;
    overflow-x: scroll;
    .segment-item {
        display: inline-block !important;
        min-width: 100px !important;
        width: auto !important;
    }
}

This snippet comes from my HTML file:

<ion-card no-padding no-margin class="no-border-radius segment-card">
    <ion-tab-button class="segment-item" tab="account">
        <ion-icon name="person"></ion-icon>
        <ion-label>Label1</ion-label>
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="contact">
        <ion-icon name="call"></ion-icon>
        <ion-label>Label2</ion-label>
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="settings">
        <ion-icon name="settings"></ion-icon>
        <ion-label>Label3</ion-label>
    </ion-tab-button>

    <ion-tab-button class="segment-item" tab="account">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="contact">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="settings">...
    </ion-tab-button>

    <ion-tab-button class="segment-item" tab="account">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="contact">...
    </ion-tab-button>
    <ion-tab-button class="segment-item" tab="settings">...
    </ion-tab-button>
</ion-card>

Attached are some screenshots for reference:

Snapshot while scrolling

Answer №2

CSS

tab-bar {
  scrollbar: auto;
}

operates effectively

Answer №3

When it comes to this type of approach, my preference leans towards using ionic segments. The documentation provides great examples here

<!-- Implementing a Segment within a toolbar -->
<ion-toolbar>
  <ion-segment (ionChange)="segmentChanged($event)">
    <ion-segment-button value="camera">
      <ion-icon name="camera"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="bookmark">
      <ion-icon name="bookmark"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the background color based on the length of the input in Vue

Can you change the background color of the initial input field to green if the value of the Fullname input field is greater than 3 characters? See below for the code: <div id="app"> <input type="text" v-model="fullname" placeholder="Enter Full ...

javascriptcssvue.jsvuejs2vue-component

Adjust the appearance of a div according to the input value

When a user inputs the correct value (a number) into an input of type "number," I want a button to appear. I attempted var check=document.getElementById("buttonID").value == "1" followed by an if statement, but it seems I made a mistake somewhere. Here&ap ...

javascripthtmlcssbuttoninput

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

javascripthtmlcssbackground-color

What are the steps to create an endless scrolling feature?

I'm trying to create a slider with a horizontal scrolling effect, but I've hit a roadblock. How can I make the slider scroll infinitely? In my code, you can see that after Item 6, it stops scrolling and I have to scroll backward. However, I want ...

javascripthtmljquerycss

Tips on utilizing Selenium with Java to locate and interact with elements on an Angular web application

I'm facing challenges with automating an Angular web app. Despite trying simple code, it still isn't working. Here's an example of my code: @BeforeClass public void setUp() { ChromeOptions options = new ChromeOptions(); ...

javaangularselenium-webdriver

Switching the class from "untoggled" items to the selected item in React

Recently, I developed a toggle component known as Accordion. Within this component, I am iterating through an array of objects and displaying them in the following format: {object.map((o) => ( <Accordion key={o.id} title={o.question} className="i ...

cssreactjsreact-hookstoggleaccordion

The routing system in Angular 4 seems to have trouble functioning properly when accessed from within the Laravel public folder

Currently, I am facing a challenge with deploying my Laravel JSON API which is being used by an Angular 4 application. During deployment, I utilize Forge and place the contents of the "dist" folder within Laravel's public directory. However, I am enco ...

laravelangulardeploymentforge

How can I integrate material-ui with react-jsonschema-form?

Currently, I am working on a form utilizing react-jsonschema-form. However, I would like to further enhance the appearance of my application (including the form) by incorporating Material-UI. I am encountering difficulties integrating both frameworks toget ...

cssreactjsmaterial-uijsonschema

Issues with CSS rendering in the Chrome browser are causing display problems

After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...

cssgoogle-chrome

Tips for organizing the contents of nested items in alignment

Here's a layout I've created, you can view it on CodePen. .parent { display: flex; justify-content: space-between; } .left { flex-grow: 1; flex-basis: 0; background-color: blue; } .right { background-color: red; flex-grow ...

htmlcss

Is there a way to modify the color scheme of my webpage while utilizing Bootstrap?

As I delve into programming with Bootstrap, I encountered an issue while attempting to change the background color of my body. Even though I used the following CSS code: body { background-color: #eba; width: 100%; height: 100%; } The color change ...

javascriptjqueryhtmlcsstwitter-bootstrap

Covering the entire screen, the Div element takes up the entirety of

Just like with other pages, the main div always takes up the entire screen visible to the user. As they scroll down, another div becomes visible: example1 , example2 Regardless of the screen size, the main div will always fill the space visible to the use ...

javascripthtmlcss

Tips for showing text on top of a responsive image using CSS

I am working on a layout with 4 columns, each containing images of different sizes followed by a hover effect with an absolutely positioned mask. The width of the mask is currently exceeding the width of the images. Is there a way to ensure that the mask ...

htmlcssresponsive-design

The downside Div is being displaced by a Paragraph with an overflow-y:scroll property

In my Div, I have set the width and height of a paragraph along with the property overflow-y:scroll. It's working fine as the paragraph is displaying with a vertical scroll. However, it is causing displacement in the div below. Below is the HTML code ...

htmlcss

Discord between Bootstrap tabs and C3 charts: A Compatibility Str

On my website, I have implemented Bootstrap navigation tabs that each contain a chart. The issue I am facing is that when I navigate to the home page, the chart in the active tab displays perfectly fine. However, for the other tabs, the charts overlap with ...

javascriptjqueryhtmlcssc3.js

Issue with material datepicker not initializing start value when input field is clicked

Using the Material date picker, I've implemented the date picker feature with the startAt binding to establish a default selected value. Users can open the calendar overlay by clicking on the input field, thanks to the (click) and (focus) event bindin ...

angularangular-materialdatepickerangular-material-datetimepicker

Version 4.6.4 of TypeScript is flagging the code as invalid

How can I fix this Typescript problem? const userInformation: { email: string; id: string; _token: string; _tokenExpirationDate: string; } = JSON.parse(localStorage.getItem('userData')); Console Error Message Error: ...

javascriptangulartypescriptnullable

Is there a way to make sure video files are downloaded instead of automatically playing in the browser window?

I have a link to a video file with various formats like mp4, 3gp, etc. When I click on the link, it opens in the same tab. Changing the target attribute to "_blank" makes the video open in a new tab. However, when I ctrl-click the link, the file s ...

angularcors

Navigating on a stationary object: CSS Styling

I have a main div with another nested div inside. The nested div contains cards, but I am unable to scroll through them due to the fixed positioning of the main div. I need a way to enable scrolling for the cards within the nested div. Note that the presen ...

htmlcssreactjs

Choosing a unique font style in CSS (OTF) - How to differentiate between bold, italic, etc. when using multiple OTF files?

I'm a little confused on how to implement @font-face in my current project. The client handed over multiple font files including FontName-Black.otf, FontName-BlackItalic.otf, FontName-Bold.otf, FontName-BoldItalic.otf, and more. My usual approach wou ...

cssfont-face