{"id":72,"date":"2011-08-31T20:40:23","date_gmt":"2011-08-31T20:40:23","guid":{"rendered":"http:\/\/blogs.law.harvard.edu\/rprasad\/?p=72"},"modified":"2011-09-09T18:19:37","modified_gmt":"2011-09-09T18:19:37","slug":"django-admin-resizing-form-fields-for-tabularinline","status":"publish","type":"post","link":"https:\/\/archive.blogs.harvard.edu\/rprasad\/2011\/08\/31\/django-admin-resizing-form-fields-for-tabularinline\/","title":{"rendered":"Django Admin: Resizing Form Fields (for TabularInline)"},"content":{"rendered":"

Recently, one “small”* project in particular required the resizing of fields for displaying Inline Models in the admin<\/a>.<\/p>\n

For example, one inline model, “ElectroporationConditionsRecord” needed to display 11 fields.<\/p>\n

\"\"<\/a>
\n(click image to see it full sized)<\/p>\n

Squeezing the 11 fields into a readable row meant updating the “size” attribute of each input box.\u00a0 A “default sized” input box in the admin does not include the “size” attribute, as in ‘size=”7″‘ below:<\/p>\n

\n
\n
\n
<input type=”text” size=”7<\/strong>” value=”0″ name=”id_days_of_drug_selection” id=”id_days_of_drug_selection”><\/div>\n<\/div>\n<\/div>\n<\/div>\n

One way to add the “size” attribute, or any other attribute, is by making a form and connecting it to the admin.\u00a0 For this example, three files are involved in making this happen:<\/strong><\/p>\n

my_appp\/models.py      # definition of model ElectroporationConditionsRecord\r\n       \/forms.py\r\n       \/admin.py<\/pre>\n
(1) models.py<\/strong><\/p>\n
<\/strong> Here is a snippet of the ElectroporationConditionsRecord model, from the models.py<\/strong> file:<\/p>\n
class ElectroporationConditions(models.Model):\r\n\r\n    example_target_model = models.ForeignKey(ExampleTargetModel)  # example FK\r\n    construct_name = models.CharField(max_length=40)\r\n    drug_selection = models.CharField(max_length=40)\r\n    days_of_drug_selection= models.IntegerField(default=0)\r\n(etc..)<\/pre>\n
(2) forms.py<\/strong><\/p>\n
The inline model for the ElectroporationConditionsRecord in the screenshot above uses the following form, located in the forms.py<\/strong> file:<\/p>\n
from django import forms\r\n\r\nclass ElectroporationConditionsForm(forms.ModelForm):\r\n    '''ElectroporationConditionsForm.  Used to size the text input boxes'''\r\n\r\n    class Meta:\r\n        widgets = { 'construct<\/strong>_name<\/strong>': forms.TextInput<\/strong>(attrs={'size': 20})\r\n                    , 'drug_selection<\/strong>': forms.TextInput<\/strong>(attrs={'size': 20})\r\n                    , 'days_of_drug_selection': forms.TextInput(attrs={'size': 7})\r\n                    , 'drug_concentration': forms.TextInput(attrs={'size': 7}) \r\n\r\n                    , 'dna_quantity': forms.TextInput(attrs={'size': 7})\r\n                    , 'dna_concentration': forms.TextInput(attrs={'size': 7})\r\n                    , 'linearized_by': forms.TextInput(attrs={'size': 7}) \r\n\r\n                    , 'passage': forms.TextInput(attrs={'size': 7})\r\n                    , 'peak_voltage': forms.TextInput(attrs={'size': 7})\r\n                    , 'time_constant': forms.TextInput(attrs={'size': 7})\r\n                 }\r\n# examples of other form widgets: PasswordInput, HiddenInput, Select, DateInput, etc.<\/pre>\n
Note, each key in the widgets dictionary above (e.g. ‘construct_name<\/strong>‘, drug_selection<\/strong>‘, etc.) is the name of a field in the model ElectroporationConditionsRecord.<\/p>\n
You could also substitute the “size” attribute for a css class, as in:<\/p>\n
              , 'time_constant': forms.TextInput(attrs={'class<\/strong>': 'input_sm_number<\/strong>'})<\/pre>\n
where the css might be something like:<\/p>\n
             input.input_sm_number<\/strong> { width:6opx; }<\/pre>\n
(3) admin.py<\/strong><\/p>\n
To connect the new ElectroporationConditionsForm to the model ElectroporationConditionsRecord, a change is made in the admin.py:<\/strong><\/p>\n
# For this TabularInline Admin model, use the form that sets the size attributes\r\n#\r\nclass ElectroporationConditionsAdminInline<\/strong>(admin.TabularInline):\r\n    model = ElectroporationConditionsRecord   # from models.py\r\n    form = ElectroporationConditionsForm<\/strong>      # from forms.py, sets the size attributes for the input boxes\r\n    extra=0\r\n\r\n# example of using the TabularInline Admin model defined above\r\n#\r\nclass ExampleTargetModel(admin.ModelAdmin):\r\n    # note: the ElectroporationConditionsRecord has an FK to this model, ExampleTargetModel\r\n    inlines = (  ElectroporationConditionsAdminInline<\/strong>,)<\/pre>\n
Basically, that’s it.<\/p>\n
In summary, to define the field width\u00a0 in the admin model:<\/p>\n
(a) Make a form similar to the ElectroporationConditionsForm<\/strong>, as in step (2) above.<\/p>\n
(b) In your admin.py<\/strong> file, connect the form (ElectroporationConditionsForm<\/strong>) to your model, similar to the ElectroporationConditionsAdminInline<\/strong> model shown in step (3) above.<\/p>\n
There are also other ways to do this, as seen on StackOverflow.com<\/a>.<\/p>\n
* The project is still small\/low maintenance meaning it’s just models and the Django admin. It has 39 database tables, not including the “built-in” django tables.<\/p>\n","protected":false},"excerpt":{"rendered":"
Recently, one “small”* project in particular required the resizing of fields for displaying Inline Models in the admin. For example, one inline model, “ElectroporationConditionsRecord” needed to display 11 fields. (click image to see it full sized) Squeezing the 11 fields into a readable row meant updating the “size” attribute of each input box.\u00a0 A “default … Continue reading Django Admin: Resizing Form Fields (for TabularInline)<\/span><\/a><\/p>\n","protected":false},"author":3875,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1257,50627],"tags":[],"class_list":["post-72","post","type-post","status-publish","format-standard","hentry","category-admin","category-django"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4JC3p-1a","_links":{"self":[{"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/users\/3875"}],"replies":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":34,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":94,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/posts\/72\/revisions\/94"}],"wp:attachment":[{"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}