phiamo / mopabootstrapbundle

Easy integration of twitters bootstrap into symfony2

MopaBootstrapBundle

MopaBootstrapBundle is a collection of code to integrate twitter's bootstrap (http://twitter.github.com/bootstrap/) as easy as possible into your symfony (http://www.symfony.com) Project.

To use MopaBootstrapBundle and Twitter's Bootstrap 3 in your project add it via composer

Versions and dependencies

MopaBootstrapBundle	Bootstrap	Symfony	PHP
[3.4] (master)	^3.0	^4.4 || ^5.1 || ^6.0	^7.2 || ^8.0
[3.3] (3.3)	^3.0	^2.3 || ^3.0 || ^4.0
[3.2] (unmaintained)	^3.0	^2.3 || ^3.0
[3.1] (unmaintained)	^3.0	^2.3 || ^3.0
[3.0] (unmaintained)	^3.0	^2.3 || ^3.0
[2.3] (unmaintained)	^2.0	^2.3
[2.2] (unmaintained)	^2.0	>=2.1,<2.4
[2.1] (unmaintained)	^2.0	~2.1.0
[2.0] (unmaintained)	^2.0	~2.0.0
[1.x] (unmaintained)	^1.0	^2.0

Updates

New in 3.1: The way horizontal works has been slightly altered due to a change in Symfony forms. This may or may not affect some behavior of your existing forms. ALL root form elements, whether they have a parent form or not will start with horizontal === true (or whatever value you set in the config). For the most part this shouldn't affect many users.

horizontal will also correctly pass itself down to collection types (and all child forms). So if your collection is horizontal, so will the collection items. If you want your collection items only to be inline, then you can pass these options to your collection:

array(
    'entry_options' => array('horizontal' => false), //   2.8+
    'options' => array('horizontal' => false),       // < 2.8
)

horizontal_wrap_children has been removed, as this can be solved using the above options.

Branches

To use this bundle with bootstrap 3 use the latest release:

composer require mopa/bootstrap-bundle twbs/bootstrap

Or config via composer.json

For LESS:

{
    "require": {
        "mopa/bootstrap-bundle": "~3.0",
        "twbs/bootstrap": "~3.3.0"
    }
}

For SASS:

{
    "require": {
        "mopa/bootstrap-bundle": "~3.0",
        "twbs/bootstrap-sass": "~3.3.0"
    }
}

If you wish to use the current master branch, then use the following:

composer require mopa/bootstrap-bundle:dev-master twbs/bootstrap:dev-master

For bootstrap 2 use the v2.3.x branch:

composer require mopa/bootstrap-bundle:2.3.x-dev twbs/bootstrap:2.3.2

To understand which versions are currently required have a look into BRANCHES.md

Documentation

The bulk of the documentation is stored in the Resources/doc folder in this bundle In any case, if something is not working as expected after a update:

• READ the CHANGELOG!

Live Show

To see the bundle, its capabilities and some more doc just have a look on

MopaBootstrapBundle Live

Additional Resources:

• MopaBootstrapSandboxBundle - Seperate live docs from code
• symfony-bootstrap is also available

Installation

Installation instructions are located in the

• master documentation

Included Features

• Bootstrap Version detection via Composer Bridge
• Twig Extensions and templates for use with symfony2 Form component
  • control your form either via the form builder or the template engine
  • control nearly every bootstrap2 form feature
  • javascript and twig blocks for dynamic collections
• A generic Navbar class to generate your Navbar outside the template
  • helpers for dropdowns, seperators, etc.
