quick form styling question

36 views
Skip to first unread message

Dave S

unread,
Sep 3, 2022, 8:19:42 PMSep 3
to web2py-users
Warning: everything I know about BootStrap (BS4) I've learned from the examples, so I Don't Know Much.

I have a form with 2 integer fields, one with a label, and the other uses the input ID for a label.  If I use FORM(), the fields come out appropriately sized for about 6 digits and side by side.  If I use SQLFORM.factory(), the fields come out 100% of a div with class "col-sm-9", which is huge.   I like the look of the FORM() results, but I want autofocus and other support of the factory form.

How can I wrestle the latter to look more like the former?  I can change the width of the whole form (_style = "width:  50%"), but that line doesn't work in the field itself, and the inputs remain as separate divs.  The class defaults to "form-horizontal", so I tried setting it to "form-vertical", but that didn't work ... I was adding a class, not replacing a class.

(And beside,s that raises the question, what are those two classes really doing?)

Thanks for any advice,

Dave S
/dps

Silvian Cedru

unread,
Sep 4, 2022, 10:51:28 PMSep 4
to web2py-users
Can you show me a picture how it looks right now and post the css so I have an idea ?

Dave S

unread,
Sep 6, 2022, 2:08:08 AMSep 6
to web2py-users
On Sunday, September 4, 2022 at 7:51:28 PM UTC-7 silvia...@gmail.com wrote:
Can you show me a picture how it looks right now and post the css so I have an idea ?


It's all in-box stuff,  and with SQLFORM.factory() I set  autofocus by specifying that in the widget option for the appropriate field.
                Field('firstid',
                      requires=[IS_NOT_EMPTY(),IS_INT_IN_RANGE(99900,105000)],
                      label = "Need picture IDs to swap",
                      widget = lambda f, v: SQLFORM.widgets.integer.widget(f, v, _autofocus=True)),

Adding                       
                   _class = "col-sm-3",
does not change the field appearance, because it doesn't override the default class.

Adding 
                    _style = "width: 50%",
to the field does not change it's appearance,  but moving it to the enclosing form definition shrinks the width, but still has two rows stacked.

If I use FORM(), I get the single row picture, but not widgets.

/dps
form form.jpg
form factory.jpg

Dave S

unread,
Sep 6, 2022, 2:12:32 AMSep 6
to web2py-users
On Saturday, September 3, 2022 at 5:19:42 PM UTC-7 Dave S wrote:
Warning: everything I know about BootStrap (BS4) I've learned from the examples, so I Don't Know Much.


Slightly related question:  what is the best widget for a factory form field using IS_IN_SET[ .. several strings ...]?  If I leave it default, I get a pull-down caret on the right, and autocompletion, but no cursor token to show the field is active.  if I use SQLFORM.widgets.strings.widget, I get the curson but no pull-down or autocomplete.

/dps


Silvian Cedru

unread,
Sep 6, 2022, 2:26:57 AMSep 6
to web2py-users
What you actually could do is put the class in the <style></style> section of the page and overwrite it manually . Give it for example class ".A {    width: 50% !important; }"

Dave S

unread,
Sep 7, 2022, 9:02:45 AMSep 7
to web2py-users
On Monday, September 5, 2022 at 11:26:57 PM UTC-7 silvia...@gmail.com wrote:
What you actually could do is put the class in the <style></style> section of the page and overwrite it manually . Give it for example class ".A {    width: 50% !important; }"


Thanks.

/dps
Reply all
Reply to author
Forward
0 new messages