Determining element widths

In the previous chapters and the sample examples for the renderers, we came across the topic of element widths. For example, let's review how to set the default width of labels and input elements on a form:

$form->renderer()->setDefaultLabelWidth( [
    
Form_Renderer::LJ_SIZE_EXTRA_SMALL => 12,
    
Form_Renderer::LJ_SIZE_SMALL => 12,
    
Form_Renderer::LJ_SIZE_MEDIUM => 2,
    
Form_Renderer::LJ_SIZE_LARGE => 2
] );
$form->renderer()->setDefaultFieldWidth( [
    
Form_Renderer::LJ_SIZE_EXTRA_SMALL => 12,
    
Form_Renderer::LJ_SIZE_SMALL => 12,
    
Form_Renderer::LJ_SIZE_MEDIUM => 10,
    
Form_Renderer::LJ_SIZE_LARGE => 8
] );

As already mentioned and as you have noticed if you have explored the view scripts of the sample application, it uses the Bootstrap framework and you probably immediately recognized the grid in the Bootstrap framework.

And that's exactly the point. The point is that the page is divided horizontally into parts and so on... But you know that, and if you don't, see for example the description of that Bootstrap grid system.

WARNING! At first glance, it clearly looks like Jet is tied to Bootstrap. This is absolutely not the case. Renderers do not count on any particular framework at all. What HTML is ultimately generated is the job of the view scripts, the framework itself does not determine that in any way. However, the point is that this grid system is (probably) a good way to approach the problem.

It's just good to have some system and order in the page layout. And how does that order eventually translate into HTML and CSS? That's another thing - the least important, but there are many ways to do it.

So Jet offers a way to work with the grid system. And the sample application uses this possibility. However, if you replace Bootstrap with anything else for your application, that's perfectly fine and that's the intention - that's how Jet is supposed to work. However, you always have the option to use the width settings and especially to interpret them in the view as you need.

Even the methods for setting widths simply expect an associated array, and how you set the widths even on the definition side can be entirely up to you.

Previous chapter
Jet\Form_Renderer_Field_Input_WYSIWYG
Next chapter
Translation of the form