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;
}
Related
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 :)
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!
i have this search bar in my application which i want to modify:
Right now the "X"-Icon is visible from the beginning even tho it does nothing before an input was done, so i want to make it appear AFTER the user starts entering text.
The icon is a SVG i added and styled seperatly.
I don't realy know how i can do this, i thought its easy and i can just use something like "::after" but it seems that this it not possible with input fields.
Ps.: im an absolute beginner in CSS so please have mercy.
Best way to achieve your requirement would be to have different classes which shows/hides the icon by checking when input is not empty in JS.
If you want to achieve without using JS you can target the adjacent button element when the input is focussed and add ::before pseudo element and style it.
input:focus+button:before {
content: "X";
position: absolute;
left: 0;
color: red;
}
It's not possible with CSS. You would have to use Javascript.
Javascript
// set the id of the x button to x-button
// set the id of the input field to input
var x_button = document.getElementById("x-button");
var input = document.getElementById("search-input");
input.oninput = function(){
if(this.value) x_button.classList.add("visible");
else x_button.classList.remove("visible");
}
CSS
.x-button { display:none;}
.visible {display:block;}
it is possible if you wanna do it using only css.
#Search{
font-size:22px;
color:green;
background-image:url('images/search.jpg');
background-repeat:no-repeat;
background-position:center;outline:0;
}
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
<input id="Search" name="Search" type="search" placeholder="Search" />
I've several issues with the md-icon directive (from angular-material).
Here is the code which shows my problems : http://codepen.io/anon/pen/bpWNWr
Here is the important part of the HTML :
<div ng-controller="MyController">
<div layout="row">
<span class="noselect" ng-repeat="rates in rating track by $index" >
<md-icon class="stars noselect" >
{{rates.icon}}
</md-icon>
</span>
{{rate}}
</div>
</div>
the css
.stars {
font-size: 36px !important;
margin-right: 12px;
}
.noselect {
outline: none;
}
and the js :
var myApp = angular.module('MyApp', ['ngMaterial']);
myApp.controller('MyController', function($scope) {
$scope.rating = [];
$scope.rating.push({icon: "star"});
$scope.rating.push({icon: "star"});
$scope.rating.push({icon: "star_half"});
$scope.rating.push({icon: "star_border"});
$scope.rating.push({icon: "star_border"});
$scope.rate = 2.5;
});
So in this code, some problems :
Why have I to set the size of the icon with !important and set the margin manually after ? Is there a solution to set the margin automatically depending of the size of the icon ?
How can an align my text with the icons ?
Thanks in advance
There are some things I need to clear. For your 1st question you don't need to use !important and if you want a specify margin then only use specify margin in that way otherwise use layout-margin attribute on container or for padding use layout-padding. Now the offical documentation says that we can use font-icon of size 24px 32px 40px 48px by using md-24 md-32 md-40 and md-48 calls with the help of material-icons this class. But in reality I am not able to use it so you have to manually specify in your css file. There is an issue I found on GitHub too.So in the below link I defined those class with the example.
Now to align you elements you can use layout-align="start center it will align all elements in center in vertical direction. Cheke the offical doc for other cool options. So just check the below link and let me know if anything is missing.
http://codepen.io/next1/pen/GZmJRM
One thing to remember as since you are using material-design all your dimentations should be a multiple of 8. So if possible try not to use 36px kind of value.
I have two instances of where the Like Button is not "listening" to the width I specify in the XFBML code.
It LOOKS fine, but something is mysteriously causing the like button to be extra wide and force the browser to do horizontal page scrolling even though the entire like button is within the page.
Example:
[EXAMPLE REMOVED] - see the sidebar. I have to set the entire BODY to ignore overflow-x. If not, the like button causes a ton of extra pixels out there (but I can't see them with Firebug). I know this is the problem because if I remove it, then it looks fine.
Example 2:
Screenshot of Example - In the header, I had to move the margin over so far to the left, and I wanted it to be in the top-right corner. Play with the CSS for fbheader in firebug and you'll see.
The code I'm using there:
<div class="fbheader">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
<fb:like href="http://www.example.com" send="true" width="300" show_faces="false" font="arial" colorscheme="dark"></fb:like>
</div> <!--// End fbheader -->
Any ideas why this is happening?? Can anyone help? It seems like a bug with the XFBML.
I had the same problem, but none of the suggestions above worked for me.
I found another solutions that did work, see http://britishinside.com/archive/2011/07/07/Facebook-Like-Button-Bug.aspx
Simply include this in your stylesheet:
#fb-root > div { left:0 }
It's a bug with facebook. Why don't you just update your fbheader class as follows:
.fbheader {
overflow:hidden;
}
That should solve your issue ..
Good luck..
I had the same problem. I found the problem was to do with a bug in Facebook's reset div. I fixed it like this:
#fb_like .fb_reset {
/* fix for Facebook bug which causes horizontal scrollbars in browser */
display: none;
}
I fixed the issue using #fb-root { display: none; }
You could try alter the width of fbheader class in css file, or even better, the parent element.
Sometimes when we use internal elements that cause the parent to get wider, the horizontal scroll get visible.
Another tip is to reposition the button, or set the margins and padding narrow.
My solution is to apply this to the parent container:
.my-parent-wrapper {
display: inline-block;
overflow: hidden;
}
skipping overflow rule will work too
I've just had the same problem, using an iFrame script from facebook for a double "share" and "like" button. I hadn't specified a width in pixels. Fixed it by getting a replacement script, but this type specifying a width of 120 pixels in the box provided.