sliding panels responsive

[ciccio]

Hello,
i followed the suggestion proposed in the topic https://getsatisfaction.com/apperyio/... to have a sliding panel.
i added the asset from http://pastebin.com/F0z0PQAA
i added a Grid component on the page and leaft there an only cell. Grid is a container for the menu
and on Page Show event I Run JavaScript action with the following code:

if ( window.awesomeMenu == undefined) {
window.awesomeMenu = SlideMenu( Appery("mobilegrid_80"), Appery("mobilecontainer1") , "right", "overlay","d");
}
Appery("mobilegrid_80").css({display: "table"});

i would like to obtain a responsive width of my panel.
i setted the width to 15em; because i have some button on the left size of my page and i want to open differt panels on the clik of each button.

i would like to obtain that on different screen size (400x800, 480x800 etc.) the panels open with bigger width just leaving, on their left, the space for the vertical buttons, like in the figure i posted.

[Kateryna Grynko]

Hi,

Try to create Sliding panel following this tutorial: http://docs.appery.io/tutorials/slidi...

Then you can add the following CSS code:
precode#mypanel{
width:200px;
}/code/pre

[ciccio]

i found the other tutorial more usefull because i need to use some REST to populate list, content and checkox in my panel and in the other way was simpler to map my rests to the components in the panels.
do you know if is there any way to make responsive a panel built buy following the method proposed in https://getsatisfaction.com/apperyio/...?

[Kateryna Grynko]

Hi,

Please share your application with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a. We'll take a look.

[ciccio]

thank you,
i already shared my app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a the app name is Strade del Vino CS

[ciccio]

I'm sorry but i solved my prolem adding a css asset with:
codeui-panel {
//width: 15em;
width: 80%;
min-height: 100%;
border-width: 0;
position: absolute;
top: 0;
display: block;
}/code

[Kateryna Grynko]

Hi,

Tank you for the update! Glad it's solved.

[Alex GG]

Hi,
I want to set the widht of my panel to 90% of the screen.
Like the panel in appery tester (android, iOs)

Im using this css:

.ui-panel.ui-panel-position-left {
width:90%;
}

but its not working as expected, the header overlaps the panel (using display push), and if use display overlay, sometimes when the panel hides, about 10% is visible on the screen.

Which code should I use to have this working?
I also use the code provided by ciccio, but it doesnt work for me..

Regards

[Alena Prykhodko]

Hi Alex.

Please try to use the following CSS:

pre

.ui-panel.ui-panel-position-left {
width: auto;
left: 0;
right: 40px;

}/pre

Note - you can adjust right position with your need.

[Alex GG]

Hello,
I tried the code provided by Alena, but sometimes the panel didn ́t behave as expected ( about half and inch of the panel was unable to hide). So the user had to close the App and open it again.

So I decided to leave the panel with its normal size...I just want to know how to make the screen darker when the panel opens..same as in the editor.

Regards