auto redim layout

Discontinued products DHTMLX Touch
#1

Hi,

I have a layout with 2 columns, one for menu and other one for content…

I have a button to hide menu column when this buttons is clicked…and the other column moves to the left but does not fill all the room…

how can i do this…please?

thanks in advance!!

greetings!

#2

Please share the code snippet

If you have not specified fixed sizes for second column, after hiding the first one, it must take all available space.

#3

//main
var _mainUI = {};
_mainUI.elements = {};

_mainUI.elements.mainHeader = {
id: “header”,
view: “template”,
gravity:1,
css: “portadaBody”,
template: “

” +
“
” +
“” +
// “Menu” +
“
” +
“
” +
“3tVOZ” +
“
” +
“
”
};

_mainUI.elements.mainMenu = {
id: “menu”,
view: “form”,
css: _fondo,
gravity: _gravityContenido,
width: _anchuraMenu,
elements: [
{ view: “imagebutton”, id: “ibUsuario”, src: “App_Resources/Android/drawable-mdpi/user.png”, label: “Perfil”, align: “left”, css: “menuItem”, click: “cargarContenido(1)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibInicio”, src: “App_Resources/Android/drawable-mdpi/home_2.png”, label: “Inicio”, align: “left”, css: “menuItem”, click: “cargarContenido(2)”, height: _espacioMenus },
// { view: “imagebutton”, id: “ibMensajeria”, src: “App_Resources/Android/drawable-mdpi/mensajeria.png”, label: “Mensajeria”, align: “left”, css: “menuItem”, click: “cargarContenido(3)”, height: _espacioMenus },
{view: “imagebutton”, id: “ibNotificaciones”, src: “App_Resources/Android/drawable-mdpi/mensajeria.png”, label: “Notificaciones”, align: “left”, css: “menuItem”, click: “cargarContenido(4)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibNews”, src: “App_Resources/Android/drawable-mdpi/actualidad.png”, label: “Actualidad”, align: “left”, css: “menuItem”, click: “cargarContenido(5)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibVoz”, src: “App_Resources/Android/drawable-mdpi/notificaciones.png”, label: “La Voz”, align: “left”, css: “menuItem”, click: “cargarContenido(6)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibDenuncias”, src: “App_Resources/Android/drawable-mdpi/denuncias.png”, label: “Denuncias”, align: “left”, css: “menuItem”, click: “cargarContenido(7)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibForo”, src: “App_Resources/Android/drawable-mdpi/comentarios.png”, label: “Foro”, align: “left”, css: “menuItem”, click: “cargarContenido(8)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibComunidades”, src: “App_Resources/Android/drawable-mdpi/comunidades.png”, label: “Grupos”, align: “left”, css: “menuItem”, click: “cargarContenido(9)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibPreocupaciones”, src: “App_Resources/Android/drawable-mdpi/preocupaciones.png”, label: “Preocupaciones”, align: “left”, css: “menuItem”, click: “cargarContenido(10)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibFirmas”, src: “App_Resources/Android/drawable-mdpi/firmas.png”, label: “Firmas”, align: “left”, css: “menuItem”, click: “cargarContenido(11)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibAyudas”, src: “App_Resources/Android/drawable-mdpi/ayudas.png”, label: “Ayudas”, align: “left”, css: “menuItem”, click: “cargarContenido(12)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibReuniones”, src: “App_Resources/Android/drawable-mdpi/reuniones.png”, label: “Reuniones”, align: “left”, css: “menuItem”, click: “cargarContenido(13)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibMejoras”, src: “App_Resources/Android/drawable-mdpi/mejoras.png”, label: “Mejoras”, align: “left”, css: “menuItem”, click: “cargarContenido(14)”, height: _espacioMenus },
{ view: “imagebutton”, id: “ibContacto”, src: “App_Resources/Android/drawable-mdpi/contactanos.png”, label: “Contactanos”, align: “left”, css: “menuItem”, click: “cargarContenido(15)”, height: _espacioMenus }

]

};

