grid header will be hide in p-dialog during minimize the browser - html

Go to this primeng dialog box article
See this below image when I open the dialog box
But the problem is grid header will be hide during minimize the browser
I am using the dialog box all over into my application. My project is going to live at this weekend. But I should solve this before go to live. Could you please anyone fix this?

You need to override .ui-dialog { z-index: 1001;} inline z-index using !important as shown below:
.ui-dialog {
z-index: 9999!important;
}
This is because of id #layout-topbar z-index is bigger than ui-dialog so you need to override ui-dialog z-index using !important. hope this will help you.

Try this
body .ui-dialog {
z-index: 9999;}

Use baseZIndex property for DynamicDialog and set its value more than #layout-topbar value which is 9998
const ref = this.dialogService.open(CarsListDemo, {
header: 'Choose a Car',
width: '70%',
baseZIndex: 9999 //Base zIndex value to use in layering
});

Try this css
.ui-dynamicdialog {
height: 100%;
overflow: auto;
z-index: 100000;
transform: translateX(-50%) translateY(-50%);
opacity: 1;
margin: 30px 0;
}
Adjust css per your requirement. Calculate top and set it here

Resizing the browser window wont give optimal results for responsive view. I checked your page and css. Everything looks fine and there is no issue.
But, when you resize the browser, popup appears as if grid header is hidden under page header. Reason behind this is, grid popup is in fixed position, so it will calculate the total height of browser window and appears center to it.
Try viewing this using Toggle Device Toolbar(Ctrl+Shift+M) and your popup looks exactly at the center vertically and horizontally.
Below image for your reference.

Related

CSS - Restricting top property value to 0 on zoom for a dialog

In our UI, when we click on a link a dialog gets opened.
Now if trying to zoom ( Pressing ctrl and + ) on the page. Dialog starts getting truncated from top as it gets out of the browser's window and even not scrollable.
Cause
When we zoom in, css top property value keep on decreasing and when it gets negative then it keeps on truncating the top view of dialog.
Dialog CSS
It's inline CSS of the element.
element.style {
position: absolute;
height: auto;
width: 600px;
display: block;
top: 279px;
left: 661px;
z-index: 10002;
}
Possible solutions which I am avoiding
In parent's CSS class, add property top as top: 0px !important so that dialog element's top property wouldn't be able to override it.
Add polling concept and after every second keep on changing the top property of dialog element.
Use
top : 1rem;
It will automatically adjust.
When we zoom into our browser it behaves as different devices. For eg: If we zoom at level 175% the pixel width of our screen size is 732px .
Check
relation between zooming and pixel width
For more customized help please share your code snippet :)

Increase the size for mobile menu by dragging

I have a mobile menu for which I would like to increase the size of the menu by dragging it. Currently what I am doing is fixing it to a size of 50% of the screen. Below is how the menu looks.
The CSS, which I used to drag, doesn't work in this case.
.cbp-spmenu-bottom.cbp-spmenu-open {
bottom: 8%;
width: 100%;
/* height: 55%; */
background: black;
opacity: 1;
overflow-y: auto;
position: fixed;
resize: vertical;
}
What could I do, so that I could touch the top bar, and resize the menu?
Just make sure you dont set the position of the css to be fixed otherwise,you wont be able to drag.
position:fixed
Or you can set the position of the but what you can do is set it fixed after you resize and drag it as shown in this thread
Fiddle
Here is a website which might help you. If this is unable to help you, you could check this website which has information on everything you can ever know about coding.
EDIT:
You could try this sample code- <button onclick="myFunction(width:200%;height:200%)">Increase Size Of Menu</button>
I hope I helped you enough so you can be able to do what you want to do!
The problem with the resize property is that it is not supported by most mobile browsers. You can find more details here and here.
If you want mobile support a javascript solution would be your only choice.
You can try a library like interact.js which seems to work fine on mobile devices.

Linkedin Follow Button not showing properly in Firefox