• A generic Tab class to Manage bootstrap tabbing
• Twig templates for KnpPaginatorBundle (https://github.com/knplabs/KnpPaginatorBundle)
• Twig templates for CraueFormFlowBundle (https://github.com/craue/CraueFormFlowBundle)
• Twig template for KnpMenuBundle (https://github.com/KnpLabs/KnpMenuBundle)
  • icon support on menu links

Translations

If you use KnpPaginatorBundle with MopaBootstrapBundle, you can translate labels to your language. To do this add new file

Resources/translations/pagination.[YOUR LOCALE CODE].yml

As example you have there Polish translation.

Versioning

We aim to follow semantic versioning with our releases.

Contribute

If you want to contribute your code to MopaBootstrapBundle please be sure that your PR's are valid to Symfony2.1 Coding Standards. You can automatically fix your code for that with PHP-CS-Fixer tool.

You can see who already contributed to this project on Contributors page

License

This bundle is under the MIT license. For more information, see the complete LICENSE file in the bundle.

mopabootstrapbundle's Issues

Command line fails with new Composer update

It looks as though an update has been made to Composer which has made the isPackageInstalled() command only accept an implentation of the RepositoryInterface and not the MemoryPackage.

To replicate just self-update composer.phar

[ErrorException] Argument 1 passed to Composer\Installer\InstallationManager::isPackageInstalled() must implement interface Composer\Repository\RepositoryInterface, instance of Composer\Package\MemoryPackage given

called in

called in /vendor/mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Composer/ComposerPathFinder.php on line 38

twitter/bootstrap. No package satisfies this dependency.

Hi,

When i try to update vendors, I got this error :

$ php composer.phar update
Updating dependencies
Your requirements could not be solved to an installable set of packages.

Problems:
    - Problem caused by:
        - Installation of package "mopa/bootstrap-bundle" with constraint == 9999999-dev was requested. Satisfiable by packages [mopa/bootstrap-bundle-9999999-dev].
        - Package "mopa/bootstrap-bundle-9999999-dev" contains the rule mopa/bootstrap-bundle requires twitter/bootstrap (== 9999999-dev). No package satisfies this dependency.

Seems to twitter bootstrap doesn't exist on packagist repository.

Use of glyficon in the bundle

I can't use glyficon because the source file is under the adress : app_dev.php/img/glyphicons-halflings.png...
I am pretty lost :), need help plz

how to use navbar ?

I didn't find any documentation about navbar ...

Could someone tell me how to use it...

this does not include the bootstrap code

Form Widget Translations

Form widget labels from FOSUserBundle, eg:

{{ form_widget(form) }}

no longer translate when activating MopaBootstrapBundle:Form:fields.html.twig for the whole project. MopaBootstrapBundle:Form:fields.html.twig doesn't seem to know how to translate them.

Problem with rendering checkbox form type

First of all I want to thank for great job with this bundle :)

Now it's time for issue

In master branch with bootstrap 2 form type checkbox renders incorrectly resulting

$builder
  ->add('publicVisible', 'checkbox', array('required'=> false))

results in

<div class="control-group">
  <label class=" control-label" for="acme_mainbundle_jobtype_publicVisible">
    Publicvisible
  </label>
  <div class="controls">
    <input type="checkbox" value="1" name="acme_mainbundle_jobtype[publicVisible]" id="acme_mainbundle_jobtype_publicVisible"/>
  </div>
</div>

Above code was from copied from firebug so order of attributes might be different

/twitter/bootstrap/v2/ the wrong path?

/twitter/bootstrap/v2/ for the bootstrap deps is not the path referred to in mopabootstrapbundle.less.

error_delay not found

After a round of updates from symfony and twig i'm getting an error in this Bundle:

Variable "error_delay" does not exist in MopaBootstrapBundle:Form:fields.html.twig at line 64

Have not tracked down the exact reason for this to error out suddenly yet, any ideas?

There is no "cssembed" filter

Hello,
I don't now if it's a MopaBootstropBundle or Assetic problem but when i run mopa:generate:crud the list page throws :
An exception has been thrown during the compilation of a template ("There is no "cssembed" filter.") in "MyAppCustomerBundle:Customer:index.html.twig

I think it missing the cssembed package or configuration, but i don't find doc about this.

form_widget(form) show_legend + csrf

Hello!

Thank you for superb work :)

I am using {{ form_widget(form) }} everywhere in my project and encountered a problem when using legend + fieldset and automatic csrf tokens.

Any ideas?

Declaration HelpFormTypeExtension::getDefaultOptions()

Fatal error: Declaration of Mopa\Bundle\BootstrapBundle\Form\Extension\HelpFormTypeExtension::getDefaultOptions() must be compatible with that of Symfony\Component\Form\FormTypeExtensionInterface::getDefaultOptions()
Symfony 2.0.12

CSS still can't be found.

I've tried using less but it doesn't work in my end, so I tried the CSS approached but still not working. I tried the best I can to follow the documentation but it still the CSS can't be found. Here's what I did.

{% block head_style %}
{% stylesheets filter='cssrewrite,?yui_css'
'@MopaBootstrapBundle/Resources/bootstrap/bootstrap.css'
%}

{% endstylesheets %}

The bootstrap.css is already there but I don't know why it can't find the styles.

Any idea?

Thanks.

Issue on excuting cache:clear

Hi,
When I excuted app/console cache:clear --env=prod --no-debug ,
I received the following error:

