CSS styling is not being applied to buttons within Ionic 2

I'm completely new to Ionic and hybrid apps as a whole. I've been experimenting with a test app, but for some reason, none of the CSS seems to be working. Could someone please help me figure out what mistake I might have made? Here are my files: test.scss:

test{

.button-inner {
  width:20% !important;
  margin:30px;
}
}

Additionally, here's the corresponding test.html file:

<ion-content padding>
<button ion-button round class="button-inner">Submit</button>

</ion-content>

I've also referred to these classes in the ts file:

@Component({
  selector: 'test',
  templateUrl: 'test.html',
})

I can't seem to understand why the button is still taking up the entire width of the screen instead of just 20%. Any thoughts or suggestions would be greatly appreciated.

Thanks

htmlcssangularsassionic2

Answer №1

Encountered this issue previously, possibly due to Angular's view encapsulation (also known as shadow root). A workaround I found was implementing something like the following:

<ion-content padding>
<button ion-button round><span class="button-inner">Submit</span></button>

</ion-content>

It's uncertain if this approach will yield the desired results as my experience with Ionic is limited.

UPDATE

Following discussions in the comments, I managed to create a functioning Plnkr example demonstrating the desired behavior.

home.ts

import { Page, NavController } from 'ionic-angular/index';

@Page({
  templateUrl:"home.html"
})
export class HomePage {
  constructor(private nav: NavController) {}
}

home.html

<ion-content padding>
  <button ion-button round class="custom-button button-inner">Submit</button>
</ion-content>

style.css

.custom-button {
  width: 20% !important;
  margin: 0 auto;
}

Plnkr link

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

Tips for solving the error "Angular CLI version 7.0.3 cannot install node-sass"

Every time I attempt to run npm start, an error message stating that it cannot find the module node-sass appears. Then, when I try running npm install node-sass --save, a series of errors pop up. https://i.stack.imgur.com/2I7DU.png ...

angularnpmsasscommand-line-interfacenode-sass

Creating an external JavaScript and CSS file for date picker in Eclipse can be done by following a few simple steps. By creating separate files for the

I am using the following javascript and css styles: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jq ...

javascriptjqueryhtmlcsseclipse

Ways to merge multiple cells horizontally in a table right from the beginning

Is there a way to start the colspan from the second column (Name)? See image below for reference: https://i.stack.imgur.com/RvX92.png <table width="100%"> <thead style="background-color: lightgray;"> <tr> <td style="width ...

javascripthtmlcssangularjs

Ways to showcase a div exclusively on UC mini browser

I'm looking for help to create a script that will only display a div with the class "info-box" in UC Mini browser. This div should be hidden in all other browsers. Can someone assist me with this? <!doctype html> <html> <head> <m ...

javascriptjquerycssproxy

What is the best way to implement a gradual decrease in padding as the viewport resizes using JavaScript

My goal is to create a responsive design where the padding-left of my box gradually decreases as the website width changes. I want the decrease in padding to stop once it reaches 0. For instance, if the screen size changes by 1px, then the padding-left sh ...

javascriptcss

How can I align a mapped button to appear on the opposite side of the data using Tailwind CSS?

I've been struggling to find a straightforward solution to this issue for a while now. Let me break it down - I need to display some data on the left side of a post card component with a button located right next to it. Here's an illustration: ...

cssreactjsnext.jstailwind-cssshadcnui

Using the ng-show directive in AngularJS allows you to pass elements in

Web Development <li ng-show="sample($event)" TestLi</li> JavaScript Functionality $scope.sample = function($event){ //$event is undefined //perform some action } I have experimented with passing the HTML element using ng-click, but I am curio ...

htmlangularjseventselement

Utilize AJAX to showcase JSON data retrieved from a specified URL

We are striving to showcase the names listed in our JSON file within a div using JavaScript. Despite multiple attempts, we have not yet achieved success. JSON data: This is the approach we took: <button>fetch data</button> <div id="result ...

javascriptjqueryhtmlajaxjson

Exploring Angular 5 Localization

I am new to the concept of locales. I recently created an Angular 4 app that reads the locale from the browser using the navigator.language() API and provides it to Angular's pipes. However, with the changes in v5, I have some questions regarding migr ...

angularlocalization

Creating a dynamic return statement in typescript: A step-by-step guide

I am looking to dynamically set a return value to a variable based on values retrieved from an API. The current function in question uses static values: this.markDisabled = (date: NgbDate) => { return (this.calendar.getWeekday(date) !== 5 && ...

angulartypescript

Error encountered during npm installation - EPERM: Operation not allowed

Today's challenge began when attempting to run the angular4 project and encountering this error: npm install eperm operation not permitted. In an effort to resolve it, I decided to delete the node modules folder and try again. However, upon running np ...

node.jsangularnpmnpm-installnpm-start

What is the best way to make hover text that also copies when you highlight the main text?

Currently, I am utilizing a basic bootstrap tooltip for creating tables with jQuery. However, I require a specific functionality that the standard bootstrap tooltip does not provide. I need the ability to copy the base text and have it appear as "base tex ...

jqueryhtmlcssbootstrap-4

Developing a fresh Outlook email using a combination of javascript and vbscript

I have created a custom HTML page with fields and a button to fill out in order to generate a new Outlook mail item. To format the body of the email using HTML, I am utilizing VBScript to create the new mail item. <script> function generateEmail() { ...

javascriptjqueryhtmlvbscriptoutlook

Retrieve information for the designated page exclusively

When retrieving data from the backend using a service, I encounter an issue where the system may slow down if 2000 records are returned in one request. To address this, I would like to display only 10 records per page and fetch the next 10 records with eac ...

angulartypescript

Using PHP with Slim PHP Framework to dynamically include CSS files in the header of a document

I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...

phphtmlcssdynamicslim

Display dynamic HTML content within an iframe using jQuery Fancybox

Looking to incorporate dynamic content from the server using ajax into a fancybox (iframe)? Check out this method that allows you to display the entire html page: index.html <html> <head> <link href="css/fancybox/jquery.fancybo ...

jqueryhtmlajaxfancybox

Including a hyperlink in VUE Bootstrap for seamless user navigation

Why does this always drive me crazy? I'm determined to include an external link () and an image(enter image description here) on my portfolio page within the title of the project. main.js { id: 18, url: 'single-portfolio. ...

javascripthtmltwitter-bootstrapvue.jsfrontend

Update ngModel value following the PUT request response

I currently have a variable named dummy_value and I would like to update it using an input box. <p>{{dummy_value}}</p> <input [(ngModel)]="dummy_value" /> Upon making this change, the dummy_value updates instantly due to the two-way bin ...

angulartypescript

Troubleshooting: Navbar dropdown menu in AngularJS gets hidden within UI layout

After spending some time trying to understand why the NavBar drop-down is getting overlapped inside the ui-layout, I realize that I must be overlooking some basic steps. This issue seems so simple, yet it is eluding me. To see the details of the problem, ...

cssangularjstwitter-bootstrap

Side by side CSS list item with before element

Currently, I am working on displaying a list of 3 items where the list item number is larger than the actual text. I have been successful in achieving this part, but now my goal is to place them side by side. This is the code snippet I have implemented: ...

htmlcss