[ 12 posts ] Go to page 1, 2 Next

Allan Brooke

  • Username: allanb
  • Joined: Sun Jun 19, 2011 5:17 am
  • Posts: 10
  • Location: Cape Town South Africa
  • GitHub: allanjpb
  • Gists: allanjpb
  • Offline
  • Profile

YUI3 Layout Problem

Post Posted: Thu Jun 23, 2011 8:58 am
+0-
Hi I have been trying for the last four days to try to produce a layout similar to http://dojotoolkit.org/documentation/tutorials/1.6/dijit_layout/demo/appLayout.html

I am only interested in the main layout not the tabview part at present.

I need the ability to vary the column width between Sidebar content (left) and Group 1 Content.

I have tried using grids with two divs can resize one but not both inside a 'yui3-g' class.

I have also tried widgets as panels but did not get very far.

EDIT
This is the code I tried with div's worked well until I populated div's with content http://jsfiddle.net/allanb/zjFEj/1/

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: YUI3 Layout Problem

Post Posted: Thu Jun 23, 2011 4:14 pm
+0-
You could use YUI2in3 and use the YUI2 LayoutManager.

Allan Brooke

  • Username: allanb
  • Joined: Sun Jun 19, 2011 5:17 am
  • Posts: 10
  • Location: Cape Town South Africa
  • GitHub: allanjpb
  • Gists: allanjpb
  • Offline
  • Profile

Re: YUI3 Layout Problem

Post Posted: Sat Jun 25, 2011 4:56 am
+0-
Thank you for your reply jdopazo I was hoping for a YUI3 way.

I listened to a talk on the subject on Open Hours it seems that this is where the team is hoping to get to in the near future.

I will play around a bit more with Layouts in YUI2 I have it working on a jsfiddle inside of yui3.

Does yui3 pull down all the required CCS files? (as some styling seems missing)

Is there a local version of something like jsfiddle to only work with yui?
Living in Africa with slow internet connections and limited caps (restrictions on up/download quantity)

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: YUI3 Layout Problem

Post Posted: Sat Jun 25, 2011 7:53 am
+0-
Yes, the objective is to have all YUI2 widgets available in YUI3. And the temporary solution is to use YUI2in3.

Most of the time a lot of the functionality appears first in the gallery, but in this case the LayoutManager widget is missing apparently. I wrote a very simple version for a project of mine. I'll see if I can get it to you soon. It's very rudimentary though.

Allan Brooke

  • Username: allanb
  • Joined: Sun Jun 19, 2011 5:17 am
  • Posts: 10
  • Location: Cape Town South Africa
  • GitHub: allanjpb
  • Gists: allanjpb
  • Offline
  • Profile

Re: YUI3 Layout Problem

Post Posted: Sun Jun 26, 2011 2:09 am
+0-
I did manage to find a jsfiddle from you on the forums http://jsfiddle.net/juandopazo/SFcFB/.

I will try and get this working without the grids and see if I can get it to resize one of the divs.

Will postback if I have a query or just with a solution.

Thank you again.

Allan Brooke

  • Username: allanb
  • Joined: Sun Jun 19, 2011 5:17 am
  • Posts: 10
  • Location: Cape Town South Africa
  • GitHub: allanjpb
  • Gists: allanjpb
  • Offline
  • Profile

Re: YUI3 Layout Problem

Post Posted: Sun Jun 26, 2011 12:05 pm
+0-
I had great problems with yui2 in yui3 on jsfiddle.net.
The resizing handles do no show.

I tried using just divs with resize on the left side in YUI3.

I have a jsfiddle http://jsfiddle.net/allanb/zjFEj/

This is almost working. Till I make the main content larger. The problem seems the Main div. I have tried various css but this is the closest I have made.

Does anyone have any ideas?

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: YUI3 Layout Problem

Post Posted: Sun Jun 26, 2011 2:38 pm
+0-
I don't think that CSS combination ("float: left" for one div and "width: 100%" for the other) works in IE < 8.

You're very likely going to have to use the events provided by the resize utility to resize the other div. Something like...
Code:
var other = Y.one('#otherNode');
var parent = other.get('parentNode');
var resize = new Y.Resize({
  node: '#someNode',
  on: {
    'resize:resize': function (e) {
      other.setStyle('width', parent.get('offsetWidth') - e.info.offsetWidth);
    }
  }
});

Allan Brooke

  • Username: allanb
  • Joined: Sun Jun 19, 2011 5:17 am
  • Posts: 10
  • Location: Cape Town South Africa
  • GitHub: allanjpb
  • Gists: allanjpb
  • Offline
  • Profile

Re: YUI3 Layout Problem

Post Posted: Mon Jun 27, 2011 2:17 am
+0-
Thank you @jdopazo I will give that a try today seems the way to go. I was not sure how to implement same.

Regards
Allan

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: YUI3 Layout Problem

Post Posted: Mon Jun 27, 2011 5:16 am
+0-
allanb wrote:
Is there a local version of something like jsfiddle to only work with yui?
Living in Africa with slow internet connections and limited caps (restrictions on up/download quantity)

Regarding how to work locally with YUI, you can download the library from the download link in the homepage and put it in some folder in your local webserver. Then, in your scripts do this:
Code:
YUI({
  base: 'http://localhost/path/to/yui3/build/',
  combine: false
}).use(..., fn);

Allan Brooke

  • Username: allanb
  • Joined: Sun Jun 19, 2011 5:17 am
  • Posts: 10
  • Location: Cape Town South Africa
  • GitHub: allanjpb
  • Gists: allanjpb
  • Offline
  • Profile

Re: YUI3 Layout Problem

Post Posted: Mon Jun 27, 2011 8:26 am
+0-
Thank you once again. I have my div version working at present not complete will post solution for all to see when it is more how I want it.

I will try your last tip for localhost.

How would I include YUI2 for (YUI2 in YUI3) using above example?
  [ 12 posts ] Go to page 1, 2 Next
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum