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:

https://i.sstatic.net/NXa4w.png

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: https://i.sstatic.net/g1mZe.png

Snapshot while scrolling https://i.sstatic.net/BGX5i.png

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

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet: HTML: <div class="relative-parent"> <div v-for="item in 12" class="hiding-parent"> <div c ...

javascripthtmlcssvue.js

Make an Angular 2 request to a particular website

I have a service within my project named user.service.t.js. I am trying to send a request to a specific site, such as sites.com, in order to retrieve its content. Below is the code snippet that outlines how I am attempting to do this: getSites(user) { ...

angularangular2-services

Ways to remove redundant code from multiple service calls

Within my DataService, I have set up an observable for various API calls. I am looking to streamline the process by creating a reusable block of code to be used in each HTTP request. export class DataService { constructor( private http: HttpClient, ...

angularangular6angular-services

What is the syntax for indenting text inside an inline-block element?

Essentially, the checkboxes displayed here are in a graphical format to avoid using checkbox elements for accessibility reasons (only the link should be interactive). However, aligning a span next to an href and indenting the text to line up with the star ...

css

Looking to design an interactive grid for generating dynamic thumbnails

I am a beginner in the field of web development and I have a desire to create a website for showcasing my portfolio. This website should feature project thumbnails along with brief descriptions, all of which should be displayed dynamically. Although I poss ...

phpjavascriptjqueryhtmlcss

Angular 8 implementation of a responsive readonly input text field styled with Bootstrap 4

I want to make the input text read-only using Bootstrap. After some research on the Bootstrap website, I discovered that the form-control-plaintext class can be used for this purpose. <input type="text" readonly class="form-control-plaintext" id="stat ...

htmlcssangulartwitter-bootstrapbootstrap-4

Uniform widths of table cells when resizing and overflowing

I am working with a table that looks like the one below: +-----+-----+-----+-----+-----+-----+ | | | | | | | +-----+-----+-----+-----+-----+-----+ | | | | | | | +-----+-----+-----+-----+-----+-----+ | | ...

htmlcss

Display user's name in navigation bar using asp.net mvc

When working on an ASP.NET MVC project, I wanted to include a short message for the user, such as 'Hello, username!' In the navigation bar, specifically when the user is signed in, I encountered some display issues with the standard bootstrap la ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

I have been trying to create a table with a fixed header (meaning the header must be visible both vertically and horizontally). The table should be scrollable It should have a horizontal header The vertical header should match the horizontal header When ...

javascriptjquerycsscordova

Excessive screen height causes the CSS box layout to overflow

I am looking to create a screen layout similar to the one shown in this image. It should consist of a row with no overflow and include: A left box that contains: A fixed height header (20px), An aspect square box taking up the remaining height. ...

cssreactjstailwind-css

Reducing Bootstrap Navigation Bar with a scrolling logo

Is there a way to make the fixed navbar shrink 50% when it starts scrolling? I've only come across text navbars, but I'm looking for one with a logo. Any suggestions would be greatly helpful. You can access the css and html from that link. ...

csstwitter-bootstrapnavbar

Enhancing the Syntax of If and If Else in Jquery Functions

I'm struggling to simplify and optimize this block of code. Would appreciate any help in making it more efficient! var status = "closed"; $(document).on('click', '[data-toggle-nav]', function(event) { if ($(this) && status = ...

javascriptjqueryhtmlcss

When the label is clicked, retrieve the value of the checkbox within

I have a checkbox inside a label, and for design purposes, I added a div there. My requirement is to get the checkbox value on the click event of the label. However, I am always getting false whenever the checkbox is clicked. <label class="text-xs col- ...

cssangularjscheckboxonclick

Building a Dynamic Checkbox Validation Feature in Angular Using Data retrieved from an API

Currently, I have a function that retrieves and displays a list obtained from an API: displayEventTicketDetails() { this.Service .getEventTicketDetails().subscribe((data: any) => { this.eventTicketDetails = data.map(ticket => ticket. ...

javascripthtmlangulartypescript

Struggling with CSS due to the INCLUDE Function

After downloading a Template + CSS File for the website I am working on, everything was going smoothly until I decided to break down the template into separate files for easier modification and editing in the future. However, once I cut out the head sectio ...

phpcss

Mastering the art of horizontal alignment in forms

So, within my render function, the following code is used: render() { <div> <form id="one"> <TextField id="t1" ... /> <Button id="b1" /> </form> <div id="empty"><div ...

cssreactjsmaterial-ui

Only implement valueChanges on the second step of the form

I am utilizing the mat-stepper with a single form. My stepper has two steps only. I am looking to make an API request for every input value change, but only when the user is on the second step. How can I accomplish this? .ts ngOnInit() { this.formGr ...

angulartypescript

Is there a way to eliminate the default arrow on a list input and replace it with a custom arrow solely with html and css?

Is there anyone who can help me figure out how to remove the default arrow in the list input field and replace it with a new arrow icon? <body> <form > <label for="data-list">Choose a browser from this list &l ...

htmlcssinputdropdownhtml-input

When is the best time in the redux flow to utilize methods for displaying notifications, such as toasts?

As I develop my angular2 app using ngrx/store, I am wondering at which point in the redux lifecycle I should trigger methods to display notifications (toasts). My initial thought is to handle this in side effects (utilizing ngrx/effects). @Effect({ dispa ...

angulartoastngrx

Angular leverages property binding to connect properties and attributes in the component template

Is there a way to use a property, such as a string, to access an attribute of an object? I was thinking of something like this: cIC -> Object with attribute nameDe language -> String with nameDe <p *ngFor="let cIC of this.customerInformati ...

angular