css problem with ion-select that has a button inside a shadow root. I need the default value --padding-top:10px,--padding-end:8px,--padding-bottom:10px,--padding-start:16px for this, but it is a first element and assumes the value applied as shown below.
below image contains color box which is ion-select and unable to control size of this box.code for ion-select is below. Can someone help me?
<ion-col size="2" style="padding:0">
<div class="colorselect color_{{color.slice(1,7)}}">
<ion-select >
<ion-select-option (ionSelect)="selectColor(optioncolor)" *ngFor="let optioncolor of colors" [value]="optioncolor" >{{optioncolor}}
</ion-select-option>
</ion-select>
</div>
</ion-col>
Try this one.Its works for me
ion-select{
--padding-top:12px !important;
--padding-end:12px !important;
--padding-bottom:12px !important;
--padding-start:20px !important;
}
Try this package for shadow-dom elements. Works perfectly fine.
Search for Shadow-DOM-inject-styles on NPM. It let's you style shadow elements
Related
I'm having a strange problem with Internet Explorer 11. Here I use a button toggle group in vertical direction and if the user clicks one one of the buttons in the group, the height changes a little bit (of the clicked button). The example code is based on this source:
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" vertical>
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
One button is rendered as:
<mat-button-toggle tabindex="-1" class="mat-button-toggle mat-button-toggle-appearance-standard mat-button-toggle-checked" id="mat-button-toggle-1" ng-reflect-value="bold" value="bold" _ngcontent-yuh-c0="">
<button name="fontStyle" tabindex="0" class="mat-button-toggle-button" id="mat-button-toggle-1-button" aria-pressed="true" type="button">
<div class="mat-button-toggle-label-content">Bold</div>
</button>
<div class="mat-button-toggle-focus-overlay"/>
<div class="mat-button-toggle-ripple mat-ripple" matRipple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"/>
</mat-button-toggle>
If I look into the CSS mat-button-toggle-focus-overlay and mat-button-toggle-ripple mat-ripple get a height of 52px instead of 48px. This increases the size of the parent element too.
I can disable the font-family attribute of .mat-button-toggle and on enabling it again the elements get back to their original sizes (48px).
What could be the reason for the change in height of the clicked button and is there anything I could do? This is only happening on IE.
This sounds to me like an issue caused by whitespace between the tags of the clicked button. Try removing all whitespace between tags and see if that removes the extra 4px. If that is the issue you may be able to solve it by using display:block.
Put this into your styles.css:
.mat-button-toggle-button { display: block; }
I've started a blank project with Ionic 3 and the default style is not applying to the buttons.
I'm using a default button with
<button ion-button>Prueba</button>
But I get this
Am I missing something?
UPDATE
Using
<ion-button block color="primary">Acceder</ion-button>
Fix the problem but I notice that is not using full width in the div than contains the button
<div padding>
<ion-button block color="primary">Acceder</ion-button>
</div>
Not sure where is the problem
I have three buttons. Two of them have changed background color by ngClass. When I hover one of the changed buttons, its background color changes back to default. How do I prevent this behavior?
My problem in images:
No hover image below:
Top left image hovered below:
First, you need add an class to your button
<button ion-button class="my-button">AS</button>
Then, you can set a color for your button hover in CSS:
.my-button:hover{
background-color: orange !important;
}
You could also work with Ionic Sass Variables.
For your case, it would suffice to overwrite the three variables:
$button-ios-background-color-hover: your_color;
$button-wp-background-color-hover: your_color;
$button-md-background-color-hover: your_color;
In the file "theme/variables.scss"
use !important keyword it will work
for example
<button type="submit" class="btn2" (click)="openTabs()" ion-button block>U0
-2-4 Rue du Nord</button>
// css code is here //
.btn2:hover{
background: #538455 !important;
}
Running ionic-angular version 3.9.2, I was able to disable the button hover using ionic class disable-hover
I have images stored in Google Cloud Storage and used in an Ionic / Angular app. The images are shown as a background of a div element. They're mostly showing ok but in some cases, the image is missing. And it's consistently specific images that are missing - not others - no matter how many times the pages are reloaded.
Right-clicking on the background image to get the background URL and then pasting that URL in the browser results in the image displaying fine.
The scss code contains the basics styling of the image and the background image URL is added inline within the HTML file.
item.scss
offer {
.card-image{
background-color:lightgray;
background-position:center;
background-size:cover;
height:10rem;
width:100%;
}
}
item.html
<ion-card>
<div class="card-image" [ngStyle]="{ 'background-image' : 'url(' + offer?.imageUrl + ')' }">
</div>
<ion-item text-wrap>
<h2 text-wrap>{{ offer?.name }}</h2>
<p>{{ offer?.provider }}</p>
</ion-item>
<!--
<ion-item>
<span item-left>18 min</span>
<span item-left>(2.6 mi)</span>
<button ion-button icon-left clear item-end>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
-->
</ion-card>
And here's what it looks like rendered with the middle item's image absent...
Ok, I think I see the problem. After a bit of head-scratching, it turns out that there was some error with escaping the URL of the background image. So any image with a space in its name was absent.
Solution: change the file names to avoid spaces or escape URL's. It's now working as expected!
I am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.
The first method I am using is:
<span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis
Seen: Broken Stacked Icon
That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.
I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:
<i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis
Seen: Inline icons
I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).
When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.
It this something that is possible? Or am I pushing the limits of how stacked icons should be used?
Here you go..
<a href="http://google.com">
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
link text
<br/>
</a>
Span set to inline-block to ensure that the icon stays in place
body {
color:#00000;
}
a {
text-decoration:none;
color:inherit;
display:block;
}
span.icon-stack {
display:inline-block;
}
Demo: http://jsfiddle.net/aB4nU/1/
This is fixed in 3.2.1-wip branch. Or you can wait for the release tomorrow. :)