** [out :: 192.168.5.72] Clearing the cache for the prod environment with debug true
** [out :: 192.168.5.72]
** [out :: 192.168.5.72]
** [out :: 192.168.5.72]
** [out :: 192.168.5.72] [RuntimeException]
** [out :: 192.168.5.72] Unable to load asset from URL "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
** [out :: 192.168.5.72]
** [out :: 192.168.5.72]
** [out :: 192.168.5.72]
** [out :: 192.168.5.72] cache:clear [--no-warmup]

The machine I was working with is through proxy to connect internet, and I doubt it's the reason why the above error occurs.
Is it possible to let MopaBootstrapBundle holds the jquery source code instead of fetching them by internet?

Thanks in advanced!

Wrong configuration setting in navbar_configuration_advanced.md

The navbar.service setting is no longer available. It should be:

mopa_bootstrap:
navbar: ~

SensioGeneratorBundle dependency

The bundle currently depends on the SensioGeneratorBundle causing a fatal error, if you don't have it:

PHP Fatal error: Class 'Sensio\Bundle\GeneratorBundle\Command\GenerateDoctrineCrudCommand' not found in ../vendor/bundles/Mopa/BootstrapBundle/Command/DoctrineCrudCommand.php on line 9

I would like to use this MopaBootstrapBundle bundle, but don't have the SensioGeneratorBundle (as it requires Doctrine\ORM).

My suggestion would be to add a skeleton directory parameter to the DoctrineCrudCommand of the SensioGeneratorBundle and afterwards removing the command from this bundle completely.

Add time_widget to Form/fields.html.twig view

View fields.html.twig has a lot of useful block overrides, but i missed one: time_widget.
As we have date_widget and datetime_widget, it could be useful:

{% block time_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}
        {{ block('field_widget') }}
    {% else %}
        <div class="control-group {% if errors|length > 0 %}error{% endif %}">
            {{ form_label(form, label) }}
            <div class="controls">
                {% set attr = attr|merge({'class': attr.class|default('') ~ ' inline-inputs'}) %}
                <div {{ block('widget_container_attributes')  }}>
                    {{ form_widget(form.hour, { 'attr': { 'size': '1' } }) }}:{{ form_widget(form.minute, { 'attr': { 'size': '1' } }) }}{% if with_seconds %}:{{ form_widget(form.second, { 'attr': { 'size': '1' } }) }}{% endif %}
                </div>
                {{ block('help') }}
            </div>
        </div>
    {% endif %}
{% endspaceless %}
{% endblock time_widget %}

separate concerns

This looks like a great bundle, but am wondering why you decided to create a coupling between the form builder and presentation layer (view) logic.

eg. From your demo, it appears you have currently approached the generation of bootstrap2 styles, by specifying the style classnames in the formbuilder extension, as follows:

$builder
    ->add('Appended Icon', 'text', array(
        'widget_addon' => array(
            'icon'   => 'pencil',  // why is this specified in form builder?
            'append' => true    // why is this specified in form builder?
        ),
        'attr' => array(
            'class'       => 'span1',   // why is this specified in form builder?
            'placeholder' => 'span1'  
        )
    ))
;

Since you have already built a new form theme, shouldn't the choice of what icon to display, or what css class to use, be supplied as parameters to your form widgets, all in the view layer ?

ie. something like this:

{{ form_widget(form.task, { 'attr': {'class': 'span1'} }) }}  // or 'add-on', or 'icon-pencil', or whatever class you choose?

I may be missing something, but what is the reason you decided to take the specification of styles out of the view layer and put it into the form builder?

Twitter Bootstrap 2 no longer comes with bootstrap.css

