Jx.Layout and CSS positioning best practice

6 messages Options
Embed this post
Permalink
gingerbbm

Jx.Layout and CSS positioning best practice

Reply Threaded More More options
Print post
Permalink
Dear all

I don't seem to be able to set the positioning of my Fusion widgets using CSS. Is my only option to do this in the JavaScript constructor? Rather than this...

new Jx.Layout(
    'Map',
    {width: 700, height: 400, left: 200, right: null, top: 70, bottom: null}
);

...I was hoping I could do this instead:

[JavaScript]
new Jx.Layout('Map');

[CSS]
#Map {
    width: 700px; height: 400px;
    left: 200px; top: 70px;
}

Any advice/comments/wisdom?

Thanks
Stuart
Paul Spencer-2

Re: Jx.Layout and CSS positioning best practice

Reply Threaded More More options
Print post
Permalink
Hi Stuart,

You don't need to use Jx.Layout at all, you can remove the Jx.Layout  
part and just set the size of your div using CSS.

Jx.Layout provides some logic for managing the size of elements  
relative to a parent object and automatically handling the size of the  
element.  If you can achieve what you want using just CSS, great!  Or  
you can use your own javascript to handle your sizing logic if you  
need to.  There is nothing magic about Jx.Layout, we just find it  
convenient to create full page layouts that resize with the browser  
because it handles a lot of the measuring and sizing code auto-
magically.

Cheers

Paul

On 14-Aug-08, at 4:42 AM, gingerbbm wrote:

>
> Dear all
>
> I don't seem to be able to set the positioning of my Fusion widgets  
> using
> CSS. Is my only option to do this in the JavaScript constructor?  
> Rather than
> this...
>
> new Jx.Layout(
>    'Map',
>    {width: 700, height: 400, left: 200, right: null, top: 70,  
> bottom: null}
> );
>
> ...I was hoping I could do this instead:
>
> [JavaScript]
> new Jx.Layout('Map');
>
> [CSS]
> #Map {
>    width: 700px; height: 400px;
>    left: 200px; top: 70px;
> }
>
> Any advice/comments/wisdom?
>
> Thanks
> Stuart
> --
> View this message in context: http://www.nabble.com/Jx.Layout-and-CSS-positioning-best-practice-tp18977839p18977839.html
> Sent from the Fusion Users mailing list archive at Nabble.com.
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users


__________________________________________

    Paul Spencer
    Chief Technology Officer
    DM Solutions Group Inc
    http://www.dmsolutions.ca/

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
gingerbbm

Re: Jx.Layout and CSS positioning best practice

Reply Threaded More More options
Print post
Permalink
Hi Paul

pagameba wrote:
you can remove the Jx.Layout part and just set the size of your div using CSS
Thanks for your reply, but it seems that if I remove the Jx.Layout() call then I don't have a handle on the map, so I have to remove the map.resize() call in my window onload() event, and once that is removed the map doesn't load.

I guess I'm missing something ;)

Thanks
Stuart
Paul Spencer-2

Re: Jx.Layout and CSS positioning best practice

Reply Threaded More More options
Print post
Permalink
right, resize is a method added by Jx.Layout that causes the size of  
an element to be recalculated - you can safely remove that if you are  
not using Jx.Layout.

Cheers

Paul

On 18-Aug-08, at 4:41 AM, gingerbbm wrote:

>
> Hi Paul
>
>
> pagameba wrote:
>> you can remove the Jx.Layout part and just set the size of your div  
>> using
>> CSS
>
> Thanks for your reply, but it seems that if I remove the Jx.Layout()  
> call
> then I don't have a handle on the map, so I have to remove the  
> map.resize()
> call in my window onload() event, and once that is removed the map  
> doesn't
> load.
>
> I guess I'm missing something ;)
>
> Thanks
> Stuart
> --
> View this message in context: http://www.nabble.com/Jx.Layout-and-CSS-positioning-best-practice-tp18977839p19027748.html
> Sent from the Fusion Users mailing list archive at Nabble.com.
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users


__________________________________________

    Paul Spencer
    Chief Technology Officer
    DM Solutions Group Inc
    http://www.dmsolutions.ca/

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
gingerbbm

Re: Jx.Layout and CSS positioning best practice

Reply Threaded More More options
Print post
Permalink
So, assuming my CSS is OK, should the map appear? Having removed all the Jx stuff the map doesn't load (the loading gif simply perpertually ticks away).
gingerbbm

Re: Jx.Layout and CSS positioning best practice

Reply Threaded More More options
Print post
Permalink
My bad. I actually had a container DIV wrapped around my map DIV. CSS was only being applied to the container so because the map DIV had no dimensions set, it was all going weird. It's all sorted now.

Thanks for you help!

Cheers
Stuart