I am looking for guidance on removing the bottom line from the ionic 4 segment indicator. Any advice or tips on

  .segment-button-indicator {
        -ms-flex-item-align: end;
        align-self: flex-end;
        width: 100%;
        height: 2px;
        background-color: var(--indicator-color);
        opacity: 1;
    }

I am a beginner in hybrid app development and I am currently working with ion-segment. My challenge is to remove the ion-segment-indicator which displays a bottom line in ion-segment. Although I tried customizing the default CSS codes to achieve this, I have not been successful in removing it.

htmlcsstypescriptionic-frameworksass

Answer №1

If you're looking to conceal it, rather than delete it entirely, one trick is to camouflage it by adjusting the color to transparent.

To achieve this effect, navigate to theme/variables.scss and input the following code snippet:

ion-segment-button {
  --indicator-color: transparent !important;
  --indicator-color-checked: transparent !important;
}

Answer №2

Insert this code snippet into your scss file

  ion-segment-button {
    --color-checked: blue;
    --indicator-color: none;
  }
  • Custom indicator for border-bottom
  • Change color for active/checked segment

Answer №3

To implement the desired functionality, kindly copy and paste the provided code snippet into your variables.scss file:

.segment-button-checked{
  --border-width:0px;
  --indicator-color-checked: 0;   
}

Answer №4

Fingers crossed that this solution does the trick

ion-segment-button{
  --indicator-box-shadow: none;
 }

Answer №5

Include an extra class in the button to prevent conflicts and apply this specific style:

.YourSegmentClass::part(indicator-background) {
  background-color: #FAB159;
}

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

Disabling the scrollbar in Selenium screenshots

When using Chromedriver to capture screenshots of webpages, my code effectively does the job. However, I am now facing an issue with removing the unsightly scrollbars from the image. Is it feasible to inject CSS into the webpage in order to achieve this? W ...

javascriptc#cssseleniumselenium-chromedriver

Stylish mobile navigation styles with CSS

Hey there, I appreciate any help you can provide. I'm having trouble figuring out the right CSS code to modify the colors of my Mobile Menu only... I'd like to change the placeholder text as well as the text and background of the drop-down menu ...

cssmenu

How to center the navigation text on a WordPress website within the header.php file

Check out my website at I'm looking to center the navigation menu under the image. I've attempted multiple methods but can't seem to figure it out. Here's a snippet from the header.php file: <center><img src="http ...

csswordpresscenter

What steps should be followed to make progress bar function properly?

Currently, I am delving into the world of Angular and attempting to craft a progress bar using a directive: var module = angular.module("app", []); module.directive("progressbar", function () { return { restrict: "A", link: function (s ...

angularjshtmltwitter-bootstrap-3

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework. The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices. Howe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Holding out for a callback response in AngularJS / Ionic is key

Is there a way to delay the return of the result until after receiving a callback response? I am working with Ionic and AngularJS. ...

angularjsasynchronousionic-frameworkcallback

Scraping a p tag lacking a class attribute with the help of BeautifulSoup4 (Bs4)

I am attempting to scrape this information from a website: enter image description here Within the HTML, there is a div tag with a class. Inside that div tag, there is another div tag and then a lone p tag without a class. My objective is specifically to ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

What is causing the issue with my CSS keyframe animation not functioning correctly when using `animation-direction: reverse`?

Exploring the use of animation-direction: reverse to streamline my CSS keyframe animation process. An interesting scenario arises when a container div is clicked, toggling an "active" class using jQuery to trigger the animation in either forward or backwar ...

csscss-animations

Issues with Bootstrap Carousel Fade Transition and Button Controls inoperable

I am currently exploring the creation of a carousel on bootstrap that transitions smoothly between three images (specifically 3 'gorilla' jpgs). However, I am encountering some challenges while learning HTML. Challenge 1: The carousel is not tra ...

htmlcss

The scroll animation feature was not functioning properly in Next.js, however, it was working flawlessly in create react app

I recently transitioned a small project from Create React App (CRA) to Next.js. Everything is working as expected except for the scroll animations in Next.js, which are not functioning properly. There are no errors thrown; the animations simply do not occ ...

javascriptreactjstypescriptnext.jstailwind-css

Is it possible to use the same HTML select/dropdown menu for multiple rows in a table?

I am working with an HTML table that usually has between 10-30 rows, each containing a column for "item name". The drop down menu consists of about 75 products to choose from. In order to reduce the page size, I want to use a single drop down list for all ...

javascriptjqueryhtml

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class contains : .font16{ font-size: 16px; ...

htmlcssmarginline-height

Identifying the scenario where Partial<T> inherits from T

I am facing a scenario where I am working towards achieving a specific "state": type State = { foo: number, bar: number, baz?: string }; Initially, I may not have reached the complete State yet but rather align with the structure of Partial<State>. ...

typescripttypescript-typingstypescript-generics

Altering the appearance of a component that is currently selected and in use

Currently, I have incorporated a component with its selector within another component as shown below: <div class="col-xl-4" style="margin-bottom: 30px;"> <app-patient-info-accordion *ngIf="patient" [cardTitle]=&qu ...

htmlcssangularangular-components

Clicking on the checkbox will trigger the corresponding table column to disappear

Upon clicking the filter icon in the top right corner, a menu will open. Within that menu, there are table header values with checkboxes. When a checkbox for a specific value is selected, the corresponding table column should be hidden. I have already impl ...

javascripthtmlreactjsreduxmaterial-ui

Trigger the opening of a bootstrap modal from an external source on the current page

One common question is how to load a modal from another page onto the current page, or how to open a modal on the current page when it loads. My idea is a little different: I want to click on an image hotspot (like a person in a team photo) on the /home p ...

javascripthtmltwitter-bootstrapbootstrap-4bootstrap-modal

Combining broken down values within a loop

Take a look at this image, then review the code I've provided: function addNumbers() { var inputList = document.getElementById("listInput").value.split(" "); for(i = 0; i <= inputList.length; i+=1) { document.getElementById("resul ...

javascripthtml

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

I am experiencing a challenge with implementing multiple accordion menus on my website. Whenever I attempt to duplicate the code, the new accordion menu appears but clicking on the first bar simply scrolls me back to the top of the webpage. Below is the H ...

javascriptjquerycsshtml

Bizarre actions with jQuery append in Internet Explorer 8

Issue with adding elements to a div in IE8: The element is not added until the button is clicked twice, resulting in two new elements being added at once. Here's the code snippet in question: $(options.addButton).click(function(event) { var proto ...

javascriptjqueryhtmlcssinternet-explorer-8

Struggling to align the footer of your webpage and ensure it adjusts proportionally with the window size?

After trying several codes that have worked before, I ran into a problem when attempting to place two div side by side for the footer. No matter what code I tried, I couldn't get it centered and responsive to the user window ratio. Even after consulti ...

htmlcss