[EXTENSION] Bootstrap

Thanks Don Felipe and Alan Yii,

It’s Work, now i’m in the middle of learning ajax submit. Thanks for helping me

Hi

Not sure if this is a bug but after several hours I’ve managed to figure out why the navigation collapse isn’t working on some pages. It’s related to the bootstrap extension.

I’m using the less extension too so am including the css (core and responsive) in the compiled style.css which seems to be working fine. I’ve set them to false in the config file so they are not included and am registering the style.css manually which again is working fine. Therefore the only settings that are true are the yii css and the js. Their appearing at the top as I would expect but for some reason they are also being included at the top of the content section automatically.




    <div id="content">

	<link rel="stylesheet" type="text/css" href="/mcq/site/assets/27833d15/css/bootstrap-yii.css" />

<script type="text/javascript" src="/mcq/site/assets/51b0c615/jquery.js"></script>

<script type="text/javascript" src="/mcq/site/assets/27833d15/js/bootstrap.min.js"></script>



I’ve confirmed this by setting the yii and js to false in the config and they are not included in either the top section or the content section.

Is this a bug or am I missing something?

Thanks

Lux

Did a hack in the end just to make it work correctly.




Yii::app()->clientscript

		->registerCssFile( Yii::app()->baseUrl. '/css/style.css' );


$boot = new Bootstrap();

$boot->registerYiiCss();

$boot->registerJS();



Can I have menu tab on the bottom like Tabbable?

Can I use the option ‘placement’ with ‘bootstrap.widgets.BootMenu’?

valid values for the "placement" option are: above, below, left, right


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

    'type'=>'tabs',

    'placement'=>'below',

    'tabs'=>array(

        ...

    ),

  ),

)); ?>

of course, it works for (types) "tabs" and "pills".

No, there’s no “placement” option for BootMenu. BootMenu is a standalone menu (only links - no content), place it where you want and need it. If you need to have it fixed to the top or bottom of the page, put it inside BootNavbar and use the “fixed” option and set it to “top” and “bottom” respectively.

How about posting your code?

Main config, layout, and view.

Otherwise it’s quite hard to imagine what’s going on on your side…

Hi Guys

Anyone know how to do partial inline textfield? I don’t need to whole form to be inline, i’ve tried,




 <?php echo $form->textFieldRow($Company, 'areacode', array('type'=>'inline' ); ?> 

 <?php echo $form->textFieldRow($Company, 'areacode', array('labelHtmlOptions' => array("label" => false))); ?> 

 <?php echo $form->textFieldRow($Company, 'areacode', array('label'=>'false' ); ?> 

.....



But nothing works, any good way so that it will also keep the error message?

Not quite sure what you are trying to accomplish? An inline sequence of form fields in between a horizontal or vertical form… sounds like it would look weird.

How the form elements are rendered depends on the parent form (type) and you cannot switch back and forth using 1 form element hence widget only; unless you add the inline fields manually. Also, inline form elements do not show any error messages; except the inline search if I’m not mistaken.

I’m not sure what you’re trying to achieve but you could try to play around with floating vertical inputs instead.

That’s what I’ve done for similar forms.

Hi Chris! Can you please add the Help Block support in BootActiveForm, textFieldRow() and dropDownFieldRow() and other methods to (optionally) have inline help text for form fields?

Below is from the Twitter Bootstrap home page:

[html]<form class="well">

<label>Label name</label>

<input type="text" class="span3" placeholder="Type something…">

<!-- A span or p having class="help-block" needs be to added -->

<span class="help-block">Example block-level help text here.</span>

<button type="submit" class="btn">Submit</button></form>[/html]

Also please add a .well class to the Forms generated via Bootstrap Gii.

How can i contribute to this Yii Bootstrap Extension of yours? Can i commit changes myself rather than bugging you on Forums?Do you have it on Google Code?

Waiting for your reply.

Ok, this line messes things up if there are two forms:




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



If you submit one form the fields from the other form don’t have errors so they’ll get class ‘success’.

I have changed it to:




    if (isset($_POST[get_class($this->model)]))



Hey Chris thanks for the reply, and hope you are feeling a bit better. (And sorry for my half-ass questioning skills) I am current using a horizontal form, naturally there is a label, and it floats to the left of the control. (I am trying to put 3 textfields such as “country code”,“area code” & “Telephone” together with NO labels for country code and areacode. But the rest of the form I like each control be on it’s on line)

Here are the obvious:


<?php /** @var BootActiveForm $form */

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

    'id'=>'horizontalForm',

    'type'=>'horizontal',

    'enableAjaxValidation'=>true,


)); ?>


<?php echo $form->textFieldRow($Company, 'countrycode' ); ?>

<?php echo $form->textFieldRow($Company, 'areacode' ); ?>

<?php echo $form->textFieldRow($Company, 'telephone' ); ?>

.... ....



I noticed with inline form, the labels are removed, and the control can float left, how can I remove the label i suppose the question hen becomes, so I can play around with the floating.

Hey, guys!

Maybe I’m doing something wrong, but I cannot get new css styles applied to elements in HTML.

What I’ve done:

  • created a new style in utilities.less

  • changed HTML to apply the new class

  • installed less-for-bootstrap extension

