[EXTENSION] Foundation

Can I style my GridViews with Foundation?

(I am new in Yii and also in using CSS frameworks).

You can use the cssFile property of CGridView, set it to false and you’ll get default styles for tables from foundation, you can also create a specific css file for grid views and set that css instead.

Yii Foundation It does not (yet) have a gridview widget like bootstrap, if people request it enough (or contribute it) it could be added. it just doesn’t seem necessary for now.

Hi, thanks for the very cool extension. It rocks!

However, I am hitting a problem when using Ajax Buttons.

I realised that once I comment the foundation .js registering method (component’s registerJs()), then my Ajax Buttons come back to life.

I did a bit of debugging, and noticed that the presence of jQuery(document).ready() is what makes Ajax stop working.

Can you please confirm that it is indeed the case and perhaps suggest a way to get around that?

I’ve also tested with the version 3 of the extension but it does not work either.

Many thanks for your help

Cass

I wont have time to take a look until this weekend.

For now please show me the Javascript generated code, I cannot see why a "jQuery(document).ready()" would generate such an issue, maybe I can understand a little more if I see some code.

Thanks for your feedback!

Hi Asgaroth,

Thanks for the quick reply.

No problem, I am mainly using the layout elements of foundation, so for now I’ve commented the registration of the scripts out and I can survive with that until we get the client to approve things.

At one point I commented out my code and used the stuff at http://www.yiiframework.com/wiki/49/update-content-in-ajax-with-partialrender/ to ensure I was not forgetting anything. That did not work either until I commented out the foundation .js.

I hope that is enough info, but if you could have a look during the weekend, that would most definitely suffice.

Cheers

Cass

Thanks,

Still I would like to see the generated javascript which is generating errors with your code. otherwise I’ll have to recreate the scenario and see if it gets broken for me too.

Hey, guys,just a tip/suggestion

I was facing a problem with Orbit using Foundation3 extension, FF 10.0.2 and Linux. Slider seemed to not respect pauses between images, it was totally crazy.

The issue was solved when I did the following:

1 - downloaded foundation.min.css and foundation.min.js from Zurb’s website

2 - included only these two files in the functions registerCss and registerJS of the Foundation component as follows:





    /**

     * Registers the Foundation CSS.

     */

    public function registerCss( ) {

        Yii::app( )->clientScript->registerCssFile( $this->getAssetsUrl( ).'/stylesheets/foundation.min.css' );

    }


    /**

     * Registers the core JavaScript plugins.

     * @since 0.9.8

     */

    public function registerJs( ) {

        Yii::app( )->clientScript->registerCoreScript( 'jquery' );

        //$this->registerScriptFile( 'jquery.reveal.js' );

        //$this->registerScriptFile( 'jquery.orbit.js' );

        //$this->registerScriptFile( 'jquery.customforms.js' );

        //$this->registerScriptFile( 'jquery.placeholder.min.js' );

        //$this->registerScriptFile( 'modernizr.foundation.js' );

        //$this->registerScriptFile( 'jquery.tooltips.js' );

        //$this->registerScriptFile( 'app.js' );

	$this->registerScriptFile( 'foundation.min.js' );

    }



The files contain itselves the code for plugins.

All things working fine now.

:)

Regards!

One more thing to consider

If you use the solution I posted before, beware of removing the included jQuery code from foundation.js, otherwise, you’ll be including jQuery twice and causing trouble with any jQuery plugins you try to use, even CMaskedTextField won’t work.

Hope this can be useful

Regards!

:)

Cool extension, I like but it seems to conflicts with other extension like quickdlgs, srbac

Solved!

Thanks a lot!

Hi Asgaroth,

first of all, thank you for developing this project.

you implementation has a good approach, but i would like to suggest something.

  • Documentation

Your documentation of YiiFoundation3 isn’t good. On your website it looks like a copy of Zurb’s Foundation Dokumentation, but is out of date. Foundation 3.1 is already released. I would limit the online dokumentation to your part of code without the foundation doku. just make a link to zurb’s foundation website.

Furthermore many of your published widgets aren’t documented online.

Inline documentation is missing or uncompleted, too.

I would like to use your project much more but at the moment it is easier to code my own widgets than to read your code, because i have to consider the Zurb’s docu anyway.

  • Script import

Not all JS files are required while preloading the component. Just the foundation.min.js, I think. All other files should be imported on demand.

On ajax request, there is no included way to avoid importing. I’ve added a workaround in foundation.php->registerJS()


if(Yii::app()->request->isAjaxRequest)

return;

because the files are anyway preloaded with the app.

Regards

Nayo

Thank you very much for your comments, I will be taking them into account for an upcoming release.

I have a queston - I have added EGMap to my webpage, but it doesn’t show “Zoom in and out buttons”.

See Here - Link

I am using foundation framework.

Could it be that it makes zoom in and out buttons so ugly?

Yep, foundation is affecting parts of your map, normally this things go into an iframe, so that they are not affected by page styles.

Can you give me a hint how to use iframe in this case?

For example

  • I create new action MAP in my SiteController

  • I add iframe src=www.mypage.com/site/map

  • map action renders map view with layout = “nolyaout” (fyc, I cannot user renderPartial as seems that EGMap extension doesn’t work with it)

  • foundation.css will be added in this case, but I do not want to have it in iframe.

So, it seems that the question actually is - are there any way not to add foundation.css to one particular layout?

Thank you.

Yes, there is an option to disable registration of assets




'components'=>array(

    .....

     // assuming you extracted foundation under extensions

     'foundation' => array("class" => "ext.foundation.components.Foundation",

     'coreCss' => false

     'enableJS' => false

),

 

),



After that, just place in your Layout (the layout you need foundation.css registered) the following:




Yii::app()->foundation->registerCss();

Yii::app()->foundation->registerJs();



Hope this helps

:)

Regards

Can I renderpartial view with FounTab into one of the tabs?

Thx.

Yes, why not, what issues are you having?

Hello Asgaroth,

Thank you for this plugin. While trying to create a vertical navigation menu below code in FounNavBar > normalizeItems drew my attention :




if( isset( $item['encodeLabel'] ) && $item['encodeLabel'] )

$items[$i]['label'] = CHtml::encode( $item['label'] );


if( ($this->encodeLabel && !isset( $item['encodeLabel'] )) || (isset( $item['encodeLabel'] ) && $item['encodeLabel'] !== false) )

$items[$i]['label'] = CHtml::encode( $item['label'] );



Would it be possible to remove just the first condition? Or I do not understand the thing.

Regards,

hum,… you are right, the second check includes the first one, there is no need for it. please create a pull request if you want this anytime soon.