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.
Related
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.
Fixed menu is not working in mobile or responsive
I have a floating menu on the website site, it is working perfectly on desktop sized window, but when i resize the window to mobile size, the menu isn't floating anymore, and only became part of the page. I am almost certain that it has something to do with my other elements that are fixed or relative in position, but couldn't find the culprit.
It is the blue menu on the right side.
The floating menu is made with a plugin called "sticky side buttons", I have reached out for help but no response yet, so I thought I would try asking here.
URL: http://umassfd.org
Thanks!
Can you try this?
#newBridge .nb-icon-wrap {
position: fixed;
box-sizing: border-box;
min-height: 77px;
min-width: 146px;
}
I have an image that I want to achieve a certain effect. Essentially as you make your browser window smaller, I want to crop off left and right side equally, so that the image is not resized and I always see the center.
I have accomplished that in the following way:
<style>
.banner{
text-align: center;
overflow: hidden;
height: 350px;
position: relative;
}
.banner img{
position: relative;
left: 300%;
margin-left: -600%;
}
</style>
<div class="banner"><img src="https://lh3.google.com/u/0/d/0B1qZWmK2ucS8ZDN3Ni02VXo2SEE=w1129-h720-iv1" alt="Image is missing" /></div>
Js fiddle: https://jsfiddle.net/szsj6f9m/
One thing I have noticed with this approach is that if I make left be 100% and margin-left be -200% the image will then half way through start sliding back to the right. I don't fully understand why, I just know that I need to make the percentage to 300% so it behaves correctly on 320px screen.
Here is the example of what I am talking about, just resize your browser small to big and you will see what I am talking about:
Js fiddle: https://jsfiddle.net/szsj6f9m/1/
My question is this:
Is it ok to have the position of the screen so far and throw such a large left-margin on it? Does this causes any kind of problems from the performance point of view on smaller devices or any devices really? Are there any reasons you can think that would say not to do this.
I personally use left:50%;transform:translate(-50%,0); (works even for vertical centering) top:50%;transform:translate(0,-50%); https://jsfiddle.net/szsj6f9m/3/
The situation i'm facing :
i have an asp.net with a header, sidebar and another right sidebar. the thing is when i execute my website in browser and mimimize browser window. the sidebar on the left jumps on the content page and controls get all mixed. see picture for an idea.
Another problem is when i executed that website in a wider screen resolution the controls ( panels ) had a bigger margin and evertyhing look wider.
Any ideas how to fix this ?
Thank you in advance
EDIT:
Sidepanel ( right ) CSS code:
#droite
{
position: fixed;
top: 22.5em;
right: 5%;
width: 13%;
background-color: White;
}
What I did on my website (firedrake969.github.io) was add some simple jQuery code to hide the sidebar whenever the window became too small. If you don't mind using jQuery, I'd say that's the way to go. However, if you don't want to use jQuery, I don't think position:fixed can have the bar hide just with CSS/HTML if the browser window gets too small.
You probably need something similar to this. the max-width can be set to any screen width you choose.
#media screen and (max-width:768px) {
#droite
{
position: fixed;
top: 22.5em;
left:5%;
width: 100%;
background-color: White;
}
}
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