[EXTENSION] Bootstrap

[yiidf (Don Felipe)]

I would like to ask if I’d be able to put a sort of login-form as one of navbar’s dropdown items.

Scenario: Boot/TbNavbar => Boot/TbMenu => li => form.

Try this… (inside the items array of Boot/TbNavbar):

array(

  'class'=>'bootstrap.widgets.TbMenu',

  'htmlOptions'=>array('class'=>'pull-right'),

  'encodeLabel'=>false,

  'items'=>array(				

    array('label'=>'Login', 'url'=>'#', 'items'=>array(


      array('label'=>'<form>

          <input type="text" placeholder="user id" id="userid"/>

          <input type="password" placeholder="password" name="userpassword"/>

        </form>', 

        'url'=>null, 'visible' => Yii::app()->user->isGuest)),


    ),

  ),

),

important:

• ‘encodeLabel’=>false … so the form is not encoded but rendered properly.

• ‘url’=>null … of course you need to add a submit button.

• browser test … check how it looks like in different browser and OS; please provide feedback for us!

Tested in FF/Safari on Mac OS.

Hope this helps!

-DF

[yiidf (Don Felipe)]

and I got some problem whit this code

echo $form->textFieldRow($model, 'textField', array('class'=>'span3')); 

that code give me error message like this "LoginForm.textField" is not defined"

What I missing whit this error message??

There’s nothing missing in the error message, it tells you exactly what’s not defined (hence missing in the model class): the attribute name. Make sure you’re using an attribute name that is set under rules() in /protected/models/LoginForm.php. Usually you will have something like…

array('username, password', 'required'),

//or

array('email, password', 'required'),

All attributes that require user input need to be added in rules() of the model class.

Cheers,

-DF

[murid (Darkstar Cc)]

There’s nothing missing in the error message, it tells you exactly what’s not defined (hence missing in the model class): the attribute name. Make sure you’re using an attribute name that is set under rules() in /protected/models/LoginForm.php. Usually you will have something like…

array('username, password', 'required'),

//or

array('email, password', 'required'),

All attributes that require user input need to be added in rules() of the model class.

Cheers,

-DF

Thanks…

Don Felipe

i have just define on rule model

but i still have this error message

Property "TbActiveForm.enableClientValidation" is not defined.

and I try to define whit tis code

$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(

    'id'=>'verticalForm',

	'enableClientValidation'=>true,

    'htmlOptions'=>array('class'=>'well'),

)); ?>

But there is’nt any changes on that error message,

what this error message means?

Thx

[Chris83 (Cniska)]

@Müller That’s an interesting idea, however I probably wouldn’t add a fixedItems property but instead allow developers to configure a fixed property per item. What do you think about this solutions? Here’s a quick example:

