Resizing buttons in Ionic 2 using columns

I have a simple challenge to tackle,

I am seeking a way for my buttons to occupy 90% of the width of my columns in Ionic 2, regardless of the text content.

.button-pink {
    color: #F63566;
    background-color: white;
    text-transform: uppercase;
    font-size: 75%;
    border: 2px solid #F63566;
    padding: 6% 23%;
    margin: auto;
    white-space: nowrap;
    text-align: center;
    font-family: "SanFranciscoText-Regular";
    font-weight: bold;
    letter-spacing: 0.3em;
}

Despite the CSS styling provided above for my button, I am struggling to ensure that it fills the width of the column consistently without being affected by changes in text length.

Any assistance on this matter would be greatly appreciated. Have a wonderful day!

cssionic-frameworkionic2

Answer №1

To adjust the size of the button, modify the width property in your CSS file.

.button-pink {
  width: 90%;
}

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

Adjust CSS classes as user scrolls using skrollr

I am currently facing an issue with the prinzhorn/skrollr plugin when trying to use removeClass/addClass on scroll function. I have attempted to find a solution but unfortunately, nothing has worked for me. <li class="tab col s3"><a data-800="@cl ...

javascriptjqueryhtmlcssskrollr

Unable to adjust image opacity using jQuery

I am attempting to change the opacity of an image based on a boolean flag. The image should have reduced opacity when the var pauseDisabled = true, and return to full opacity when pauseDisabled = false. To demonstrate this, I have created a fiddle below. ...

javascriptjqueryhtmlcssopacity

What causes the entire page to disappear when the screen is adjusted to mobile width?

I'm facing an issue with my ReactJS screen. Everything works perfectly until I resize the screen to mobile width (sm of Material UI) and then everything turns into a WhiteScreen. I've been trying to debug this but can't seem to find the root ...

cssreactjs

Unable to ensure uniform height for React MUI Cards

I am facing a challenge with my dashboard layout that consists of 3 cards, each containing a separate component. The height of the cards dynamically adjusts based on their content. My goal is to make all 3 cards have the same height as the one with the t ...

cssreactjsmaterial-uigridstyled-components

On smaller device screens, the full-height sidebar and content area experience some disruption

How can I resolve the height issue with sidebar and content area on smaller devices, maintaining 100% height for both? I'm having trouble fixing it with the current code. I am aiming to create a fixed-width sidebar that expands to full width on small ...

htmlcsssidebar

issues with rounded corners not functioning properly within frameset

I'm trying to display rounded corners in IE frameset, is there a way to do this? Check out the example below: index.html: <html> <head><title></title></head> <frameset rows="*,64" style="margin:0; padding: 0;" frame ...

css

Swapping icons in a foreach loop with Bootstrap 4: What's the most effective approach?

I need a way to switch the icons fa fa-plus with fa fa-minus individually while using collapse in my code, without having all of the icons toggle at once within a foreach loop. Check out a demonstration of my code below: <link rel="stylesheet" href= ...

javascriptphphtmlcssbootstrap-4

PHP script that dynamically highlights text based on values retrieved from a database

I have multiple small HTML tables generated by PHP on a single page, each with a unique <table id="">. The data in these tables corresponds to entries in a MySQL table with matching IDs. What I am looking for is to automatically highlight the values ...

javascriptjquerycss

Ways to align anchor tags in the middle of a DIV element?

<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);"> <div style="margin: 5px;"> <a href="#link">#down2#</a> </div> </div> This is the current code I am w ...

htmlcss

How to update the border color of focused elements in ExtJS?

In my ExtJS application running on ExtJS 6 with the default Theme-Triton, I am looking to customize the focus border color. Is there a solution to modify the CSS property that will globally change the focus border color from blue to red, for instance? ...

cssextjs

The color of ngClass does not update according to the variable's value

When the value is true, I want to display a green text message and when it's false, I want it to be red. This is my angular app: In the controller, I declare a variable at the beginning and set it as true: $scope.IsColor = true; if (response.data.i ...

javascripthtmlcssangularjs

"Want to know the trick to make a Vuetify component stretch to fill the rest of the screen's

Imagine a scenario where there is content above and below a table on a webpage. The goal is to get the table to occupy the remaining height of the page without affecting other elements. This ensures that the content below the table is always visible at the ...

htmlcssvue.jsvuetify.js

Trigger an "onMouseMove" event when the "pointer-events-none" css property is applied to fire

Currently, I am dealing with a React Component that contains an absolutely positioned div overlaying other content within my application. This particular div is utilized to trigger react's onMouseMove event. My objective is to apply the CSS value poi ...

javascriptcssreactjsjsx

Chrome scrolling causing Webkit mask to shift position

I have successfully created a rounded Google map after much effort. Here is the link to the JSFiddle: http://jsfiddle.net/DZTvR/13/ However, I encountered an issue in Chrome where the mask remains static while scrolling, unlike other browsers like FF, Op ...

htmlcssgoogle-chromewebkit

What is the best way to display asynchronous or observable data in Ionic framework?

I'm currently following a tutorial on LinkedIn Learning that covers implementing the design of a detail page with Ionic 4.0. The tutorial link can be found here. However, I've encountered an issue when trying to display the fetched data from the ...

javascriptangularionic-frameworkobservable

Utilizing the 'create' function in sqlite each time I need to run a query

I've been diving into SQLite within the Ionic framework and have pieced together some code based on examples I've encountered. import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-a ...

sqlitetypescriptionic-frameworkionic3

Unable to retrieve information from a function in Vue.js (using Ionic framework)

When attempting to extract a variable from a method, I encounter the following error message: Property 'commentLikeVisible' does not exist on type '{ toggleCommentLikeVisible: () => void; This is the code I am working with: <template& ...

typescriptvue.jsionic-framework

The Alert Component fails to display when the same Error is triggered for the second time

In the midst of developing a Website using Nuxt.js (Vue.js), I've encountered an issue with my custom Alert Component. I designed a contact form on the site to trigger a specialized notification when users input incorrect data or omit required fields ...

javascripthtmlcssvue.jsnuxt.js

What is the best way to implement a conditional data-attribute tag in order to trigger JavaScript functionality?

Is there any way to conditionally apply JavaScript or jQuery code in an HTML Template? For example, if a data-id attribute with the value "no-copy" is found inside the body tag, certain JavaScript code will be applied. To explain it more simply, I have J ...

javascripthtmljquerycss

Issue encountered while running the command "ionic generate page"

Can someone assist me in configuring my module to recognize the new pages I generated? Using the ionic command ionic generate page in my terminal, I successfully created two new pages in my file tree: one named privacy-policy and the other terms-of-use. Th ...

angulartypescriptmoduleionic2