[EXTENSION] Bootstrap

This may seem like an odd question, but I have one part of my site (corresponding to a particular controller) that uses it’s own layout and I don’t want to use Bootstrap for this.

How do I override Bootstrap in this case, i.e. avoid having any Bootstrap code injected into the page?

Regards, Rob

Hi, I’m a newbie with Yii and Bootstrap widget. I need you help regarding my problem with BootMenu.

protected/views/layouts/main.php:


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

    'fixed'=>true,

    'brand'=>'Sample Company',

    'brandUrl'=>'http: //localhost/company/index.php',

    'collapse'=>false, // requires bootstrap-responsive.css

    'items'=>array(

        array(

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

            'type'=>'pills',

            'items'=>array(

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

                array('label'=>'Products', 'url'=>'item/index'),

                array('label'=>'Inventory', 'url'=>'inventory/index'),

                array('label'=>'Sales', 'url'=>'sale/index'),

                array('label'=>'Admin', 'url'=>'branch/index'),

                array('label'=>'Login', 'url'=>'site/login'),

            ),

     ...

?> 

The code above displays fine on /localhost/company/index.php. Initial click on one of the menus e.g. "Sales" will go to sale/index without a problem. However, succeeding click will result to blank page because all menu links will now be prepended with "sale" i.e. /localhost/company/sale/site/index for "Home", /localhost/company/sale/inventory/index for "Inventory", etc.

To regain the display, I would type the base url (/localhost/company/index.php). If I click on "Inventory", the same thing happens. All menu links will be prepended with the current controller: …company/inventory/site/index for "Home", …company/inventory/sale/index for "Sales" resulting to blank pages.

My UrlManager config is:


'urlManager'=>array(

    'urlFormat'=>'path',

    'showScriptName'=>false,

    'rules'=>array(

        '<controller:\w+>/<id:\d+>'=>'<controller>/view',

        '<controller:\w+>/<action:\w+>/<id:\d+>'=>'<controller>/<action>',

        '<controller:\w+>/<action:\w+>'=>'<controller>/<action>',

     ),

),

My apache rewrite module is "on" with the following settings:

[i]RewriteEngine On

RewriteBase /company/

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php [L,QSA][/i]

Please help me correct the generated links on my BootMenu. Thank you in advance.

P.S. I cannot properly insert links because this is my first post.

Hi Rob,

You may override the default layout by inserting the following on your particular controller:


$layout='//layouts/special_layout';

Note: "special_layout" is an arbitrary name of your layout file and it points to "protected/views/layouts/special_layout.php". Then, in the special_layout.php file insert your overriding css with


<?php Yii::app()->getClientScript()->registerCssFile(Yii::app()->request->baseUrl . '/css/special_layout.css');?>

Hey all,

You can preview the next additions, BootButton and BootButtonGroup in the demo.

The code is available in the bootstrap-2.0.2 branch and will be included in the upcoming 0.9.10 release.

Thanks alipato,

In my case, I’m already using a separate layout - so I think the problem was that because Boostrap is ‘preloaded’, it acts on all controllers. So my solution was to ‘not preload’ the Bootstrap component and then instantiate it in every controller where I wanted to use Bootstrap, e.g.

In controllers/SiteController.php, I added:


public function init()

{	

  // instantiate bootstrap

  Yii::app()->bootstrap;

}

Now Boostrap only applies to my main site, and not the controller where I want to use a separate layout. Not sure if this is the best/only way, but it seems to work OK for me.

Thanks for your extension. It is very good for development.

But why do not find the bootstrap.widgets.BootButtonGroup in latest release?

That’s because it’s still under development. I’m currently testing my implementation so it will be included in the upcoming release.

Awesome extension,

but I ran into a problem today(I prop missed something, sorry if that`s the case):

Is there a way to change the html-value-attribute of a checkbox, created by BootActiveForm::checkBoxListRow, without creating each checkbox manually?

I’m not exactly sure what you mean. Could you provide me with an example and I’ll be glad to help you out.

Well, I have an action in my controller where I create an array with categorys, an Item can be in.




        foreach($categorys as $category){

            $categoryList[] = $category->name;

        }

        $this->render('editForm', array('model' => $formModel, 'categorys' => $categoryList));



In the form I create an Checkbox Row with these:


<?php echo $form->checkBoxListRow($model, 'categorys', $categorys, array('hint'=>'<strong>Note:</strong> bla')); ?>

This creates a html layout simliar to


<input id="AddonEditForm_categorys_0" value="0" type="checkbox" name="AddonEditForm[categorys][]" />

<label for="AddonEditForm_categorys_0">Category Name</label>

</label>

<label class="checkbox">

<input id="AddonEditForm_categorys_1" value="1" type="checkbox" name="AddonEditForm[categorys][]" />

If I submit these I’ll get an response like:


  ["categorys"]=>

  array(2) {

    [0]=>

    string(1) "0"

    [1]=>

    string(1) "1"

  }

I want to change the value attribute (or the key in the name-attribute), so that I can know what categorys were selected(names or ids). (Currently I only know the position in the list which would prob. work, but is not very comfortable)

Great work on the extension!

I have a couple of questions. I’m using the Yii demo blog with the Bootstrap extension.

Question 1:

When using BootGridView with a BootButtonColumn the delete function doesn’t seem to work correctly.

It should be an ajax POST (works in CGridView with CButtonColumn) but its not.

What can be the problem?

Question 2:

How can I use the Bootstrap tooltip in the BootButtonColumn?

I thought something like: ‘htmlOptions’=>array(‘rel’=>‘tooltip’) on then BootButtonColumn?

It places rel=“tooltip” in the <a href> html and it add the tooltip.js script but it doesn’t work, any thoughts?

EDIT: I reinstalled the Yii demo and Bootstrap extension and it seems to work!

http://www.yiiframework.com/forum/index.php/topic/23982-extension-bootstrap/page__view__findpost__p__140042 - here answer to this question.

I’m add in config file (main.php)




...

'selector'=>'[rel=tooltip]'

...



selector without tag and use tooltip for input. It’s working.

@Suralc: Now I see what you mean. The reason why you get indexes as keys is because you define your array as a list and not as a map (associative array). Try this:




foreach ($categorys as $category){

	$categoryList[$category->id] = $category->name;

}



@madmis: You don’t need to set the tooltip selector at all if you want it to be rel=tooltip, because that’s the default.

??? facepalm Sry to bother you with this, I bet I tried it, but anyway thanks it works ;)

Hi Chris!

There’s a little problem with BootActiveForm in 2.0.2 branch.

There are no more ‘search’ or ‘inline’ form type… 'cos of control-group in BootInput class

Probably you’ve inserted this code in order to manage css in case of error (red labels/fields) but it avoids linear forms…

Bye,

Marco

Hey Marco,

I’m aware of this, if someone has a good idea how to get the error messages to work with the vertical, inline and search forms please let me know and I’ll fix it. I will however take a look at this before the release of the current development branch.

Mm… I must look inside bootstrap CSS… I think they add error only on content-group. A workaround I suggest it is to let widgets add error class in label and input tag (as yii does - and in this way tabular form error will work too - ) and then add .error to a “custom” CSS file better if LESS compiled with bootstrap’s variable.less.

I will take a closer look in the weekend

Bye,

Marco

This is only an idea… but should work. Let me know what you think

In this way tabular form errors will also work.

Add this to a custom styles.css (I think this file should be added to assets… inside you could put also loading-image.gif for BootGridView ajax search, classes for grid filters)




label.error, span.error {

  color: #b94a48;

}


input.error, select.error, textarea.error

{

  color: #b94a48;

  border-color: #b94a48;

}



in BootInput.php




public function run()

{

    $errorCss = $this->model->hasErrors($this->attribute) ? ' '.CHtml::$errorCss : '';

		

    if ($this->form->type==BootActiveForm::TYPE_HORIZONTAL)

        echo CHtml::openTag('div', array('class'=>'control-group'.$errorCss));


    // original code


    if ($this->form->type==BootActiveForm::TYPE_HORIZONTAL)

	echo '</div>';

}

in BootActiveForm.php




public function init()

{

    if (!isset($this->htmlOptions['class']))

	$this->htmlOptions['class'] = 'form-'.$this->type;

    else

        $this->htmlOptions['class'] .= ' form-'.$this->type;


    if ($this->inlineErrors)

	$this->errorMessageCssClass = 'help-inline '.CHtml::$errorCss;

    else

	$this->errorMessageCssClass = 'help-block '.CHtml::$errorCss;


    parent::init();

}



Bye,

Marco

Hey Marco,

The thing is that I would like to avoid any custom CSS. I will have to look into the issue and see how it can be resolved.

I know… It’s only a workaround. Bootstrap uses control-group only on horizontal forms… And CSS errors are applied on control-group

hope to find another way… But we need errors only on fields too for tabular input forms