_mainUI.elements.mainContenido = { view: “iframe”, id: “divContent”, src: “actualidad.html”, gravity: _gravityContenido, css: “portadaBody” };
_mainUI.elements.mainPublicidad = { width: _anchuraPublicidad, gravity: _gravityContenido, css: “portadaBody” };
_mainUI.elements.mainFooter = { css:“portadaBody”};

//Layout
_mainUI.configMobile =
{
type: “wide”,
id: “mainLayOut”,
width: “100%”,
height: “100%”,
rows:
[
_mainUI.elements.mainHeader,
{
//Contenido
id: “content”,
cols:
[
_mainUI.elements.mainMenu,
_mainUI.elements.mainContenido,
_mainUI.elements.mainPublicidad
]
},
_mainUI.elements.mainFooter
]
}

_mainUI.config = {}

_mainUI.init = function () {
if (_mainUI.layout == “mobile”) {
dhx.ui.fullScreen();
dhx.ui(_mainUI.configMobile);
//_mainUI.setFormEvents();
}
else {
dhx.ui(_mainUI.config);
}
//_mainUI.setEvents();
};

hope it helps!! thanks and greetings!

#4

I have created a local example with the above code, and calling

$$("menu").hide()

works correctly. Menu id hidden and the central iframe takes its place.

#5

Yes, but then content does not redim…at least in my case…

i would like the content take all the space taken.

Is this posible? thanks in advance!

greetings!

#6

Do you mean content inside of iframe ?
If this is default html of different dhx touch app ( initialized on body, with webix.ui.fullScreen call ) it will resize self when parent iframe resized.

If you have the online demo - please PM the link.

#7

Yes…the content of the iframe does not redim. i would like to take the iframe and the menu space and well redimed…

dont have any online demo…just the code above…

in your test…your content from then iframe was redimed when the menu is hidden or just take all the place like happens to me?

thanks in advance!! greetings.

#8

Yep, it works for me.
Please check the attached sample.
01_layout.zip (1.42 KB)

#9

Hi again!!

I have checked your test and its perfect…like mine but has no content to redim in the iframe…

The problem is that i have another layout inside that iframe and this child layout is not redimed…

i need to have a function that when the button that hides the menu, has to redim the content of that iframe (the child layout)…and this function has to be a general function…

i have to access that iframe layout element and redim it from the main form…

hope it helps…

thanks in advance!! greetings!

#10

Demo contains the next line

{ view: "iframe", id: "divContent", src: "01_layout.html", gravity: 1, css: "portadaBody" };

So the iframe in fact contains the same ui as master page, and after hiding menu in the master page, layout in the iframe resizes self correctly.

In common case you can use code like next

$$("divContent").getWindow().$$("id of top layout").resize();
#11

hi,

i built an example of what happens to me…

Its a layout width 3 rows…one has an iframe that contains another layout…

when i click the main layout header… see that the children layout does not fill all the space…

i thinks this is very important for my app that all iframe content is well redimed…

hope it helps!!

Thanks in advance…

greetings!!
testRedim.rar (2.35 KB)

#12

Hello,

please try to remove fullScreen() method call from your all

#13

Thanks!!

It worked!!

Nice job you all!!

greetings!!

#14

Hi again,

about iframes, I have a break in my javascript code…and i have been for a long time trying to fix it…

When i use an iframe and i have to use my cordova.js…it breaks…

if i comment that reference to cordova.js…it works…and i understand that in a iframe…i have to load all my references to all js i use there…

attached is the proyect i sent to you some days before…but full…it is built in visual studio 2010…

here is the output:

Uncaught TypeError: undefined is not a function cordova.js:5
deviceready has not fired after 5 seconds. cordova.js:1359
Channel not fired: onNativeReady cordova.js:1352
Channel not fired: onPluginsReady cordova.js:1352
Channel not fired: onCordovaReady

i think is a reference issue…but dont know how to fix it…

hope it helps…

thanks in advance!!

greetings!!
testRedim.rar (409 KB)