Increase the size for mobile menu by dragging

Question

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?

Can you make more information or give all code. – MD Ashik Nov 02 '16 at 06:17 — MD Ashik, Nov 02 '16 at 06:17

score 2 · Answer 1 · edited May 23 '17 at 10:30

2

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

edited May 23 '17 at 10:30

Community

1
1

answered Oct 30 '16 at 08:19

Pritish Vaidya

21,561
3
58
76

score 0 · Answer 2 · answered Oct 30 '16 at 07:16

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!

score 0 · Answer 3 · answered Nov 05 '16 at 09:07

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.

Increase the size for mobile menu by dragging

3 Answers3