Twitter Bootstrap 2 no longer comes with bootstrap.css, if you want it it looks like you have to compile it with less first :( maybe it's worth removing it form the docs?

Remove "requirement" for twitter/bootstrap in composer

In you composer file you added the twitter/boostrap as a requirement, This is already wrong as composer does not dive into those repositories, so as your README says you need to replicate that in the project composer, having it as a requirement mean i cannot use the composer install for the bundle if i plan to get bootstrap from another source.

So in my case i have the css files in my repo, i just want Mopa to give me the symfony-goodies. With the current setup i must do this by hand as the composer install will fail on the requirement. Or i need to checkout the repository as per the README even if i don't need it.

If this is moved to "recommended" and the instructions slightly changes to instruct the install, then the bundle becomes more flexible. i.e he will need to add mopa and twitter/boostrap in the install list. or not bother with it

Avoid submodule

Could we avoid submodule or clone --recursive?

Any suggestion?

duplicate id's

the control-group div wrapper is getting the same id as the form input in field_row

BC break with Symfony2.1 (11 April)

Fatal error: Declaration of Mopa\Bundle\BootstrapBundle\Form\Extension\LegendFormTypeExtension::getDefaultOptions() must be compatible with Symfony\Component\Form\FormTypeExtensionInterface::getDefaultOptions() in /Users/Sites/vendor/bundles/Mopa/Bundle/BootstrapBundle/Form/Extension/LegendFormTypeExtension.php on line 0

Which version is stable is not specified

In a production environment should I check out tag 0.5 or branch 1.x?

Unit Testing

Hi folks, do you have any idea how to ahieve unittesting the best way for this bundle?
i could of course do string comparison for input output, but i am atm not sure if thats a nice way.
Maybe it is cause markup shouldnt change, css might.
But i would like to have some input.
Cheers Phil

Inline Inputs

I was wondering if or how you handle inline inputs. In Twitters docs they use inline inputs for date and time fields. I would like to use them for other input fields as well, for example putting firstname and lastname on the same line. Is there a way to handle this?

From Twitter's Docs...

<div class="clearfix">
    <label>Date range</label>
    <div class="input">
        <div class="inline-inputs">
                <input class="small" type="text" value="May 1, 2011">
                <input class="mini" type="text" value="12:00am">
                to
                <input class="small" type="text" value="May 8, 2011">
                <input class="mini" type="text" value="11:59pm">
                <span class="help-block">All times are shown as Pacific Standard Time (GMT -08:00).</span>
         </div>
     </div>
</div>

Choice widget renders a whole form row

form_widget() renders a whole row with the label, and {{ form_row() }} results in label and all the row markup being rendered twice.

Is there a format for required fields?

Looks like the Twitter Bootstrap guys are against required field error styles:

twbs/bootstrap#207

Does Mopa add this by any chance?

Composer incompatibility

Running $ app/console mopa:bootstrap:install now throws:

 [ErrorException]                    

  Catchable Fatal Error: Argument 1 passed to Composer\Installer\InstallationManager::isPackageInstalled() must implement interface Composer\Repository\RepositoryInterface, instance of Composer\Package\MemoryPackage given, called in /usr/local/zend/apache2/htdocs/***/vendor/mopa/bootstrap-bundle/Mopa/Bundle/BootstrapBundle/Composer/ComposerPathFinder.php on line 38 and defined in phar:///usr/local/zend/bin/composer.phar/src/Composer/Installer/InstallationManager.php line 104

I guess this has something to do with the recent changes in Composer.

How does MopaBootstrap assign error formatting?

I'm using the MopaBootstrapBundle with FOSUserBundle. Beautiful results, but one problem: Some fields like "email" or "text" show error messages as red text adjacent to the field on the right. Other fields like "password" show error messages as a red bar above the field.

Is there any way to unify this?

Displaying a session flash with raw filter

Hi,

I would add raw filter in flash macro for displaying the HTML.
In my project, I need displaying links in session flash. Actually, it displayed the HTML code instead of link.

The best is the overriding the macro or add an option or something ?

Thanks,

Weird error with new Topbar feature.

The autoloader expected class "Mopa\BootstrapBundle\Topbar\GenericTopbar" to be defined in file "/../vendor/bundles\Mopa\BootstrapBundle\Topbar\GenericTopbar.php". The file was found but the class was not in it, the class name or namespace probably has a typo.

How to include Bootstrap (for dummies)?

I've read documentation, but still don't understand how to include Bootstrap without LESS.
"Including as Submodule" and "Including automatically by composer" won't do for me, because it means some additional moves after project checkout and vendors update.
"Including as own vendor dependency in deps" get files, but how to use it?
I've tried "Including manually" but seems it does not work (assets:install does not copy files in web directory).

Symfony 2.1 Compatibility

Since 2.1 changed its Session Storage, the flash messages no longer work.
I have fixed this and will gladly send a PR but you need to decide how your branching strategy wll be to deal with 2 versions of Symfony, or if you even want to support 2.1 at this point.

Let me know and i'll submit PR's to the right branches.

Can't get glyphicons to work

The compiled less css points to the relative url: url("../img/glyphicons-halflings.png");
I put the img folder from twitter bootstrap as suggested by https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/doc/additional_info.md but they are still not found: No route found for "GET /img/glyphicons-halflings-white.png"

What am I doïng wrong?

field_help block needs to check if errors exist before display

I noticed that field errors always render at least the html markup. It looks like the check is performed after the <span and details are rendered. I would think changing the field_errors block to the following would make sense. Does that seem like a good idea?

{% block field_errors %}
{% spaceless %}
{% if errors|length > 0 %}
    <span class="help-{{ block('error_type') }}">
            {% for error in errors %}
                {{ error.messageTemplate|trans(error.messageParameters, 'validators') }} <br>
            {% endfor %}
    </span>
{% endif %}
{% endspaceless %}
{% endblock field_errors %}

form_widget general

Hello!

I've stumbled upon another matter regarding form_widget.

Let's say that you have a form that looks like this.

    ->add('profile', new EditProfileType()
            )
    ->add('username','text', array(
            'label' => 'create.username',
            'required' => false, 
            'error_bubbling' => false,
            'error_delay' => false,
            ))
    ->add('email', 'email', array(
            'label' => 'create.email',
            'required' => false, 
            'error_bubbling' => false,
            'error_delay' => false,
            ))

And of course you would like to style the form and separate 'profile' from the rest with a picture or any other content, so you would have to build your form manually in the view like so.

{{ form_widget(form.profile) }}
<div class="style"> Example content </div>
{{ form_widget(form.username) }}
{{ form_widget(form.email) }}
{{ form_rest(form) }}

This renders the following, you can see that form.profile renders ok, whilst form.username and form.email is not rendered with any styling. The last content rendered with form_rest(form) renders ok.

<div class="control-group">
    <label for="example_firstname" class=" control-label">edit.firstname</label>
    <div class="controls">
        <input type="text" id="example_firstname" name="example[profile][firstname]" value="" />
    </div>
</div>

<div class="control-group">
    <label for="example_lastname" class=" control-label">edit.lastname</label>
    <div class="controls">
        <input type="text" id="example_lastname" name="example[profile][lastname]" value="" />
    </div>
</div>

<div class="style">Example content</div>

<input type="text" id="example_username" name="example[username]" value="" />
<input type="email" id="example_email" name="example[email]" value="" />

Bug while rendering pagination with KnpPaginator

Hi,

I think the image talks itself :
http://screencast.com/t/Zj0nTx53M

When you are on an active page, KnpBundle does not render the link causing this bug.

Seem to be missing bootstrap.less

Also what would i need if i havent installed less

The js and lib dirs missing

KnpMenuBundle required for CRUD generation

KnpMenuBundle is required for CRUD ( mopa:generate:crud ). Even with this installed needs more configuration to work. However this is not documented, and should be included in the docs.

Impossible to make appear the 'delete' button on a collection

Hi,

Even in your example, the delete button does not render, why ?

3rd example : Date collections. => http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/forms/collections

The service definition "mopa_bootstrap.navbar_renderer" does not exist.

Hi,

This commit introduced a configuration error :

[InvalidArgumentException]                                               
  The service definition "mopa_bootstrap.navbar_renderer" does not exist.

Remove the class "required" on field_label

How can I remove the css class "required" on field_label ?

MopaBootstrapBundle Form Extension

Hi,

I get this error when trying to execute in the web browser.

An exception has been thrown during the rendering of a template ("The options "label_render", "widget_control_group", "widget_controls" do not exist") in MopaBootstrapBundle::base.html.twig at line 78.

Any help would greatly appreciated.

Thanks in advance!

prototype with script type="text/html"

Hey there,

I'm not sure on this, but the prototype is rendered within a script tag type="text/html". The current Chrome version does not recognize it and does not render the content. Am I missing something that I have to enable, to get it working? I would suggest using a div container element instead of the script element, as it's no script at all.

update symfony 2.0 branch

the installation docs are not up to date, rather impossible to install right now

Collection Prototype javascript not working in Symfony 2.1

On line 45 of mopabootstrap-collection.js:

var row = $(this.options.collection_id).attr('data-prototype').replace(/$$name$$/g, index);

$$name$$ is no longer the default name of a prototype. The default now, in 2.1, is __name__

Global variables in navbar.twig

Global variable such as app.user and other defined as
twig:
......
globals:
ga_tracking: UA-xxxxx-x
throws exception global Variable does not exist

Symlinking on Windows

Check and adapt the symlinking procedure to be windows compatible

big throw off when deploying

when deploying with capifony because bin/vendors doesn't git clone --recursive it will not pull the twitter boostrap

so please include the bootstrap into your bundle as this dependency can be updated at will through other ways