$this->widget('bootstrap.widgets.TbNavbar', array(

	.....

	'items'=>array(

		array(

			'class'=>'bootstrap.widgets.TbMenu',

			.....

			'fixed'=>true, // like so

			'items'=>array(

				array('icon'=>'home white', 'label'=>'Home', 'url'=>array('/site/index'),

				.....

			),

		),

		.....

	),

));

[yiidf (Don Felipe)]

Property "TbActiveForm.enableClientValidation" is not defined.

Client-side validation works fine on my side… the newest alpha and latest 0.x version. Besides, there’s no difference on how enableClientValidation is handled in BootActiveForm vs TbActiveForm. Just in case, what Yii and alpha-bootstrap versions do you use?

[Chris83 (Cniska)]

@yiistudent I’d suggest that you don’t use an alpha version but instead the stable 0.x version.

[amuller81 (Anderson A Muller)]

Hi @Chris83

This was my first idea, the reasons (that I can remember now) why I didn’t implement like that was:

• I didn’t want to change that much of your code to separate the $items (checking the item fixed property) in 2 arrays before rendering them, one before the TbCollapse and one inside it.

• It could be confuse when you write a code like this:

$this->widget('bootstrap.widgets.TbNavbar', array(

	.....

	'items'=>array(

		array(

			'class'=>'bootstrap.widgets.TbMenu',

			.....

			'fixed'=>false,

			'items'=>array(

				array('icon'=>'home', 'label'=>'Home', 'url'=>array('/site/index'),

				.....

			),

		),

		.....

		array(

			'class'=>'bootstrap.widgets.TbMenu',

			.....

			'fixed'=>true, // This will show on right side of the navbar as by the current idea

			'items'=>array(

				array('icon'=>'magnifier', 'label'=>'Search', 'url'=>array('/site/search'),

				.....

			),

		),

		.....

		array(

			'class'=>'bootstrap.widgets.TbMenu',

			.....

			'fixed'=>false,

			'items'=>array(

				array('icon'=>'bullhorn', 'label'=>'Contact', 'url'=>array('/site/contact'),

				.....

			),

		),

	),

));

Where the middle TbMenu will be displayed last.

But if can come with a neat implementation of the property fixed, I do think it’s better.

@Müller That’s an interesting idea, however I probably wouldn’t add a fixedItems property but instead allow developers to configure a fixed property per item. What do you think about this solutions? Here’s a quick example:

$this->widget('bootstrap.widgets.TbNavbar', array(

	.....

	'items'=>array(

		array(

			'class'=>'bootstrap.widgets.TbMenu',

			.....

			'fixed'=>true, // like so

			'items'=>array(

				array('icon'=>'home white', 'label'=>'Home', 'url'=>array('/site/index'),

				.....

			),

		),

		.....

	),

));

[digitalwingx]

can I see ur code of that example?

Sure only got the code for the screenshot 1 since the #2 code I only changed to it briefly to illustrate my point.

Here is the view bit for #1: (fairly straightforward code really)

<?php $form = $this->beginWidget('bootstrap.widgets.BootActiveForm', array(

    'id' => 'job-form',

    'enableAjaxValidation' => false,

)); ?>


<p class="help-block">Fields with <span class="required">*</span> are required.</p>


<?php echo $form->errorSummary($model); ?>


<div class="hidden">

    <?php echo $form->uneditableRow($model, 'return_authorisation_id', array('class' => 'span5')); ?>

</div>


<?php echo $form->dropDownListRow(

    $model,

    'job_status_id',

    CHtml::listData(JobStatus::model()->findAll(), 'id', 'title'),

    array(

        'class' => 'span5',

    ));

?>


<?php echo $form->textFieldRow($model, 'product_received_time', array('class' => 'span5 datepicker')); ?>


<?php echo $form->textFieldRow($model, 'hours_worked', array('class' => 'span2', 'append' => 'hours')); ?>


<?php echo $form->textAreaRow($model, 'note', array('rows' => 6, 'class' => 'span5')); ?>


<?php echo $this->renderPartial('_parts_used', array('model' => $model)); ?>


<input type="hidden" name="jumper" id="jumper">


<div class="form-actions">

    <?php $this->widget('bootstrap.widgets.BootButton', array(

    'buttonType' => 'submit',

    'type' => 'primary',

    'icon' => 'ok white',

    'label' => $model->isNewRecord ? 'Create' : 'Save',

)); ?>


    <?php $this->widget('bootstrap.widgets.BootButton', array(

    'buttonType' => 'button',

    'type' => 'info',

    'icon' => 'print white',

    'label' => 'Save and Print',

    'htmlOptions' => array(

        'class' => 'save-print'

    ),

)); ?>

</div>


<?php $this->endWidget(); ?>

[murid (Darkstar Cc)]

Client-side validation works fine on my side… the newest alpha and latest 0.x version. Besides, there’s no difference on how enableClientValidation is handled in BootActiveForm vs TbActiveForm. Just in case, what Yii and alpha-bootstrap versions do you use?

@yiistudent I’d suggest that you don’t use an alpha version but instead the stable 0.x version.

Thx All

I got the same, use alpha or current Yii-bootstrap extention and also the same error for prevoius version.

this my yii config script

return array(

	'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',

	'name'=>'Stater',

	'defaultController' => 'site/login',

	// preloading 'log' component

	'preload'=>array(

		'log',

		'bootstrap',

		),


	// autoloading model and component classes

	'import'=>array(

		'application.models.*',

		'application.components.*',

		'ext.bootstrap.widgets.*',

		'application.extensions.bootstrap.widgets.*',

		'application.modules.rights.*',

		'application.modules.rights.components.*',

	),


	'modules'=>array(

		// uncomment the following to enable the Gii tool

		

		'gii'=>array(

			'class'=>'system.gii.GiiModule',

			'password'=>'admin',

			'generatorPaths'=>array(

					'bootstrap.gii',

				),

		),

		

	),


	// application components

	'components'=>array(

		'bootstrap'=>array(

    		'class'=>'ext.bootstrap.components.Bootstrap', // assuming you extracted bootstrap under extensions

         ),

		

		'user'=>array(

			// enable cookie-based authentication

			'allowAutoLogin'=>true,

			'class'=>'RWebUser',

		),

		//


		

		// uncomment the following to enable URLs in path-format

		'urlManager'=>array(

			'urlFormat'=>'path',

			'showScriptName'=>false,

			'caseSensitive'=>false,

			'rules'=>array(

			),

		

		),

		

		'db'=>array(

			'connectionString' => 'mysql:host=localhost;dbname=yii_tesis',

			'emulatePrepare' => true,

			'username' => 'root',

			'password' => '',

			'charset' => 'utf8',

		),

		

		'errorHandler'=>array(

			// use 'site/error' action to display errors

            'errorAction'=>'site/error',

        ),

		'log'=>array(

			'class'=>'CLogRouter',

			'routes'=>array(

				array(

					'class'=>'CFileLogRoute',

					'levels'=>'error, warning',

				),

				// uncomment the following to show log messages on web pages

				/*

				array(

					'class'=>'CWebLogRoute',

				),

				*/

			),

		),

	),


	// application-level parameters that can be accessed

	// using Yii::app()->params['paramName']

	'params'=>array(

		// this is used in contact page

		'adminEmail'=>'webmaster@example.com',

	),

);

And I used current version of Yii. Any suggestion?

SOLVED

Use lastest version of Yii framwork

Thx All

[onek13 (No Hack2003)]

Hi All,

Is there a way to remove the auto label in dropDownListRow function?

I tried to search it but i could not find a solution.

See screenshot below for reference.

3087

Thanks in advance.

[Chris83 (Cniska)]

Setting label to false should do the trick.

Hi All,

Is there a way to remove the auto label in dropDownListRow function?

I tried to search it but i could not find a solution.

See screenshot below for reference.

3087

Thanks in advance.

[ekerazha]

If you wish to see it live you can check out the demo I just set up:

http://www.cniska.ne…-bootstrap-dev/

It still infringes the Glyphicons Free license.

[Chris83 (Cniska)]

Hey ekerazha,

Thanks for notifying me about this. I’ll look into it as soon as possible and make the necessary changes.

It still infringes the Glyphicons Free license.

[yiidf (Don Felipe)]

Hey ekerazha,

Thanks for notifying me about this. I’ll look into it as soon as possible and make the necessary changes.

Simply add "Icons from Glyphicons Free, licensed under CC BY 3.0." in the footer on each page where Glyphicons are used. The link to CC is not necessarily needed, I guess.

FontAwesome

Alternatively, one could use FontAwesome icons that are licensed under CC, too, and the author just wants a note in human-readable source code. It’s pretty straight forward how to replace the sprites; either via Less or CSS.

[ekerazha]

FontAwesome

Alternatively, one could use FontAwesome icons that are licensed under CC, too, and the author just wants a note in human-readable source code. It’s pretty straight forward how to replace the sprites; either via Less or CSS.

Font based icons can have issues on some browsers (I found some issues on the Android browser).

[Chris83 (Cniska)]

The extension will use image icons as long as Bootstrap does. I won’t make any changes to Bootstrap itself.

Font based icons can have issues on some browsers (I found some issues on the Android browser).

[gv0zd (Gv00000zd)]

Hi. I have a problem with modal and BootButtonGroup

This is code from examples.

<?php $this->beginWidget('bootstrap.widgets.BootModal', array('id'=>'myModal')); ?>

 

<div class="modal-header">

    <a class="close" data-dismiss="modal">&times;</a>

    <h3>Modal header</h3>

</div>

 

<div class="modal-body">

    <p>One fine body...</p>

</div>

 

<div class="modal-footer">

    <?php $this->widget('bootstrap.widgets.BootButton', array(

        'type'=>'primary',

        'label'=>'Save changes',

        'url'=>'#',

        'htmlOptions'=>array('data-dismiss'=>'modal'),

    )); ?>

    <?php $this->widget('bootstrap.widgets.BootButton', array(

        'label'=>'Close',

        'url'=>'#',

        'htmlOptions'=>array('data-dismiss'=>'modal'),

    )); ?>

</div>

 

<?php $this->endWidget(); ?>

<?php $this->widget('bootstrap.widgets.BootButton', array(

    'label'=>'Open modal',

    'url'=>'#myModal',

    'type'=>'primary',

    'htmlOptions'=>array('data-toggle'=>'modal'),

)); ?>


<div class="btn-toolbar">

    <?php $this->widget('bootstrap.widgets.BootButtonGroup', array(

        'type'=>'primary',

        'buttons'=>array(

            array('label'=>'Action', 'items'=>array(

                array('label'=>'Open modal', 'url'=>'#myModal', 'htmlOptions'=>array('data-toggle'=>'modal'),),

                '---',

                array('label'=>'Test', 'url'=>'#'),

            )),

        ),

    )); ?>

</div>

I have changed only one thing in <div class="btn-toolbar">

array('label'=>'Open modal', 'url'=>'#myModal', 'htmlOptions'=>array('data-toggle'=>'modal'),),

When i click on button modal appears.

But when i click on "Open modal" item in ButtonGroup, nothing happens

Html generated by Yii bootstrap

<div class="btn-group">

    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></a>

    <ul class="dropdown-menu">

        <li class=""><a href="#myModal">Open modal</a></li>

        <li class="divider"></li>

        <li class=""><a href="#">Test</a></li>

    </ul>

</div>

If I edit html via Firebug modal works fine

<li class=""><a href="#myModal"  data-toggle="modal">Open modal</a></li>

What i make wrong?

[yiidf (Don Felipe)]

Hi. I have a problem with modal and BootButtonGroup

[…]

What i make wrong?

Not much wrong - just one common mistake:

Use ‘linkOptions’ instead of ‘htmlOptions’ and it should work fine.

[gv0zd (Gv00000zd)]

Not much wrong - just one common mistake:

Use ‘linkOptions’ instead of ‘htmlOptions’ and it should work fine.

Thank you!!!

[adminnu (Mail)]

Hello, you begin the implementation of multiple sub-navbar at 1.0, but then rolled, whether this function is implemented.