Customising widget widths in django-admin (using django-grappelli)

[Vikas Rawal]

I have an admin form that is rather long (many models, over 150 fields). I use TabularInlines for most of these. I am unable to adjust width of various fields to reduce the overall width of the form. Since django-grappelli overrides widths specified in forms.py, the recommended way is to use css to adjust field width.

Something like this works for text fields
#member_set-group .grp-td.education_level .vTextField { width: 20em; }

And this for integer fields:
#member_set-group .grp-td.literacy_status .vIntegerField { width: 5em; }

I do not know what to use in place of .vTextField and .vIntegerField for fields that have a dropdown menu (either ChoiceFields, or dropdown menu coming from a ForeignKey relationship. For example, the 'sex' and 'relationship' fields in the model below.

----------
class member(models.Model):
    sno = models.ForeignKey(Household)
    person_number = models.IntegerField()
    name = models.CharField(max_length=

150)
    sex_choices = (
        ('M','Male'),
        ('F','Female'),
        )
    sex = models.CharField(max_length=3,choices=sex_choices)
    age = models.CharField(max_length=30,blank=True)
    relationship = models.ForeignKey(CodeRelationship, blank=True, null=True, on_delete=models.SET_NULL)
    nearest_relative_member = models.IntegerField("Person number of nearest member relative", blank=True,null=True)
    nearest_relative_name_if_non_member = models.CharField("Name of nearest relative, if not a household member",max_length=4,blank=True)
    marital_status_choices = (
        (1, 'Single'),
        (2, 'Currently married'),
        (3, 'Divorced/separated'),
        (4, 'Widowed'),
        )
    marital_status = models.IntegerField(choices=marital_status_choices,blank=True)
    literacy_status = models.IntegerField(null=True, blank=True)
    education_level = models.CharField(max_length=150, blank=True)
    name_and_location_educational_institution = models.ForeignKey(CodeEducationInstitution, blank=True, null=True, on_delete=models.SET_NULL)
    comments = models.CharField(max_length=600, blank=True)

----------

I also tried assigning custom css classes to each of the widgets in forms.py as follows:

----------
class HouseholdMemberForm(forms.ModelForm):
  class Meta:
    widgets = { 'person_number': forms.TextInput(attrs={'class': 'wide5'})
                , 'name': forms.TextInput(attrs={'class': 'wide15'})
                , 'sex': forms.ChoiceField(attrs={'class': 'wide5'})
                , 'age': forms.TextInput(attrs={'class': 'wide5'})
                , 'nearest_relative_member': forms.TextInput(attrs={'class': 'wide5'})
                , 'nearest_relative_name_if_non_member': forms.TextInput(attrs={'class': 'wide5'})
                , 'marital_status': forms.TextInput(attrs={'class': 'wide5'})
                , 'literacy_status': forms.TextInput(attrs={'class': 'wide5'})
                , 'education_level': forms.TextInput(attrs={'class': 'wide15'})
                , 'comments': forms.TextInput(attrs={'class': 'wide5'})
                }

---------

If I could set the width of all fields with css class wide5 to 5em, the job will become much simpler, since I would not need to specify width to each field individually.

But the following has no effect.

#member_set-group .wide5 { width: 35px;
                                              padding: 1px;     
                                              }

Would appreciate if somebody could guide me here.

VR