Circular Segment Button in Ionic 2

Is there a way to change the appearance of a segment button from square to round using CSS?

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

I attempted to use traditional CSS, but encountered issues when Ionic2 attempted to transform the button on segment-activated. You can view an example in this Plunker.

<ion-segment [(ngModel)]="date" danger>
  <ion-segment-button value="1">
    1
  </ion-segment-button>
  <ion-segment-button value="2">
    2
  </ion-segment-button>
  <ion-segment-button value="3">
    3
  </ion-segment-button>
</ion-segment>
.

I was unsuccessful in achieving the desired result with standard CSS, and encountered layout issues when selecting a different button https://i.sstatic.net/o0dbQ.png.

htmlcssangularionic2

Answer №1

Discovered a workaround to achieve it. Keep in mind that this is not the intended style.

CSS fix: add the following code to your .scss file

ion-segment-button{
  //max-width: 25px;
  border-style: solid;
}

.segment-button {
  border-style: none;
  border-color: #e62100;
  color: #e62100;
  border-width: thin;
}

.segment-button:first-of-type {
  border-radius: 90px 90px 90px 90px;
  // margin-right: 0px;
  margin-left: 0px;
  line-height: 3.4rem;
  height: 100%;
  width: 100%}
.segment-button:not(:first-of-type) {
  border-radius: 90px 90px 90px 90px;
 // margin-right: 0px;
  margin-left: 20px;
  line-height: 3.4rem;
  height: 100%;
  width: 100%;}
.segment-button:last-of-type {
  border-radius: 90px 90px 90px 90px;
  margin-right: 0px;
  margin-left: 20px;
  line-height: 3.4rem;
  height: 100%;
  width: 100%;}


 .segment-activated{
  background-color: #e62100;
  color: #ffffff;
}

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

Error message pops up in WebStorm when attempting to access the map object in Angular

Within one of the services in my Angular application, I have utilized the map() function to retrieve data from the GitHub API. getUser(username: string) { // Regular Expression used for String Manipulation return this.http.get('https://api.github.com ...

angulartypescriptwebstorm

Angular Route Authorities is a powerful tool for managing permissions

In my routes, I have a specific path: {path: 'Demands/:id', component: EditDemandesComponent}. This path allows me to edit demands. However, I've noticed that if the ID does not belong to one of my demands, I am still able to access the path ...

angulartypescriptsecurityroutes

Token and authentication in Angular 2

I am currently working on creating authentication in Angular 2. To do this, I have set up a post service: constructor(http: Http) { this.http = http; let currentUser: IUserTokenType = JSON.parse(localStorage.getItem("currentUser")); this.token ...

angular

I am experiencing the issue of unexpected borders showing up on the HTML/CSS page that I designed

Greetings, amazing community at StackOverflow! I recently completed an HTML/CSS Project as part of a Codecademy Intensive course. If you're curious to see the project in action, feel free to check it out on GitHub by visiting this link. One thing I ...

htmlcss

Parenting and Child Components: Keeping the State in Sync

I am currently diving into my initial React project which focuses on a basic expense tracker for credit cards. While I'm still in the learning phase, I hope you can decipher the intent behind my code. My current roadblock involves mapping the state an ...

javascripthtmlreactjs

Is there a smooth and effective method to implement a timeout restriction while loading a sluggish external file using JavaScript?

Incorporating content from an external PHP file on a different server using JavaScript can sometimes be problematic. There are instances where the other service may be slow to load or not load at all. Is there a method in JavaScript to attempt fetching th ...

javascripthtmlajaxtimeoutexternal

Ensure that the sidebar in your React application occupies the full height of the page, regardless of the presence of scrolling

In my application, most of the pages fit within the viewport which is why I have been using height: 100vh for my <SideNav /> component. However, some pages now require scrolling and this causes issues with the sidebar as it abruptly ends when scrolli ...

htmlcssreactjsstyled-components

The striped color override feature in Bootstrap appears to be malfunctioning in Internet Explorer 8

I have come across several discussions regarding this topic with various suggestions. My current objective is to make the alternating rows in Bootstrap (2.3.2) appear darker in Internet Explorer 8. To achieve this, I attempted to override the style by impl ...

cssinternet-explorertwitter-bootstrap

Issue: Unhandled promise rejection: BraintreeError: The 'authorization' parameter is mandatory for creating a client

I'm currently working on integrating Braintree using Angular with asp.net core. However, I've encountered an issue that I can't seem to solve. I'm following this article. The version of Angular I'm using is 14, and I have replicate ...

javascriptangulartypescriptasp.net-corebraintree

Adjust the ZIndex on a div through interactive clicking

For my new project, I'm exploring a concept inspired by Windows 7. The idea is that when you double click on an icon, a window will open. If you keep double clicking on the same icon, multiple windows should appear. The challenge I'm facing is im ...

javascripthtmlcssz-index

Having trouble saving textarea content to a file with php?

I'm having trouble saving the content of a textarea to a file. I used the POST method to send the form to another page, but when I try to include the textarea content with the file on that page, it's not working and I'm unsure of what the is ...

phphtmltextarea

Calculating the product of numbers within an HTML table based on designated column headers using IONIC instructions

Issue: In my HTML table, there are three columns labeled as Price, Quantity, and Total. Numbers are entered under each column. Objective: My goal is to automatically calculate the value in the Total column by multiplying the values in the Price and Quanti ...

angularionic-frameworkionic2

The CSS "ul" selector targets unordered lists in HTML

How can I target the ul elements highlighted below in my HTML markup without using a class or id for reference? Here is the relevant portion of my HTML code: <div id="mainmenu"> <ul class="menu"> <li class="item-472"> < ...

htmlcsscss-selectors

I'm interested in creating a unique form validator in Angular that verifies if a string has a combination of letters and numbers. How can this be

Currently, I am developing a registration form within Angular that mandates users to create a password comprising of both letters and numbers. I am in need of embedding a personalized validator to uphold this regulation. What would be the most practical ap ...

angulartypescript

adjust the fixed div's width to match the percentage-defined width of its parent element

My goal is to make a div with the position: fixed property have the same width as its parent element, which is a td. However, I am having trouble achieving this. Here is my current code: HTML: <table style="width: 90%; border: 1px solid black;"> & ...

htmlcsswidthcss-positionsticky

Establishing connection to the database

I am in the process of developing a small-scale project on creating Universal Identification Numbers, similar to that of college level projects. My goal is to design a page with tabs for different databases, so that when I press the key 'A' for a ...

phpmysqlhtml

Tips on effectively centering a wide div

After much experimentation, this is what I came up with: (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en ...

javascriptjqueryhtmlcss

Using sandboxed iframes in HTML for secure `src` loading on Internet Explorer 11 and Microsoft Edge

Is there a way in IE11/Edge with HTML5 to populate a sandboxed iframe (<iframe sandbox></iframe>) with HTML without using a src url? I am searching for a solution similar to srcdoc that is compatible with all other modern browsers. Attempting ...

htmliframeinternet-explorer-11sandboxmicrosoft-edge

How can I use pinching gestures to zoom in and out on an image in the ASP.NET framework and HTML5?

I'm developing an iPad app and utilizing the ASP.NET framework along with HTML5 and Mobile jQuery. Any tips on how to accomplish this? Thank you! ...

asp.nethtmljquery-mobile

Design a big-sized button using Bootstrap framework

Is there a way to design a big, responsive button using Bootstrap? Similar to the example image linked below https://i.sstatic.net/xEBwc.png ...

htmlcsstwitter-bootstraptwitter-bootstrap-3