I have modal in which i have angular-material autocomplete. It's html is like this
<mat-form-field class="example-full-width dummy-input-field" floatLabel="never">
<input matInput class="custom-input" (blur)="getValue()" [matAutocomplete]="auto" [formControl]="stateCtrl">
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete" style="z-index: 2000;">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img class="example-option-img" aria-hidden [src]="state.flag" height="25">
<span>{{state.name}}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
But issue here is that my autocomplete results list is showing behind modal like this
You can see at the top left behind screen overlay there is a list showing. Basically this list is of material-autcomplete suggestion list. I have tried these css to change z-index of autocomplete
.md-autocomplete-suggestions-container {
z-index: 100000 !important;
}
.cdk-overlay-container {
z-index: 999999 !important;
}
But none of the solution is working. I am not using bootstrap moda. I am using npm simple-modal. How can i fix this issue?
in your scss or css file of component add below
/deep/ .cdk-overlay-container { z-index: 9999; }
We need to get the bootstrap's z-index dynamically and increment it with some arbitrary number and set to the time-picket something like below:
$(document).on('show.bs.modal', '.modal', function (event) {
const zIndex = 1045 + (10 * $('.modal:visible').length);
// this zIndex can be assigned to the time-picker
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
This will solve your problem, but I suggest to use only one UI lib for the design :)
Related
I'm using NgxAutocomPlace module in my Angular App, the following module work with google autocomplete API by generating .pac-container in which it shows autocomplete results.
The issue is that on mobile the dropdown goes above instead of below of the input and it's unusable for the final user, it looks like this:
And here is how's my code looks like:
<div class="container-indirizzo mb-3">
<label>Indirizzo di consegna</label>
<div class="inside-indirizzo">
<div class="indirizzo">
<input
*ngIf="addressOptions !== null"
type="text"
class="form-control"
required
placeholder="es. Via Disraeli"
formControlName="indirizzo"
ngxAutocomPlace
[options]="addressOptions"
(selectedPlace)="addressChange($event)"
/>
</div>
<div class="civico" *ngIf="isCivico">
<input type="text" class="form-control" formControlName="nciv" placeholder="N°" autofocus />
</div>
</div>
</div>
Is there a way to set the position of that dropdown under the <input>?
EDIT 1:
The issue happens on scroll or in mobile devices as the virtual keyboard is up, so the problem is the position set to pac-container when is triggered
EDIT 2:
I'm trying to do something like this on Address change and on scroll but even this doesn't have any effect:
const top = this.indirizzo.nativeElement.getBoundingClientRect().top ;
const pacContainer = document.querySelector('.pac-container') as HTMLElement;
if (pacContainer) {
console.log(window.scrollY + top + 60);
pacContainer.style.top = window.scrollY + top + 60;
}
Where indirizzo is Div where input is placed.
EDIT 3:
the .pac-container is generated under <body> so i think by forcing it be rendered under <div class="indirizzo"> will solve the issue...
EDIT 4:
SOLVED by setting top to pac-container to fixed position of X pixel from top of the screen to bottom of input, but still looking for a better solution.
(so as from top 0 to end of my input there are 465px i just set .pac-container top: 465px) but as on some screens that height could be lower (some mobile 450 some other 460 other 470) the dropdown is still drawn badly..
If you are using Angular material this will help
.pac-container {
z-index: 100000;
}
If you are using Bootstrap, this will help you.
::ng-deep .pac-container {
z-index: 100000;
}
Perhaps something like this when the elements have loaded could solve the problem.
const pacContainer = document.querySelector('.pac-container') as HTMLElement;
const body = document.body as HTMLElement;
const indirizzo = document.querySelector('.indirizzo') as HTMLElement;
const clone = pacContainer.cloneNode(true);
indirizzo.appendChild(clone);
body.removeChild(pacContainer);
.pac-container CSS should contain position: relative.
I also experienced such issue with bootstrap and angular material ui.
With these 2 cases, I used the following css.
html {
height: 100%;
min-height: 100%;
}
Try this:
/deep/ .pack-container{
z-index: 10000 !important;
position: fixed !important;
}
I'm having multiple forms in an expansion, and I was using this code, for a date picker,
<mat-form-field>
<input formControlName="date" matInput placeholder="Dátum" type="date">
</mat-form-field>
Which works totaly fine, the expansion doesn't hide it (have a look), but then I had start and end values for both date and time, so I switched to ngx material daterangepicker.
My only problem is that the expansion hides the daterangepicker (have a look), so the daterangepickers code looks like this:
<mat-form-field>
<input
matInput
ngxDaterangepickerMd
name="daterange"
placeholder="Choose date"
applyLabel="Okay"
startKey="start"
endKey="end"
firstMonthDayClass="first-day"
lastMonthDayClass="last-day"
emptyWeekRowClass="empty-week"
lastDayOfPreviousMonthClass="last-previous-day"
firstDayOfNextMonthClass="first-next-day"
[autoApply]="options.autoApply"
[linkedCalendars]="options.linkedCalendars"
[singleDatePicker]="options.singleDatePicker"
[showDropdowns]="true"
formControlName="date"
[showWeekNumbers]="options.showWeekNumbers"
[showCancel]="options.showCancel"
[showClearButton]="options.showClearButton"
[showISOWeekNumbers]="options.showISOWeekNumbers"
[customRangeDirection]="options.customRangeDirection"
[lockStartDate]="options.lockStartDate"
[closeOnAutoApply]="options.closeOnAutoApply"
[opens]="opens"
[drops]="drops"
[timePicker]="timePicker"
/>
</mat-form-field>
I have tried to give it a custom z-index, like:
.md-drppicker {
z-index: 9999;
}
ngx-daterangepicker-material {
z-index: 9999;
}
But that didnt solve the problem, tried messing with the display/position too, but I can't fix it.
Any idea what's wrong?
Edit: Here's a better picture for the daterange picker problem
You need to use the overflow attribute as there is no space for the calendar. I think it will resolve your issue.
.md-drppicker {
z-index: 9999;
overflow: auto; // also try overflow-y;
}
ngx-daterangepicker-material {
z-index: 9999;
overflow: auto; // also try overflow-y;
}
I would suggest you to attach a stackblitz instance if issue still persist.
I'm using version the ngx-daterangepicker-material 2.4.1 on Angular 6.1.10
The issue for us was with the use of MatInput and angular-split-ng6.
The css fix for our implementation was the following
.md-drppicker.drops-down-right.ltr.shown.double.show-ranges {
position: fixed;
}
After using the above our calendar rendered correctly over the neighboring layer and did not wrap the calendar when the area where it was launched from is smaller than the required width for displaying the calendars side by side.
I'm building my first React modal. The basic structure is now done but I want to have more padding in between the border and the contents. I thought this would be simple but I've tried several things and none work.
return (
<div className={classes.backDrop}>
<Modal
backdrop={'static'}
size='lg'
show={true}
centered={true}
style={classes.modalContainer}
data-testid='addFleetCustomerModal'
>
<div className='modalContainer'>
<ModalHeader>
</ModalHeader>
<Modal.Body>
<Modal.Title>
Add Customer
</Modal.Title>
<Form.Group>
<Form.Label className={classes.highlight}>Company Name*</Form.Label>
<Form.Control id='companyName' data-testid='companyName' type='text' placeholder='For example: ABC Corp.'
/>
</Form.Group>
<Form.Group>
<Form.Label>
<strong>NOTES</strong><br/>
Notes added here can only be viewed and edited by other team members.
</Form.Label>
<textarea className="form-control" id="companyNotes" rows="3"></textarea>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Row>
<a href='/#'>Cancel</a>
<Button variant='secondary' size='sm'> Next </Button>
</Row>
</Modal.Footer>
</div>
</Modal>
</div>
);
Any ideas on what CSS I should add (and where) to move the content of the modal inward a bit more?
add this to your css:
.modal-header,
.modal-body,
.modal-footer {
padding: 2rem; //change the padding as you want
}
this will change the padding but the with full width lines between sections.
See Working demo 1
you can also add the padding around the whole modal but this this won't make the lines full width:
.modal-content {
padding: 2rem;
}
See Working demo 2
My apologies, everyone. I must have been really tired yesterday afternoon when I posted this. Let me explain the solution:
The code I posted above is inside a functional component that is defined like this:
const AddCustomer = ({ classes }) => {
classes comes from the parent component, which is defined like this:
class UserMgmtPage extends React.Component {
In this parent component, the CSS styleSheet is injected into via react-jss code. I then pass does these same CSS classes into functional child component.
You'll notice this 2nd line, which was always working:
<div className={classes.backDrop}>
My failure was to use the same syntax. Thus the solution is this:
<div className={classes.modalContainer}>
Sorry for the trouble but I do appreciate everyone who tried to help!
if I set up a className for certain components like
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use
.Change:hover{
background-color: black; //or any other change on hover
}
nothing is overriden on the hover.
I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?
After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
Working DEMO
Choose any color semantic-ui provide for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button appears like:
You can add inverted props inside Button component that react semantic-ui provide
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
your component appears like:
On hover returns to basic style opposite of inverted
styled components usage with react semantic ui
I recommended you to use styled-components in order to override semantic-ui component style
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Next use your new styled component instead of semantic-ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.
.Change:hover {
background-color: black !importanant;
}
To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.
UPDATE:
Try to remove color='blue' from the template and check if will work with and without !important rule.
I have a ion-select with few options i gave a header using [selectOptions], is there a way to define a css so that i could able to set background-color to header, button alignment ,and add a icon to the header
<ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
<ion-option *ngFor="let day of Days;" [value]="day.val">{{day.name}}</ion-option>
</ion-select>
could someone help me
You can fix this easily now
Add to ion-select element:
[interfaceOptions]="{cssClass: 'my-class'}"
Add to css:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Yes, you can use cssClass in option like this:
// In your component
daysOptions = {
cssClass: 'my-class',
...,
}
Then in css you can do what you want eg:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Thank's to ionic docs: https://ionicframework.com/docs/api/components/alert/AlertController/#advanced
I needed a color selector couple of months ago but I couldn’t find any.
The only way to do this was using custom CSS. I tried adding CSS classes to ion-select and ion-option but the classes doesn’t get reflected in the generated output. So the only way to apply the custom CSS to ion-select and ion-options is by using the parent element and some JS.
You can check the logic in:
HTML:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.html
TS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.ts
SCSS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.scss