Ion tabs displaying differently on desktop as opposed to mobile devices

I recently updated the styling on my ion-tabs.

They are displaying correctly on desktop, but not on mobile.

What am I missing?

Desktop View:

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

The ion-tabs renders properly.

Mobile View:

https://i.sstatic.net/SGhLP.jpg

The ion-tabs appears white.

How can I make them look consistent? I came across this resource mentioning a custom theme, but is there a faster solution available?

This is the code I have used so far:

HTML:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Home Tab -->
  <ion-tab icon-off="ion-android-home" icon-on="ion-android-home" ui-sref="tab.home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <!-- Notifications Tab -->
  <ion-tab icon-off="ion-android-notifications" icon-on="ion-android-notifications" ui-sref="tab.notifications">
    <ion-nav-view name="tab-notifications"></ion-nav-view>
  </ion-tab>

  <!-- Search Tab -->
  <ion-tab icon-off="ion-android-search" icon-on="ion-android-search" ui-sref="tab.search">
    <ion-nav-view name="tab-search"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab icon-off="ion-android-person" icon-on="ion-android-person" ui-sref="tab.account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>

SCSS:

// Tabs

.tabs {
    background-color: #242424;
}

ion-tabs.tabs-color-active-positive .tab-item {
    color: #fff !important;
}

.tab-item .icon {
    padding-top: 2px;
    height: 48px;
    font-size: 40px;
}
androidcssionic-frameworksass

Answer №1

Your ionic.css file with the class definition for ionicons may not be properly included in index.html within your mobile build.

To ensure inclusion:

  1. Check that the index.html file at 

    platforms/www/<android/ios>/<path to index.html>
    references ionic.css

  2. Ensure that the file ionic.css is copied to the correct path

You can also verify the presence of this file in your app's mobile build by inspecting it in chrome://inspect for android or using safari for ios builds.

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

It seems that using the SVG <mask> tag is necessary for Firefox to display correctly, but it causes issues with CSS mask in

I need assistance with masking content using an external SVG image. Currently, I'm using the following code: #homepage-banner .desktop-slider.masked { -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */ mask: ur ...

cssfirefoxsvgmask

The image slider is blocking the dropdown functionality of the navbar on mobile devices

My code is experiencing a conflict of events. I have created a menu bar using nav bar, as well as an image slider called the caroussel. The issue arises when the window is minimized - the menu bar fails to drop down properly with the presence of the caro ...

javascriptjqueryhtmlcsstwitter-bootstrap

Testing the alertcontroller in an Ionic environment

In my current project, I am tasked with testing an application that utilizes an alert to notify the user about its NFC usage. To properly unit test this app, I decided to spy on the alertController.create method using Jasmine like so: alertController.creat ...

angulartypescriptionic-frameworkjasmine

Tips for correctly center aligning a Div element

I'm facing some challenges with properly centering my website It appears to be centered when I zoom out. However, for users who don't zoom out, it looks misplaced. Do you have any suggestions? The site was built using all AP divs and even with a ...

htmlcss

What are the best practices for implementing JmDNS on Android?

Hoping for some guidance on the following topic... I am diving into the world of Android development and seeking assistance!!!! Over the past couple of weeks, I have been diligently working to successfully implement JmDNS on Android... (This includ ...

javaandroidjmdns

Responsive design element order rearrangement

My code example is as follows: <div class="info-container"> <span class="item1">item1</span> <a class="item2" href="#">item2</a> <a class="item3" href="#">item3</a> </div> I want to rearran ...

javascriptjqueryhtmlcssangularjs

Is there a way for me to design a button that includes an image?

I'm looking to create a button on my webpage using an image that will link to other pages. I want the flexibility to use both small and large text on this button. The specific image I want to use is: So far, I've attempted some coding but haven ...

htmlcssbutton

Having trouble getting the smooth scroll-behavior to work properly in Tailwind CSS?

I've been working on my portfolio using next.js and tailwind CSS. I've added scroll-behavior: smooth in the globals.css file, and in the Navbar, I used https://i.stack.imgur.com/wqb4t.png I really want to achieve that smooth scrolling effect thr ...

htmlcssreactjsnext.jstailwind-css

Bootstrap 4: Content overlapping fixed sidebar position

Simply put, I am in the process of building a website utilizing the SB Admin 2 template with some slight adjustments. One modification I am looking to make is ensuring that the left sidebar remains fixed as users scroll through the site. By applying .pos ...

cssbootstrap-4flexbox

Tips on eliminating excess space between the header and main body of content

I am currently using Bootstrap for my website design. I have placed my content inside a wrapper, with the header positioned outside of it. However, there is a white gap that stretches across the entire page between the nav bar at the top and the right edge ...

htmlcsstwitter-bootstrap

Running Content Scripts and CSS styles from Background Page in Chrome Extension - Manifest V3

I'm currently working on developing a chrome extension, and my goal is to have a small circle appear on the screen when the extension is active. I require CSS for this task, and my plan involves setting the background in the manifest file and triggeri ...

javascriptcssgoogle-chrome-extensionscriptingchrome-extension-manifest-v3

Chrome not displaying fonts properly

Having a font issue in Chrome where specifying "Myriad Pro", Tahoma, Arial results in weird symbols. Works fine in FF, IE, and Safari. Using font-family: Tahoma, Arial; works for all browsers including Chrome. How can Myriad Pro be achieved for IE, FF, a ...

htmlcssgoogle-chrome

Aligning enlarged text that spills over

Within my html/css application, I have defined a button as a class named .button with specific attributes. Here is a simplified example: .button { width: 120px; height: 30px; line-height: 30px; background: yellow; text-align: center; } <div ...

htmlcsscss-transforms

aligning columns within a flexible element that has a maximum height

Within this flex element, I have set flex: column wrap; and max-height: 150px;. The issue I'm facing is that justify-content doesn't seem to be working. However, when I switch to using height: 150px, the alignment works fine. This problem arises ...

htmlcssflexbox

Is there a way to give a unique color to a single <a> element with a specific class, differentiating it from the

Apologies if my title is not precise enough. Describing this in just a few words for the title was a bit challenging. Context I am personalizing a template on wordpress.com. The website in question is: I have enclosed the DONATE menu item in a gold-col ...

htmlcss

Removing the mouse from the element restores the previous background image of the div

I have some text here. <div id="imagecontainer" class="header-image-container">&nbsp;</div> The background image is specified in the CSS for each page based on the parent class. .category-1 #imagecontainer { background: url(_/images/1.jp ...

javascriptjquerycssmouseovermouseout

Personalized Bootstrap 4 grid system

Could someone guide me on how to create this grid layout with Bootstrap 4? I am trying to achieve a design where one column stretches from the edge of the window to the inside, while the other column is half the width of a standard .container element. ht ...

cssbootstrap-4grid

Dynamic content cannot have classes added to them using jQuery

When adding content dynamically, it is necessary to use an event handler for a parent element using on(). However, I am facing an issue where the class added with addClass on dynamically generated content disappears immediately. Let's take a look at ...

javascriptjquerycssajax

Is there a way to send notifications using Server-Sent Events (SSE)

I am currently working on fetching real-time data from a server and displaying it on the screen while also sending notifications. The data being received is a random number that changes every second. Upon opening the app, the server starts running in the ...

javaandroidnotificationsserver-sent-events

Conceal a form field depending on the data retrieved from a database in PHP

I need assistance with hiding an input field based on the chosen value from a dropdown. There are two values, stone1 and stone2, that are automatically populated from a database. My goal is to hide the "karat" input field if stone1 is selected, hide the "c ...

javascripthtmljquerycss