I've set the Linkedin Follow button within a hidden element, so only when you hover an icon, the hidden element becomes visible and button is shown.
Problem is that in Firefox v35.0.1 the followers number is shown not on the same row, as if there is no enough space on the same row. Look at the photo:
When I'm expecting the source code it seems the iframe is being set width and height in the moment of becoming visible (on hover) and then (on blur) its width/height is set back to 0. In Chrome the iframe has a constant width/height, which doesn't change on hover.
I tried to set the iframe width with css, which didn't work because when I expected the code it turned out there is another iframe in the Linkedin iframe and the internal iframe has again wrong dimensions.
Any ideas?
UPDATE: when I set the wrapping element to be visible all is good, so this seems to cause the problem, but how can I fix it?
UPDATE 2: You can see the problem yourself: link (make sure open it in Firefox!)
EDIT: Someone edited my post removing Linkedin tag from it, but I truly believe that this is more their issue than Firefox's or CSS, as there is something within their javascript that adds the width/height to the button iframe and adds them wrong. Also in IE the same issue appears. I added the button twice - first time as it was and second time in a visible wrapper and it's obvious that in the visible wrapper all is OK, though in the hidden wrapper is broken.
UPDATE 3: I realized that the button iframe width is the same as its #body element's 'min-width: 57px', so if Linkedin team correct that min-width to let's say 120px this may solve this problem.
problem is here :
in firefox the loaded width are 2px in the element but in webkit(chrome and opera) are 106px.
the style is not making enough width to show elements in one line.
and here is answer :
.social-details {
width: 195px;
/* float: left; */
position: absolute;
left: -120px;
top: -7px;
background-color: white;
padding: 11px 10px 8px 10px;
z-index: -1;
border-radius: 5px;
visibility: hidden;
}
and
#social .social-linkedin:hover .social-details {
visibility: visible;
}
its allow the element load with 106px of width and it is hidden to users.

CSS: Dropdown menu gets hidden behind the content

Please take a look at this page
If you click on "Obesity Surgery", there is a drop down menu that is supposed to display. (It's using Twitter Bootstrap drop down menu).
I can confirm the menu is there, but it gets hidden behind the underlying content even though it has an absolute position with a high z-index.
Do you have any idea how to fix this?
Obviously the problem lies with the z-index. But the problem is actually all the way up to the top parent. The header element with banner class has z-index: 1. Setting it to a higher number fixes the problem.
.banner {
position: relative;
z-index: 10;
}
You should set the z-index:9999; of the menu element and its children to ensure that they are always on top.
You can play with the z-index of other elements to keep them above others on the page.
Check if the overflow setting is set to hidden, if it is remove the value.
.banner {
overflow: hidden // remove
}
The issue was actually due to the very top image (image of the clouds) being set with the position absolute and a high z-index. Thank you all for your help.
Try adding the following styles to class dropdown:
.dropdown {
position: fixed;
z-index: 9999;
}

conflict between positon:fixed and overflow:visible property in css

Here's the situation. I'm building a webpage where i position an image on the right side of the page. When I make the browser window smaller, i want horizontal scroll bars to appear, so i include overflow: visible property. I also want the image to be positioned fixed so that when the page is scrolled down the content in the middle along with the background scrolls but the image stays as it is. But I am not able to bring both features to my page.The two properties seem to conflict each other. Is there a way around it?
Your code is too little.The problem of the front with the example of code.
try img fixed:
img.fixed{
position: fixed;
right: 10px;
top: 10px;
width: 100px;
z-index: 55;
}
I think you need to use css concept called media types....
you can not achieve this using only position:fixed
add this css to your page
#media all and (max-width: 699px), (max-height: 500px){
.overflowDiv{
position:fixed;top:100px;height:100px;width:100px;
overflow:scroll;
}
change max-width and max-height according to your need
here is jsfiddle demo
Hope it'll help you.
Thank you