Ionic Button, when disabled appears like it have two background colors in IOS.
I am using ionic button with disabled property like this
<ion-button expand="full" type="submit" [disabled]="!loginForm.valid (click)="login()">Login</ion-button>
Here is how it looks when -
Form is Invalid
Form is valid
On inspecting i found, it’s the COMPUTED padding-inline-start: 16px; and padding-inline-end: 16px; that is causing this kind of background;
I am not using any extra css styling on the button. And this kind of background is visible only when you build the app for ios and run it into simulator or device.
So, How to remove that padding ?
I would recommend to use ngClass combined with a css class:
[ngClass]="!loginForm.valid? 'no-start-end-padding'".
In the css class add !important to overwrite the 16px start and end padding values.
.no-start-end-padding {
padding-inline-start: 16px !important;
padding-inline-end: 16px !important;
}
Related
See the Example image
I am using the primeng component in my application it has css class p-component. Whenever I click on any field whether it is button or input or any other field It got highlited with blue color border. I don't need that So I tried to use outline:none but it doesn't work out.
Apply the following CSS to remove auto highlited blue color
input:focus {
box-shadow: none !important;
}
It'd be good if you can post your code so that we can get a 100% correct answer to you. However, looking at PrimeNG's website it seems as though the .p-inputtext:enabled:focus selector is setting the following
box-shadow: 0 0 0 0.2rem #BFDBFE;
border-color: #3B82F6;
So add a rule to your own css below the linked PrimeNG css file with the following rule
.p-inputtext:enabled:focus {
box-shadow: none;
border-color: initial;
}
I can check this for you if you post up your code, though.
Note this is not because the css is incorrect or because Safari doesn't support these rules, its not that type of problem. I can uncheck and check the rule in the inspector and it works.
Im using Vue with sass for my website. The css works fine on every other browser, but on safari, theres a few instances where some seemingly random css rules are not taking effect.
The first example is this button, that gets enabled when the input is checked.
The button currently has the disabled class
When I check it, it removes the disabled class, meaning the background-color will be green and the font color white, this is the result
As you can see the background-color changed, but the font remained black. even though it has been updated in the inspector. In the inspector if i check the color property off and on, it will update and be correct.
Im applying these styles in the standard sass way shown below
button {
border-radius: 4px;
cursor: pointer;
font-size: 16px;
padding: 8px 12px;
font-weight: bolder;
display: flex;
justify-content: center;
align-items: center;
background-color: $secondary-color;
border: 1px solid $med-light-grey;
color: $black;
&.disabled {
pointer-events: none;
cursor: not-allowed;
background-color: $light-grey;
border-color: $med-light-grey;
color: $off-black;
}
}
I apply it to the button like this
<button v-if="!loading" #click="initalise()" class="submit" :class="{ disabled: !agreed }">Start</button>
The class does apply and remove correctly in the inspector and the color updates on every other browser
Im on Safari Version 14.1, on a new private browser, no cache, storage or anything. I dont know what could be causing this.
Here is another example where it happens
The content class stretches to 100%. But when i resize the window, making it a little bigger, the div doesnt stretch with it, so theres a gap. The background stretches as it should, and the header above it too. If i just uncheck and check the display: grid rule, everything works as it should and I can resize freely and the div will follow.
Im not sure if this is a browser issue, or the way my website is built, here are the versions that im using
"node-sass": "^5.0.0",
"sass-loader": "^10.2.0",
"vue": "^2.6.14"
Any help would be appreciated
Going to answer my own question, this was the problem for the button
pointer-events: none;
the pointer events property seems to be bugged on Safari and it will stop the DOM updating the color rule. I have found this codepen that replicates the problem and will fix when removing it.
Im guessing the 2nd example I showed is doing the same sort of thing with another property, but its a problem on Safaris end, so for that I will just restructure the html and css.
[codepen][1]
I currently have a global blue theme (saga-blue). I managed to change the text and bottom border color (to match the desired brand colors) by using simple css.
However, when a menu item is first selected, it gets this ugly blue-colored border behind it, as such:
https://imgur.com/SYF7xmJ
No matter what CSS I try, I can't manage to remove it. I can't find where it comes from when I inspect the element. Also, it gets removed as soon as I click anywhere else on the screen: it is just there for the first click on the item, goes away after any other click.
CSS that I have tried:
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
I also tried unsetting any property that had to do with 'left' or 'right' on the menuitem and menulink components - but the ugly blue border just keeps on showing. If anyone has any idea what kind of property this might be, I would really appreciate it.
If your style is not applied and you want to override the primeng default styling, you may need to use :host ::ng-deep.
Another way of applying style to a PrimeNG component nested element, is to use the styleClass template property. It is not everytime efficient, you need to sometime force the css through the !important priority modifier. It is not the cleanest way, but there is few CSS properties that are inlined by calculation on some component.
For your specific problem, the .p-tabmenu (and subclasses) is playing with a mixin of focus, when the element is in focus state.
#mixin focused() {
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $focusShadow;
}
You need to play with the property box-shadow to remove/modify this blurred color that you dislike with the advices I gave you on the primeng styling if it is not applied as you wished.
Don't forget the pseudo-class :focus while overriding the style.
You may have this kind of result to remove it completely.
:host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:focus {
box-shadow: none;
}
Try outline: 0 this is something that defaults browsers do for accesibility mainly.
I have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.
Here is the CSS:
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}
I've looked at the Chrome styles panel and confirmed the font / padding is being used (it's not strikken through).
Here is what it looks like:
Looks like the issue is because:
You aren't using a CSS reset.
The line-height needs to be the same.
Make sure you give a consistent line-height to both. For now, set in the both:
line-height: 1.5;
This should fix it. Also, you can compare both the styles with the computed ones, to check if there's anything else being set. Since you say <button>, it might also have some border.
Also, like I guessed, you are also giving border and same colour as background to the button, making it look 2px bigger.
When you open the Developer Tools, try comparing the Computed Styles part:
To avoid this kind of stuff I always set the font family I used.
Take a look at this example: https://fiddle.jshell.net/tnr0jxka/
You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.
Buttons do not inherit the global styling automatically.
So, setting font-size of button explicitly will solve the problem
see this solution for more info
There are buttons on my website that look overly skinny in Chrome compared to Firefox. The button's HTML looks like: <button name="shutdown" type="submit" value="df" class="boton"> Press </button>
My CSS attempt looks like:
.boton {
font-size: 17px;
color: #000;
background: #ee3333;
background: rgba(225, 50, 50, 0.6) !important;
font-family: lucida console;
border: 1px solid #FF4444;
padding: 2px;
-moz-border-radius: 7px;
border-radius: 7px;
cursor:pointer;
}
.chrome .boton
{
padding: 5px !important;
}
I'm not sure if I'm doing this right. ".boton" does indeed change the style of the button, but the padding doesn't change in Chrome. What's wrong here?
The reason that the padding isn't applying to the element is due to the fact that there is no chrome class assigned to any element. There are various hacks around certain Vendor-Specific styles, see this article, but no browser applies a class of .chrome or .moz or anything like that.
However, to achieve more "horizontal" padding, you can use the -webkit-padding-start(padding-left) and the -webkit-padding-end(padding-right). Currently I do not believe there is full padding, or vertical padding for these yet. Be sure when using these to write the -webkit-padding-start, or whichever rule you use, after your padding rule. Otherwise the latter will overwrite the former and both will be lost.
Unless you've also added some browser sniffing that adds the class .chrome etc. to the body that class has no effect.
On the other hand the box model of Firefox and Chrome is not radically different, but the defaults for padding, border, margins etc. may be different. Just explicitly set those values and they should most likely render the same (give or take a few pixels because of different rounding errors). You should not need to add custom css for each browser (but if you use experimental css features like -moz-border-radius and -webkit-border-radius with vendor prefixes you should use all of them in at the same time; the others will ignore the unknown properties).
The different versions of IE (Internet Explorer) do have a radically different box models, and if you cannot get some version of IE to render something correctly with the standard css you should use conditional comments to include IE specific css overrides after the main css file.