Disabling widget width set by grappelli css

534 views
Skip to first unread message

vik

unread,
Aug 29, 2012, 8:36:24 PM8/29/12
to django-g...@googlegroups.com
I want to control width of my form widget width and have specified it in forms.py. The form is then called in the admin.

But when I use grappelli, it overrides the widget width I have specified. How can I disable/undo specific css definitions of grappelli?

V.

patrick kranzlmueller

unread,
Aug 30, 2012, 2:46:02 AM8/30/12
to django-g...@googlegroups.com
custom CSS?

2012/8/30 vik <vikas...@agrarianresearch.org>:

vik

unread,
Aug 30, 2012, 2:54:18 AM8/30/12
to django-g...@googlegroups.com



custom CSS?



I use widget specification in forms.py to change the width. But that is overwritten by grappelli css. Would I have to write custom css to undo it?

I would not know how to do it!!!

How do I know what css class is grappelli using?

Vikas

patrick kranzlmueller

unread,
Aug 30, 2012, 3:01:02 AM8/30/12
to django-g...@googlegroups.com
yes, you need to write custom CSS – we think that defining something
like a width should not happen within forms.py (or admin.py).

I don´t understand your question about "what css class is grappelli using?"

best,
patrick


2012/8/30 vik <vikas...@agrarianresearch.org>:

vik

unread,
Aug 31, 2012, 1:18:31 AM8/31/12
to django-g...@googlegroups.com



yes, you need to write custom CSS – we think that defining something
like a width should not happen within forms.py (or admin.py).


I understand that fixing it through css should be the right way. The problem is that I am simply unable to change width of fields in a tabular inline form from css. The widgets take an id which is different for each row of the inline formset. In a model called "member", I have a field called "name". The widgets for this take the id "id_member_set-0-name" for the first row, "id_member_set-1-name" for the second row, "id_member_set-2-name" for the third row, and so on. Given that, I do not understand how to reference it in my style file and tell that all these widgets should have the specified width.

I posed the problem on the django mailing list but got no clear answer that I could implement. Finally, the only solution that worked was to specify the width in forms.py

I shall indeed be grateful if somebody here could help in guiding me how to manipulate the css in the above example. I shall be happy to send the files over if that helps.

Vikas

Brent O'Connor

unread,
Aug 31, 2012, 2:19:32 AM8/31/12
to django-g...@googlegroups.com
I think this is what you want ...

Before CSS change:


After CSS Change:


To do this I just created the file `static/admin/css/people/people.css` with this CSS in it:

#personemail_set-group .grp-td.email .vTextField {
    width: 50px;
}

And then added the following to my admin.py for my PersonAdmin class:

class Media:
    css = {
        'all': ('admin/css/people/people.css',)
    }

vik

unread,
Aug 31, 2012, 10:44:26 PM8/31/12
to django-g...@googlegroups.com, br...@epicserve.com

I think this is what you want ...

Before CSS change:


After CSS Change:


To do this I just created the file `static/admin/css/people/people.css` with this CSS in it:

#personemail_set-group .grp-td.email .vTextField {
    width: 50px;
}

And then added the following to my admin.py for my PersonAdmin class:

class Media:
    css = {
        'all': ('admin/css/people/people.css',)
    }


Wow! This is exactly what I need.
 
This is not working for me yet. Let me try to figure out why.

Will get back soon.

Thanks very much.

Vikas

vik

unread,
Sep 3, 2012, 1:06:06 AM9/3/12
to django-g...@googlegroups.com, br...@epicserve.com
I think this is what you want ...

Before CSS change:


After CSS Change:


To do this I just created the file `static/admin/css/people/people.css` with this CSS in it:

#personemail_set-group .grp-td.email .vTextField {
    width: 50px;
}

And then added the following to my admin.py for my PersonAdmin class:

class Media:
    css = {
        'all': ('admin/css/people/people.css',)
    }


Brent,

Your solution worked beautifully. Thanks for taking the trouble to illustrate it with an example.

There are two further issues:

I think some modification is required for doing this to fields that are integer fields and fields that have a drop-down menu (created either by specifying choices or by an FK relationship). I create integer fields through a statement like this in my models.py:

ownership_plot_no = models.IntegerField()

Perhaps .vTextField needs to be replaced with something else. Will be grateful for your advice.

Thanks again,

Vikas


Brent O'Connor

unread,
Sep 3, 2012, 1:32:00 AM9/3/12
to django-g...@googlegroups.com
Just use your browser's web inspector to see what CSS you need to target, that is all I would do. 

-Brent

vik

unread,
Sep 3, 2012, 1:54:19 AM9/3/12
to django-g...@googlegroups.com



Just use your browser's web inspector to see what CSS you need to target, that is all I would do. 

-Brent

Thanks. Needed to replace .vTextField by .vIntegerField  and it worked like magic!

Vikas

vik

unread,
Sep 3, 2012, 8:03:32 PM9/3/12
to django-g...@googlegroups.com
How would I specify in the css that the label of a field in a tabularinline object should be wrapped? I am presently unable to reduce the field width to less than the space it takes to write the label. If I could make the label wrap over multiple lines, then I can reduce the width of the field.

Vikas


vik

unread,
Sep 3, 2012, 8:34:07 PM9/3/12
to django-g...@googlegroups.com


On Tuesday, September 4, 2012 5:33:32 AM UTC+5:30, vik wrote:
How would I specify in the css that the label of a field in a tabularinline object should be wrapped? I am presently unable to reduce the field width to less than the space it takes to write the label. If I could make the label wrap over multiple lines, then I can reduce the width of the field.


If I can find answers to my own questions, I must be getting hang of it:


I am happy.


Vikas
 
Reply all
Reply to author
Forward
0 new messages