Question

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?

Was it helpful?

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 }".

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top