Search code examples
pythoncssdjangodjango-admindjango-grappelli

Change size of foreign key widget in django admin


I've spent the last two days trying to do this, and I can't figure it out. I'm using grappelli, and I've tried several things.

I tried specifying the widget:

class MyForm(ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'foreign_key': widgets.TextInput(attrs={'width': '200'}),
        }

In this case, it just seemed to be ignored.

I also tried adding css using a Media definition. This got loaded, but inspecting the element in my browse showed that it was overridden by the grappelli css.

Is there an easy way of doing this that I've missed?


Solution

  • I would re-try adding css using the media definition but this time, put a !important to your css attribute.

    .widget input {
        width: 200px !important;
    }
    

    From http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Important

    The important keyword makes a declaration take precedence over normal declarations—those that are not tagged with the important keyword. So "p { color: red ! important }" takes precedence over "p { color: green }".