I am new to Ionic and have the problem that in the whole project my buttons are not displayed correctly. They are always displayed white with shadows. If you click on them or move the cursor over them on your PC, they will be displayed normally.
Block buttons, outlined buttons don’t work either.
<ion-content>
<button ion-item>Save</button>
<button ion-button>Save</button>
</ion-content>
Hum, I do know that this:
<button ion-item>Save</button>
should be within <ion-list>
Do you have any custom css that is being applied?
use the ion-button tag:
<ion-button>Save</ion-button>
that does not work, I get an error ion-button is not a known element.
I think it works only with ionic 4.
No css code was added by me, the bug is not dependent on the project. I have the same problem when I create a new project.
could you add some color to the button just to see if that works. like this.
<button ion-button color="danger">Save</button>
I already tried but it doesn’t affect the button. It changes the color but you can only see if you klick on it.
I would suggest using Chrome’s Dev Tools to inspect the CSS chain. Here is what a default ionic button resolves down to in HTML. As you can see several CSS classes are applied to different elements.
<button ion-button="" class="button button-md button-default button-default-md" style="transition: none 0s ease 0s;"><span class="button-inner">Default</span><div class="button-effect"></div></button>```Hello,
maybe it helps if you post your complete html.
Best reagrds, anna-liebt
Hi,
Dear please refer given link,It will work properly.
Thank you!.
My button looks like:
<button color="primary" ion-button="" class="disable-hover button button-md button-default button-default-md button-md-primary" ng-reflect-color="primary"><span class="button-inner">Default</span><div class="button-effect"></div></button>
If you notice, he has an issue with version 3, not version 4.
Where is the disable-hover css class coming from? Also what browser are you testing in?
Hi,thank you for your response.but we have only ionic 4 document so I refer those link.button coding is same.
Thank you! If you got solution please tick solution button bcoz users can be understand which is solution.
I really have no idea where it comes from or how to remove it if I want to use the ionic buttons.
I’m testing it in Google Chrome.
Try viewing your app in Firefox. Do you have any extensions installed in Chrome? Maybe a conflict?
what does the rest of the template look like?
The extensions do not effect the button because testing in Firefox did not work too.
This is what the body looks like
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app class="app-root app-root-md md platform-core enable-hover" ng-version="5.2.11">
<div app-viewport=""></div>
<ng-component class="app-root">
<ion-menu id="patient" role="navigation" side="left" type="overlay" class="menu-enabled"
ng-reflect-content="[object Object]" ng-reflect-id="patient">
<div class="menu-inner">
<ion-header class="header header-md">
<ion-toolbar class="toolbar toolbar-md">
<div class="toolbar-background toolbar-background-md" ng-reflect-klass="toolbar-background"
ng-reflect-ng-class="toolbar-background-md"></div>
<div class="toolbar-content toolbar-content-md" ng-reflect-klass="toolbar-content"
ng-reflect-ng-class="toolbar-content-md">
<ion-title class="title title-md">
<div class="toolbar-title toolbar-title-md" ng-reflect-klass="toolbar-title"
ng-reflect-ng-class="toolbar-title-md">Menu</div>
</ion-title>
</div>
</ion-toolbar>
</ion-header>
<ion-content class="content content-md">
<div class="fixed-content"></div>
<div class="scroll-content">
<ion-list class="list list-md">
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button class="item item-block item-md" ion-item="" menuclose="" ng-reflect-menu-close="">
<div class="item-inner">
<div class="input-wrapper">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<ion-label class="label label-md">
Working Patient
</ion-label>
</div>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div>
<div class="button-effect"></div>
</button><button class="item item-block item-md" ion-item="" menuclose="" ng-reflect-menu-close="">
<div class="item-inner">
<div class="input-wrapper">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<ion-label class="label label-md">
Settings
</ion-label>
</div>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div>
<div class="button-effect"></div>
</button>
</ion-list>
</div>
</ion-content>
</div>
<ion-backdrop disable-activated="" role="presentation" tappable=""></ion-backdrop>
</ion-menu>
<ion-menu id="carer" role="navigation" side="left" type="overlay" ng-reflect-content="[object Object]"
ng-reflect-id="carer">
<div class="menu-inner">
<ion-header class="header header-md">
<ion-toolbar class="toolbar toolbar-md">
<div class="toolbar-background toolbar-background-md" ng-reflect-klass="toolbar-background"
ng-reflect-ng-class="toolbar-background-md"></div>
<div class="toolbar-content toolbar-content-md" ng-reflect-klass="toolbar-content"
ng-reflect-ng-class="toolbar-content-md">
<ion-title class="title title-md">
<div class="toolbar-title toolbar-title-md" ng-reflect-klass="toolbar-title"
ng-reflect-ng-class="toolbar-title-md">Menu</div>
</ion-title>
</div>
</ion-toolbar>
</ion-header>
<ion-content class="content content-md">
<div class="fixed-content"></div>
<div class="scroll-content">
<ion-list class="list list-md">
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}--><button class="item item-block item-md" ion-item="" menuclose="" ng-reflect-menu-close="">
<div class="item-inner">
<div class="input-wrapper">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<ion-label class="label label-md">
Map
</ion-label>
</div>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div>
<div class="button-effect"></div>
</button><button class="item item-block item-md" ion-item="" menuclose="" ng-reflect-menu-close="">
<div class="item-inner">
<div class="input-wrapper">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<ion-label class="label label-md">
Settings
</ion-label>
</div>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div>
<div class="button-effect"></div>
</button>
</ion-list>
</div>
</ion-content>
</div>
<ion-backdrop disable-activated="" role="presentation" tappable=""></ion-backdrop>
</ion-menu>
<ion-nav swipebackenabled="false" class="menu-content menu-content-overlay" ng-reflect-swipe-back-enabled="false"
ng-reflect-root="function AddAppointmentPage(na">
<div nav-viewport=""></div>
<page-add-appointment class="ion-page show-page" style="z-index: 100;">
<ion-content class="content content-md">
<div class="fixed-content"></div>
<div class="scroll-content">
<button color="primary" ion-button="" ng-reflect-color="primary"
class="button button-md button-default button-default-md button-md-primary"><span
class="button-inner">Default</span>
<div class="button-effect"
style="transform: translate3d(708px, -107px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 510ms ease 0s, opacity 357ms ease 153ms;">
</div>
</button>
</div>
</ion-content>
</page-add-appointment>
<div class="nav-decor"></div>
</ion-nav>
</ng-component>
<div overlay-portal="" ng-reflect-_overlay-portal=""></div>
<div overlay-portal="" ng-reflect-_overlay-portal=""></div>
<div class="loading-portal" overlay-portal="" ng-reflect-_overlay-portal=""></div>
<div class="toast-portal" ng-reflect-_overlay-portal="10000"></div>
<div class="click-block click-block-enabled"></div>
</ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
<!-- Ionic Dev Server: Injected LiveReload Script -->
<script src="//localhost:35729/livereload.js?snipver=1" async="" defer=""></script>
</body>
My md-button class is:
.button-md {
border-radius: 2px;
overflow: hidden;
height: 3.6rem;
font-size: 1.4rem;
font-weight: 500;
text-transform: uppercase;
color: #fff;
background-color: #488aff;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-webkit-transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1, -webkit-box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
margin: 0.4rem 0.2rem;
padding: 0 1.1em;
}
show us your code html , not the console html output