I am trying to implement a custom combobox dropdown using angular 4 in my web application.
I have used this custom combobox as one of the field in to list of line items using divs.
Here, I wanna open dropdown in last line item of list, but it exceeds the window screen.
How to make the full dropdown visible to user automatically while opening combobox at the bottom of the page?
<div style="height: 56px; margin-left: 7px; min-width:220px" [style.width]="columnsHeaderWidth.division">
<div style="width:180px; height: 56px; max-width:180px; cursor: pointer;">
<combo-box [id]="'division-'+user.uuid" [userOption]="true" [isSelected]="false"
[magicLabelHack]="'projectTypeLabel'"
[includeMagicLabel]="false"
bind-placeHolder="'Select division/group...'"
icon="wizard:chevrondown"
[source]="divisions" [selectedValue]="user.divisionId" (onSelected)="onChangeDivision($event,user,user.division.id)"
[isIconItemList]="true" [itemListWidth]="'230px'"
[changeStyle]="true"
(click)="rowClick(user)" (onFocusVisible)="tabFocus($event, user)">
</combo-box>
</div>
</div>
Snapshot:
Use a template variable with some vanilla JS calculation :
<div #div style="left: 500px;"></div>
<p *ngIf="div?.getBoundingClientRect().x + div?.getBoundingClientRect().width > totalWidth">
The div is out of bounds
</p>
Stackblitz (change the style.left of the div to see it work)
English is just enough broken so I can't decipher what is it that you exactly want, so I assumed that you wanna scroll to the bottom of that dropdown?
In the screenshot you posted I can see the page scroll bar being near the top, I presume that dropdown stretched the page vertically so the end of it is actually visible.
Under those two assumptions, the simplest vanilla solution is to target the last option in dropdown and scroll to it.
el.scrollIntoView() is a vanilla solution where el is the DOM element you are after.
Description of options available in the documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
if you have it in Angular4, you can get the DOM element via var el = ang4ele.nativeElement
It is hard to test this to make it bulletproof for your case before posting due to your code being incomplete (showing only the template part).
Related
I have a p-multiselect component from primeNg inside a div,at first the menu, when expanded, was being cut by the accordion. We solved the problem using appendTo="body" in the element. Now the values are shown correctly, the problem is that when i open the console or when i use a mobile device to open the web app the menu from the component moves to the right/left, but if i remove the appendTo this problem disappear. We tryed with z-index properties as alternative to appendTo but didn't work. How can i solve this?
We are using Angular 8.
EDIT: the first image is when the console is close, the second one is when the console is open (if you read above i wrote the exact opposite case, this is because at first we tried to solve this aligning the left margin, in these picture we are not aligning the margin).
Below i added the html code we used.
Try this one, I'm also facing this issue on p-dropdown via Angular10;
When you inspect to html. left position of the panel is a bit shift that cause by resizing of the screen.
The solution
style.scss - is one this a must, or you need ::ng-deep if you paste this class on other .scss file
.force-left {
left: 0 !important;
}
.component.ts
<p-multiselect
...
panelStyleClass="force-left"
...
></p-dropdown>
We found the solution 1 week later i posted this question. We solved this problem defining an attribute inside a div (the outermost) and, in the multiselect, we used appendTo with the attribute we defined in the outer div. This solved the problem.
I have a webpage with a simple navbar. The actual webpage can be seen here, and a CodePen demo can be seen here. In the CodePen demo, everything works fine. If I hover over a dropdown, the menu appears below. I can then seamlessly move my mouse down over that dropdown menu and select an option. In comparison, on the actual production website, things are not so smooth. The dropdown appears as expected, but as soon as I move my mouse down over the dropdown it disappears - it doesn't seem to register the hover event.
I've tried the following:
Setting z-index to be 1000 or 10000000 in the css for .dropdown
Doing step 1 with the added qualifier of !important;
In Chrome dev tools I tried giving other parts of the webpage lower z-index values, and it changed nothing
Notably, the drop-down is definitely hidden behind stuff. For example if I hover over Alumni, the options in the drop-down are occluded by the label of the website (in white font).
Is there some way other than messing with the z-index with which I can force my dropdown to register the hover event and work as expected? I am comfortable using Javascript, HTML, CSS, and any normal libraries such as Bootstrap or JQuery. Thanks!
EDIT: #lalitbhakuni's answer solved the problem for me. That said, it is possible that people who are dealing with the specifically identical circumstance to my own will run into this and wonder how to implement the CSS solution without access to the CSS for the entire web-page. Here is how I did it, in my banner code injection:
<script>
window.onload = function() {
var header = document.getElementById('header');
header.style.zIndex = 10;
};
</script>
Your header is overlapping your navbar. The y nav dropdown is not working as a result. To fix this, can, you can please define header z_index as follows:
.transparent-header #header {
z-index: 10;
}
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
I need to create a popup like the map has here on this page, but I'm not sure how best to do it and wondered if anyone could point me to some code would match that effect?
Any ideas would be great.
The Twitter Bootstrap modal jQuery plugin is really nice. You can get the html and javascript for it by customizing bootstrap here: http://twitter.github.io/bootstrap/customize.html
select only Modals from the components section and modals from the jQuery plugins section, and nothing else. Then download.
How to use it can be found here:
http://twitter.github.io/bootstrap/javascript.html#modals
basically what you do is in your markup, make a div that will be the popup, and give it the classes "modal hide fade". And then make something that will be the button to toggle the modal, and give it the attributes data-target="(the css selector of the modal div)" and data-toggle="modal".
To create a basic dialog/modal, you just need to create a new div or show an existing div with position: fixed and z-index: 1000 (or some other high value) using JavaScript. That div can have whatever contents you like. Along with the dialog/modal div, you would probably want a backdrop div as well, probably with at least the following styling:
position: fixed;
height: 100%;
width: 100%;
z-index: 500; // or some other high value
If you don't want to create your own, you could take a look at jQuery UI dialogs or bootstrap modals.
I have 03 frame (Header, Left_Menu and Content). In header frame I set a search input box. If anyone click on search input box then a blue color div show under the search input box but above content frame. But When I click search input box then blue color div box don’t show above content frame.
I want to create search input box as following example:
But my search input box result show as following example:
Please, anyone can help to solve this problem.
Nowadays <frame> is not recommended. You want to overflow your header onto the content.
This is only feasible, if you don't use frames. You should use for example a simple <div> HTML tag instead of the frames.
After that, you should add some CSS property, which results the desired effect. For example:
#header{
position: relative;
z-index: 2;
heigth: 100px;
}
You should add the z-index property.
You can read more about z-index here: Z-index - CSS