How can I apply ZURB style to Yii

Yii 1.1 General Discussion
1

I know how to set the id but not class attribute for CHtml::beginForm()

I am using ZURB foundation and I want to create ‘nice’ forms

Please help

2 



CHtml::beginForm($action, 'post', array('class'=>'my-class'));

Class reference: http://www.yiiframework.com/doc/api/1.1/CHtml#beginForm-detail

3

Thanks

I tried this and it did not work.

I will try again.

4

Hi

How can I apply Zurb foundation CSS to

CHtml::dropDownList(‘Gametype’,$select, $list,array(‘empty’ => ‘(Select a game)’));

Thanks,

5

Hi

please read this link

http://www.yiiframework.com/forum/index.php?/topic/25572-add-css-class-on-select-box/page__p__123146__fromsearch__1#entry123146

Thanks

6

Thanks!!

Its not working

This is what i trying to do…Apply below CSS to CHtml::dropDownList

[b]From Zurb’s example

http://foundation.zurb.com/docs/forms.php

(at bottom of the page)

<label>Dropdown Label</label>

<select style="display:none;">

<option SELECTED>This is a dropdown</option>

<option>This is another option</option>

<option>Look, a third option</option>

</select>

<div class="custom dropdown">

<a href="#" class="current">This is a dropdown</a>

<a href="#" class="selector"></a>

<ul>

&lt;li&gt;This is a dropdown&lt;/li&gt;


&lt;li&gt;This is another option&lt;/li&gt;


&lt;li&gt;Look, a third option&lt;/li&gt;

</ul>

</div>

[/b]

7

Please help me replacing blueprint with ZURB for CMenu widget.

Thanks

8

NOTE: I moved/merged your topics about ZURB because the way you started you would create a new topic for every Yii component

9

It seems that the magic behind the Zurb Foundation and Yii is generally quite compatible except when it comes to forms. The dropdownlist is the most obvious example.

I’m pretty sure that when Zurb Foundation hooks into form fields, which happens when you put the class “custom” on the form ( you can do this easily using htmlOptions ):


<?php 

$form=$this->beginWidget('CActiveForm', array(

	'id'=>'my-form',

	'enableAjaxValidation'=>true,

	'enableClientValidation'=>true,

	'focus'=>array($model,'address'),

	'htmlOptions'=>array("class"=>"custom"),  // Foundation3 custom forms conflict with Yii forms

	)); 

?>

I noticed that as soon as I did this, while I got “custom dropdown” look and feel from the Zurb Foundation, my ajax on my dropdown stopped firing. Also that the Zurb Custom dropdown looked nasty, the field wasn’t displayed full width (kinda crumpled) until the user selected one of the options - not usable.

I don’t know enough about how either of these work, but it would be awesome if they could work together. Most other Zurb Foundation magic such as grids, buttons, elements etc. can be easily integrated into a Yii app and it works great. I did this by creating a new theme called “foundation3” and then changing the main layout to include the css and js from Zurb Foundation from the theme. In most cases you can add “class” or “htmlOptions” coding to Yii widgets and method calls to get Foundation functionality - but not for forms.

I’m thinking though that changes to the Yii framework might be required to make forms play nice with the Zurb Foundation.