What happens?

  • bootstrap.min.css is regenerated with the new class - SUCCESS



....

.nav-stripe{background:red url('/themes/bootstrap/css/images/nav-stripe.png') repeat-x left center !important}

....



  • HTML element has the right class (it is inserted in the main layout outside bootstrap elements) - SUCCESS



<div style="height:112px" class="nav-stripe">test</div>



  • Firebug doesn’t show the css class for the element - FAILED

  • Style is not applied to the element - FAILED

If I insert a new css file directly in the layout, the style gets applied correctly. :blink: :huh: … how come? the style defined in bootstrap.min.css is not applied, but the same style created in a separated css file is applied? OMG!

Does any of you have an idea or could please give me a hint to solve this? I cannot apply custom styles…

Thank you very much

Regards

Hello there,

In the progress of picking up Yii as my PHP framework, I decided to use Rights and Bootstrap as my access and GUI extension.

I installed Rights before Bootstrap and somehow, after I installed bootstrap, the Rights’s “revokes” links aren’t working. (other links and rights function are working just fine).

Any solution regarding this problem?

Hi

I want to place the popover to the right and I saw in the twitter bootstrap js project, there is a placement parameter which can have the values top,bottom,right, left.

so I added it in my code as follows:

$this->beginWidget(‘bootstrap.widgets.BootButton’, array(

'type'=&gt;'danger',


'size'=&gt;'large', 


'placement'=&gt;'right',

However, I get an error Property "BootButton.placement" is not defined.

Am I doing something wrong or is placement not defined in the yii bootstrap extension.

Thanks,

Neil

Hey guys,

i’d like to put an onlick on each BootThumbnail to open a modal (BootModal) which holds the upload form for new pictures.

BootThumbnails




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

            	'dataProvider'=>$data,

            	'template'=>"{items}\n{pager}",

            	'itemView'=>'//partials/offer/_thumb',

             	'updateSelector' => '.thumbnail',

            	'ajaxUpdate' => 'uploadModal',

            	'ajaxUrl' => $this->createUrl('offer/loadPictureForm', array('id'=>$model->id,'index'=>1)),

//            	'afterAjaxUpdate' => 'js:function(id,data)',

        	));



The strange thing is, that it calls the url of the whole page and not the specified one in “ajaxUrl”. Furthermore I do not know how to display the BootModal, as there is no ‘data-toggle’=>‘modal’

Can someone help me`?

Thanks a lot!

Take another look at the online demo for popover, you’re missing the htmlOptions that define the popover. I’m not sure how you can define the position of the popover, maybe with ‘data-placement’?

Something like this…


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

  'label'=>'Hover me',

  'type'=>'danger',

  'htmlOptions'=>array(

    'rel'=>'popover'

    'data-placement'=>'top',

    'data-title'=>'Heading', 

    'data-content'=>'Content ...', 

  ),

)); ?>

Just a suggestion, I’d like to have my URL’s in the menu’s with the class ‘active’ even if they are several layers down. For example, a link that points to ‘/customer’ will trigger active on all actions inside customer. Same goes for ‘/customer/index/someOption’ will even trigger ‘/customer/index’ as active.

My explanation is a bit weird, but the working code I have for such behavior is below:

bootstrap.widgets.BootBaseMenu


<?php

	/**

	 * Checks whether a menu item is active.

	 * @param array $item the menu item to be checked

	 * @param string $route the route of the current request

	 * @return boolean the result

	 */

	protected function isItemActive($item, $route)

	{

		if (isset($item['url']) && is_array($item['url']) && 

			(!strcasecmp(trim($item['url'][0], '/'), $route) || 

				strpos($route, ltrim($item['url'][0], '/')) === 0) )

		{

			...



Only one small change, diff:




 	protected function isItemActive($item, $route)

 	{

-		if (isset($item['url']) && is_array($item['url']) && !strcasecmp(trim($item['url'][0], '/'), $route))

+		if (isset($item['url']) && is_array($item['url']) && (!strcasecmp(trim($item['url'][0], '/'), $route) || strpos($route, ltrim($item['url'][0], '/')) === 0) )

 		{

 			if (count($item['url']) > 1)

 				foreach (array_splice($item['url'], 1) as $name=>$value)



Hi Dstudio,

I have struggled with the same issue. Apparently the url for the biitbuttons needs to be defined explicitly:




                    array

			(

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

			    'template'=>'{view}{update}{delete}',

			    'buttons'=>array

			    (

			        'view' => array

			        (

			            'url'=>'Yii::app()->createUrl("users/email", array("id"=>$data["id"]))',

			        ),

			        'update' => array

			        (

			            'url'=>'Yii::app()->createUrl("#", array("id"=>$data["id"]))',

			        ),

			        'delete' => array

			        (

			            'url'=>'Yii::app()->createUrl("#", array("id"=>$data["id"]))',

			        ),

			    ),

			),



Thanks for the extension, proved to be excellent. ( http://trazimprijevoz.com/ )

Hi

I’m using the bootstrap modal plugin and while the modal works as expected I notice an error in firebug.




jQuery("#myModal").modal is not a function


jQuery('#myModal').modal({'show':false});



Does anybody have an idea why it is showing and what I can do to get rid of it?

Thanks

Lux