I am trying to adjust the size of the time columns/buttons in the new IONIC 6 timepicker:
The generated HTML/css is as follows:
It should be as simple as setting the min-width property on the ion-picker-column-internal, or by setting the width of the picker-item class, however, none of my styles are being applied.
Ex.
ion-picker-column-internal {
min-width: 50px !important;
}
Any ideas?
Related
When using the following css selector on a toolbar to require a minimum bottom margin, it causes the toolbar height to be 0 on Chrome 59:
.toolbar {
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
}
I tried the following, hoping Chrome 59 would only use the first height definition:
height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
But Chrome 59 still uses only the second height definition which results in 0 height.
The following also doesn't work:
#supports(height: max(0px)) {
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
}
It still tries to apply the height, and causes 0 height.
Is there a backwards compatible way to achieve this height? It would be fine if Chrome 59 simply ignored the height and inherit it from somewhere else, as long as it doesn't cause a 0 height.
The following approach works:
&.supports-css-math {
height: calc(var(--f7-toolbar-height) + max(var(--f7-safe-area-bottom), 10px));
}
And then in javascript, that supports-css-math class needs to be added. If using react or vue, it can be added in the component's template.
Another approach that might be better, but haven't tried yet, would be to add the supports-css-math at the top of the dom, and then define a css variable based on the selector, e.g., --min-toolbar-bottom, which can later be used in the toolbar component.
I'm wondering, how to give ngx-gallery (https://github.com/MurhafSousli/ngx-gallery) a new height. It has a fixed value of 500px and changing the parent divs height is not changing anything.
I was looking either for some attribute in the template like this
<gallery
[height] = '250px'>
</gallery>
Stackblitz: https://stackblitz.com/edit/angular-osh1vu
Followup-question: In the Stackblitz, the behaviour is fit-height (regarding the black background) and in my application it is fit-width, so the black stripes are above and under the image. How can i change this too?
(which was possible on older? version , but is no more a valid attribute)
or
some css code (looking in the dev tools, the sliding images are labeled div.g-template.g-item-template), which is also not possible to overwrite:
div.g-template.g-item-template {
height: 200px !important;
}
Demo add class to galery element
<div class="basic-container">
<h2>Gallery component</h2>
<gallery class="custom"
[items]="items"
[dots]=true
[thumb]=false
[loop]=false
[playerInterval] = 5000
[autoPlay]=true
[loadingStrategy]=preload>
</gallery>
</div>
in css change
.custom{
height:200px;
}
I want to have 2 form input fields in one row:
1. the first has a fixed with,
1. the second should grow and shrink, but this does not shrink below 180px.
Here is a full stack-blitz example
When you start the app, we see this
There maybe another issue:
I think the 2nd input field should already show the hint text and the horizontal line - but it will only show it when it get's the focus.
Is this the expected behaviour or am I missing something?
Anyway. The main issue is that the 2nd field does not shrink as expected. It will not shrink below 180px:
In the chrome dev-tool I can see that the input element is wrapped with a div class="mat-form-field-infix"> and the class mat-form-field-infix has a fixed width of 180px!
The only workaround that I came up with is to override this width with using ::ng-deep.
You can activate this in the co-input-field.component.scss file of the Stackblitz example
:host ::ng-deep .mat-form-field-infix {
// width: auto !important;
width: unset !important;
}
With this workaround the 2nd input shrinks as expected:
But ::ng-deep is deprecated and will be removed.
So what is the right way to make the input shrink as expected?
since .mat-form-field-infix has a fixed width of 180px there is no way of making form field shrink beyond 180px. inevitably .mat-form-field-infix must be overridden.
you can achive the same result with ::ng-deep in a couple of ways;
1.disable view encapsulation for that particular component. However, this approach has a huge drawback that all the styles in your component becomes global so they need to be managed carefully.
#Component({
selector: 'app-co-input-field',
templateUrl: './co-input-field.component.html',
styleUrls: ['./co-input-field.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CoInputFieldComponent {}
and then in co-input-field.component.scss you do the following
app-co-input-field {
.mat-form-field-infix {
width: auto !important;
}
// all other component styles goes in here
// in order to keep them isolated from global scope
}
2.don't disable view encapsulation. use the element selector of parent component in global styles.
put the following in styles.scss
app-co-input-field {
.mat-form-field-infix {
width: auto !important;
}
// co-input-field.component.scss still can be used for encapsulated styles
}
3.don't disable view encapsulation. define a global rule for this particular situation.
put the following in styles.scss
.shrinking-mat-form-field {
.mat-form-field-infix {
width: auto !important;
}
}
and apply the .shrinking-mat-form-field class to corresponding element
<mat-form-field style="width: 100%" class="shrinking-mat-form-field">
<input matInput placeholder="placeholder" />
<mat-hint align="end">hint text</mat-hint>
</mat-form-field>
Even though second and third approaches are fundamentally same I personally prefer the third approach in order to make it readable, keep it consistent over the project, have minimal side effects and manage them from a single point.
:host ::ng-deep.mat-form-field-appearance-legacy .mat-form-field-infix {
padding: 0.4375em 0;
display: flex;
}
I'm attempting to fix the way my modal works when presented.
When the screen size is large it has a translucent backdrop due to the min-height css. I don't mind that min height, I just want it all to be white.
It is created normally then presented:
this.modalCtrl.create({
component: AddCommentPage,
componentProps: { id: this.place.id }
}).then((element) => element.present());
Here is a view when the screen is large:
And when it is small (should be full screen):
I fixed it by adding the following code into my .scss file:
.modal-wrapper {
background-color: white;
}
Hi I want to do a fixed size page, but don't want the page to break or reflow at all if the user resizes the window. Is this a javascript function?
sample: http://www.neimanmarcus.com/
Most people put all the content of there page inside a div with an id, such as 'doc', then they would apply the following rule:
<body><div id="doc">
YOUR PAGE HERE
</div></body>
body {
test-align: center;
}
#doc {
margin: 0 auto;
text-align: left;
width: 940px
}
The "text-align" fixes an IE 6 issue, really you just need to assign a margin to your wrapping document div.
it doesn't need java script function .
but remember : don't use % for declaring width or height for elements in css.(for having a static element that resizing window doesn't effect that).
for example : "width:90%;" ==> replace this with "width:100px;"