about responsiveness in Nette

about a year ago

sztanp
Member | 9
+
-3
-

Silly question but what woud you recommend to build a responsive app with Nette ?

about a year ago

Thommie
Member | 23
+
0
-

Foundation is also good. https://foundation.zurb.com/.

Last edited by Thommie (2018-04-18 15:23)

about a year ago

sztanp
Member | 9
+
0
-

ok I installed bootstrap (already) but what about Nette forms (I thought responsiveness would be kinda built-in…) ?

And I just did that in vendor/nette/forms/src/Forms/Form.php :

/**
     * Returns form renderer.
     * @return IFormRenderer
     */
    public function getRenderer()
    {
        if ($this->renderer === null) {
            //$this->renderer = new Rendering\DefaultFormRenderer;
                        $this->renderer = new \Nextras\Forms\Rendering\Bs3FormRenderer();
        }
        return $this->renderer;
    }

(replaced DefaultFormRenderer with Bs3FormRenderer).

Is that a right way to use Nextras ?

I noticed that it changed my Forms, making them more “bootstrap like”, but now how should I use bootstrap features, given that I don't build my forms inside html, but with Form class… ?

Last edited by sztanp (2018-04-20 09:16)

about a year ago

GEpic
Member | 567
+
+1
-

Just render form as usually (doc here) (you don't really need to use BsFormRenderer if don't feel comfortable with it (i never used it cause you can't create precise responsive forms with it)), you can handle all situations and breakpoints individually, just wrap elements in ‘form-group’ class and add class ‘form-control’ straight to elements, for buttons you can use ‘btn btn-primary’ class or other colors, just look at bootstrap doc “how to”

Last edited by GEpic (2018-04-20 11:18)

about a year ago

sztanp
Member | 9
+
0
-

Ok thank you I begin to see that there are a lot of different possible combinations to make forms with Nette.
The problem I have as I'm trying to follow your suggestion is that I've used Multiplier to build my list of forms (basic administration page for products, with their characteritics, etc…):

return new Multiplier(function ($productId) {
                    $form = new Nette\Application\UI\Form;
                    $form->addText('name', 'nom du produit:')
                        ->setRequired('Entrer un nom pour le produit.');

                    $form->addText('details', 'description du produit:')
                        ->setRequired('Entrer une description pour le produit.');

                    $form->addText('baseprice', 'prix de base:')
                        ->setRequired('Entrer un prix de base pour le produit.');
                    $form->addHidden('productId', $productId);
                    $form->addSubmit('send', 'Modifier');
                    $form->setDefaults($this->resultSet[$productId]);
                    $form->onSuccess[] = [$this, 'productFormSucceeded'];
                    return $form;
                });

And this " template" :

{* Latte template *}

{block content}

{foreach $products as $product}
    {control productForm-$product->id}
{/foreach}

I think I need to do something more like this (very partial code :)

{* Latte template *}

{block content}

{foreach $products as $product}
    <input type="hidden" value={$product->id}></input>
    <input type="text" value={$product->name}></input>
    <input type="text" value={$product->details}></input>
    <input type="submit"></input>
{/foreach}

But how can I link the form to the actual products (which was the case using control Form via Multiplier) ?

Last edited by sztanp (2018-04-20 19:05)

about a year ago

sztanp
Member | 9
+
0
-

sztanp wrote:

Silly question but what woud you recommend to build a responsive app with Nette ?

(sorry that was too general for a question)

about a year ago

old.gandalf
Member | 17
+
0
-

Hello @sztanp,

from a short glimpse at your code, I don't understand what exactly your problem is.
How would you like to “link” the form to the actual products? The snippet with Multiplier usage seems to do exactly that, doesn't it?