[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
My previous answer was too short. I was in a hurry. So I want elaborate it
more.
Martin wrote to have an alignment problem between the label and the text
that SQLFORM generates when the field is not writable.
Web2py in this context gives to the label of not writable field the css
class "readonly" that not to be confused with the homonym html attribute.
bootstrap gives a padding-top 7 px to the label in a horizontal form and,
in the case of a static control, suggests
*When you need to place plain text form next to a label within at form, use
> the .form-control-static class on a .*
Therefore, in order to align the text to its label we could wrap the text
in a tag (maybe using javascript) having "form-control-static" class or
assign a top padding of 7 px to the that is sibling of the label in
the rendered SQLForm
label.readonly ~ div {padding-top: 7px;}
of course the previous css rule goes in an extra .css file after bootstrap
files.
Il giorno lunedì 21 novembre 2016 16:42:54 UTC+1, Martin de Groot ha
scritto:
>
> In a SQLForm all widget-controls of writable fields are nicely, correctly
> vertically aligned with the preceding label.
>
> However, when one adds db.table.field.writable = False in the
> contrller-action function the widget-control is correctly changed from an
> input control to a read-only control, but the text of the field's value is
> placed noticeably higher than the text of the preceding label.
>
> I have been looking into the html source code of the resulting page, to
> see if I could figure out which style I could apply in an extra .css file
> statement, but I cannot find anything.
>
> I am sure many other users have observed this vertical alignment being too
> high , especially if the text in the field is just on one line.
>
> I would very much appreciate it if anyone can suggest a solution for this.
> Apart from making a custom form, which is a lot more work than using the
> SQLForm generated code.
>
> Martin de Groot
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
On Friday, December 2, 2016 at 12:37:44 PM UTC-5, Pierre wrote: > > sorry to insist Anthony > but the *select* tags (used for reference fields) are still editable with > *readonly="readonly"* > your first option with *_disabled* works for me.alignment is > perfect and it's safe > OK, got it -- yes, readonly doesn't apply to select fields, just input and textarea. Actually, thinking about it further, Sundar's approach of using "disabled" and then copying the values to hidden fields with the same names should work (as long as they have the same names, I believe SQLFORM will process them as usual). Anthony -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
sorry to insist Anthony but the *select* tags (used for reference fields) are still editable with *readonly="readonly"* your first option with *_disabled* works for me.alignment is perfect and it's safe -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
On Friday, December 2, 2016 at 6:07:41 AM UTC-5, Pierre wrote: > > the readonly prop doesn't prevent users from "messing-up" with the > readonly fields and to change their values (reference fields) at list in > the form: not very clean user interface in my opinion..:( > Yes, they do prevent the user from editing the values, that's the whole point of the "readonly" attribute. The fields can be focused, but not edited. In terms of the user interface, "readonly" is the same as "disabled", except the former can be focused, which can be a convenience, as it allows selection and therefore copying. Anthony -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
the readonly prop doesn't prevent users from "messing-up" with the readonly fields and to change their values (reference fields) at list in the form: not very clean user interface in my opinion..:( -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
On Thursday, December 1, 2016 at 5:20:22 AM UTC-5, Pierre wrote: > > It takes some javascript to make Anthony's solution work: > [form1.element(_name=f.name).update(_disabled=True) for f in rofields] > Note, I was just showing how to simplify some existing code there, but good point. In the alternative solution I proposed using the field's "widget" attribute, I switched to the "readonly" attribute, which does send back the value when the form is posted, so no Javascript necessary in that case (of course "readonly" could be used in place of "disabled" in the above solution as well). Anthony > -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
Try with
label.readonly~div{padding:7px;}
Il giorno lunedì 21 novembre 2016 16:42:54 UTC+1, Martin de Groot ha
scritto:
>
> In a SQLForm all widget-controls of writable fields are nicely, correctly
> vertically aligned with the preceding label.
>
> However, when one adds db.table.field.writable = False in the
> contrller-action function the widget-control is correctly changed from an
> input control to a read-only control, but the text of the field's value is
> placed noticeably higher than the text of the preceding label.
>
> I have been looking into the html source code of the resulting page, to
> see if I could figure out which style I could apply in an extra .css file
> statement, but I cannot find anything.
>
> I am sure many other users have observed this vertical alignment being too
> high , especially if the text in the field is just on one line.
>
> I would very much appreciate it if anyone can suggest a solution for this.
> Apart from making a custom form, which is a lot more work than using the
> SQLForm generated code.
>
> Martin de Groot
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
It takes some javascript to make Anthony's solution work:
[form1.element(_name=f.name).update(_disabled=True) for f in rofields]
disabled fields won't pass form validation without some js code in the
corresponding view:
jQuery(document).ready(function() {
$( "[class|='form']" ).submit(function(){
$( ".form-control[disabled]" ).prop( "disabled", false );
});
});
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
see also https://groups.google.com/forum/?fromgroups#!searchin/web2py/misaligned%7Csort:relevance/web2py/6Qbcr8nuey8/nVzxMOxxt_gJ On Monday, November 21, 2016 at 7:42:54 AM UTC-8, Martin de Groot wrote: > > In a SQLForm all widget-controls of writable fields are nicely, correctly > vertically aligned with the preceding label. > > However, when one adds db.table.field.writable = False in the > contrller-action function the widget-control is correctly changed from an > input control to a read-only control, but the text of the field's value is > placed noticeably higher than the text of the preceding label. > > I have been looking into the html source code of the resulting page, to > see if I could figure out which style I could apply in an extra .css file > statement, but I cannot find anything. > > I am sure many other users have observed this vertical alignment being too > high , especially if the text in the field is just on one line. > > I would very much appreciate it if anyone can suggest a solution for this. > Apart from making a custom form, which is a lot more work than using the > SQLForm generated code. > > Martin de Groot > -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
> > 2. hidden is included to make sure that the update back end operation does > not make those fields as NULL. Not sure if the below alternatives will > work: (a) using 'readonly' attribute so that the values go to the back end > - but does it happen in all the browsers? (b) may be we can remove the > disabled attribute just before submitting the form?) > Yes, but note that SQLFORM will not actually do anything with the values in the hidden fields, so you would have to write additional code to update form.vars with those values before processing the form. Anthony -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
Thanks, Anthony.
1. I thought f.name gives the name as . but for the hidden
fields and form1.element, the field name alone is required. I will make a
note of it.
2. hidden is included to make sure that the update back end operation does
not make those fields as NULL. Not sure if the below alternatives will
work: (a) using 'readonly' attribute so that the values go to the back end
- but does it happen in all the browsers? (b) may be we can remove the
disabled attribute just before submitting the form?)
3. I missed explaining r. r is the record from the database containing the
values for all the selected record and I needed to set them as the values
of the hidden field. r has been fetched before the below code in the
function.
4. Simpler codes - noted and thanks a lot for the simplification.
Sundar
=
On Tuesday, November 29, 2016 at 9:32:39 PM UTC+5:30, Anthony wrote:
>
> On Tuesday, November 29, 2016 at 8:52:07 AM UTC-5, Sundar wrote:
>>
>> Yes- it looks very bad. I think the below method will work. (Let me know
>> if you need any elaboration)
>>
>> rofields = [db..field1, .]
>> hidden = {}
>> for f in rofields:
>> fname = str(f).split('.')[1]
>> hidden[fname] = r[fname]
>> form1 = SQLFORM(db., record= , showid=True, hidden=hidden)
>>
>
> Note, to get the name of a field, just do field.name. Also, not sure why
> the hidden fields (SQLFORM won't do anything with their contents), and I
> don't see "r" defined anywhere.
>
> Some simpler code to disable the form fields:
>
> [form1.element(_name=f.name).update(_disabled=True) for f in rofields]
>
> An alternative approach is to change the widgets associated with read-only
> fields:
>
> for field in db.mytable:
> if field.readable and not field.writable:
> field.widget = lambda f, v: SQLFORM.widgets[field.type].widget(f,
> v, _disabled=True)
> form = SQLFORM(db.mytable, record).process()
>
> Anthony
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
On Tuesday, November 29, 2016 at 8:52:07 AM UTC-5, Sundar wrote:
>
> Yes- it looks very bad. I think the below method will work. (Let me know
> if you need any elaboration)
>
> rofields = [db..field1, .]
> hidden = {}
> for f in rofields:
> fname = str(f).split('.')[1]
> hidden[fname] = r[fname]
> form1 = SQLFORM(db., record= , showid=True, hidden=hidden)
>
Note, to get the name of a field, just do field.name. Also, not sure why
the hidden fields (SQLFORM won't do anything with their contents), and I
don't see "r" defined anywhere.
Some simpler code to disable the form fields:
[form1.element(_name=f.name).update(_disabled=True) for f in rofields]
An alternative approach is to change the widgets associated with read-only
fields:
for field in db.mytable:
if field.readable and not field.writable:
field.widget = lambda f, v: SQLFORM.widgets[field.type].widget(f, v,
_disabled=True)
form = SQLFORM(db.mytable, record).process()
Anthony
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[web2py] Re: How to solve vertical alignment too high of SQLForm read-only field
Yes- it looks very bad. I think the below method will work. (Let me know if
you need any elaboration)
rofields = [db..field1, .]
hidden = {}
for f in rofields:
fname = str(f).split('.')[1]
hidden[fname] = r[fname]
form1 = SQLFORM(db., record= , showid=True, hidden=hidden)
for f in rofields:
fname = str(f).split('.')[1]
try:
form1.element('input', _name=fname)['_disabled'] = 'true'
except:
pass
try:
form1.element('textarea', _name=fname)['_disabled'] = 'true'
except:
pass
try:
form1.element('select', _name=fname)['_disabled'] = 'true'
except:
pass
---
On Monday, November 21, 2016 at 9:12:54 PM UTC+5:30, Martin de Groot wrote:
>
> In a SQLForm all widget-controls of writable fields are nicely, correctly
> vertically aligned with the preceding label.
>
> However, when one adds db.table.field.writable = False in the
> contrller-action function the widget-control is correctly changed from an
> input control to a read-only control, but the text of the field's value is
> placed noticeably higher than the text of the preceding label.
>
> I have been looking into the html source code of the resulting page, to
> see if I could figure out which style I could apply in an extra .css file
> statement, but I cannot find anything.
>
> I am sure many other users have observed this vertical alignment being too
> high , especially if the text in the field is just on one line.
>
> I would very much appreciate it if anyone can suggest a solution for this.
> Apart from making a custom form, which is a lot more work than using the
> SQLForm generated code.
>
> Martin de Groot
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
