Column widths in TabularInline

[Vikas Rawal]

How do i customise width of different columns in a TabularInline object in my admin interface.

V.

[Mike Dewhirst]

On 25/08/2012 3:06am, Vikas Rawal wrote:
> How do i customise width of different columns in a TabularInline object
> in my admin interface.

In admin.py you can for example ...

fieldsets = (
(None, {
'classes': ['myowncssclassname',],
'fields': (
'field_abc',
'field_xyz',

... and specify myowncssclassname in myextrastyle.css then finally in
the template include myextrastyle.css in the extrastyle block

hth

Mike

>
> V.
>
> --
> You received this message because you are subscribed to the Google
> Groups "Django users" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/django-users/-/dekCUaSTkgAJ.
> To post to this group, send email to django...@googlegroups.com.
> To unsubscribe from this group, send email to
> django-users...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/django-users?hl=en.

[Vikas Rawal]

In admin.py you can for example ...

     fieldsets = (
         (None, {
             'classes': ['myowncssclassname',],
             'fields': (
                 'field_abc',
                 'field_xyz',

... and specify myowncssclassname in myextrastyle.css then finally in
the template include myextrastyle.css in the extrastyle block

I am new to django and CSS. Will try to do this. If you could kindly elaborate a bit more (perhaps give an example of how to define the widths in extrastyle.css, and where to keep that file), I shall be grateful.

I would want different width for each field. It is not clear to me how would your suggestion work since that seems to be specifying a single class for the entire fieldset.

Vikas

[Vikas Rawal]

> In admin.py you can for example ...
>
> fieldsets = (
> (None, {
> 'classes': ['myowncssclassname',],
> 'fields': (
> 'field_abc',
> 'field_xyz',
>
> ... and specify myowncssclassname in myextrastyle.css then finally
> in the template include myextrastyle.css in the extrastyle block
>

I have not been able to get this. Any further explanation would be
really useful.

In the meanwhile, I came across django-widget-tweak. Could anyone
with an experience of using it explain how it could be deployed to
customise width of a TabularInline object in admin-form.

Vikas

[Vikas Rawal]

> In admin.py you can for example ...
>
>     fieldsets = (
>         (None, {
>             'classes': ['myowncssclassname',],
>             'fields': (
>                 'field_abc',
>                 'field_xyz',
>
> ... and specify myowncssclassname in myextrastyle.css then finally
> in the template include myextrastyle.css in the extrastyle block
>

 

I have been able to define a css file as follows:

class HouseholdMemberInline(admin.TabularInline):

  model = member

  extra = 3

  class Media:

    css = {

      "all": ("my_styles.css",)

      }

There is a field in my model called "name". What do I give in the css file to reduce its width to say 100px?

Vikas

[Mike Dewhirst]

This is css rather than Django but this is what I did to make my input
field wider ...

.wider .vTextField {
width: 60em !important;
}

If you view source in your browser you should see input elements with
class="vTextField" among others depending on the type of element.

However, you should also see that each field has its own id="whatever"
so you can address each field individually in your css file using
#whatever .vTextField {...}.

A few days ago I posted a mechanism for incuding a css file which can
replace existing Django styles - as opposed to adding extra styles as I
mentioned in this thread.

>
> Vikas

>
> --
> You received this message because you are subscribed to the Google
> Groups "Django users" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/django-users/-/bCOgOcDQxx0J.

[Vikas Rawal]

> >There is a field in my model called "name". What do I give in the css
> >file to reduce its width to say 100px?
>
> This is css rather than Django but this is what I did to make my
> input field wider ...
>
> .wider .vTextField {
> width: 60em !important;
> }
>
> If you view source in your browser you should see input elements
> with class="vTextField" among others depending on the type of
> element.
>
> However, you should also see that each field has its own
> id="whatever" so you can address each field individually in your css
> file using #whatever .vTextField {...}.

The problem is that the #id is different for each row of the tabular
inline object.

it takes the form

id="id_member_set-0-name" for the first row, id="id_member_set-1-name"
for the second row, etc.

Therefore #whatever does not work. Is there a way of using regex or
something like that to cover all the above formulations of "id".

Vikas

[Mike Dewhirst]

Ok - I thought you wanted to address each one individually. If you
search django snippets for your precise requirements I'm sure something
will pop up. I haven't needed to do what you appear to need so I have no
relevant experience there.

Cheers

Mike



>
> Vikas
>

[Nicolas Emiliani]

Yes there is, but this is no django thing you are asking, using jquery you can accomplish that :

http://api.jquery.com/attribute-starts-with-selector/

 jQuery('[id^=id_member_set]').each(so_stuff)

Check the web, there is a __LOT__ of info on this.

Vikas

--
You received this message because you are subscribed to the Google Groups "Django users" group.

To post to this group, send email to django...@googlegroups.com.
To unsubscribe from this group, send email to django-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.

--
Nicolas Emiliani

Lo unico instantaneo en la vida es el cafe, y es bien feo.

[Vikas Rawal]

>
> The problem is that the #id is different for each row of the tabular
> inline object.
>
> it takes the form
>
> id="id_member_set-0-name" for the first row, id="id_member_set-1-name"
> for the second row, etc.
>
> Therefore #whatever does not work. Is there a way of using regex or
> something like that to cover all the above formulations of "id".
>
>
>
> Yes there is, but this is no django thing you are asking, using jquery you can
> accomplish that :
>
> http://api.jquery.com/attribute-starts-with-selector/
>
> �jQuery('[id^=id_member_set]').each(so_stuff)
>
> Check the web, there is a __LOT__ of info on this.

The problem I am posting it to django list is because the problem is
obviously related to the way django works. Various solutions to the
problem, none of which have worked so far, have either been using
python/django or css (and now, jquery).

I am new to all of these and would prefer if the problem could be
solved without going to jquery. It is a simple django model and I have
picked up some sense of css. But java/jquery is totally alien to me.

Vikas

[Nicolas Emiliani]

On Tue, Aug 28, 2012 at 3:47 AM, Vikas Rawal <vikas...@agrarianresearch.org> wrote:

>
>     The problem is that the #id is different for each row of the tabular
>     inline object.
>
>     it takes the form
>
>     id="id_member_set-0-name" for the first row, id="id_member_set-1-name"
>     for the second row, etc.
>
>     Therefore #whatever does not work. Is there a way of using regex or
>     something like that to cover all the above formulations of "id".
>
>
>
> Yes there is, but this is no django thing you are asking, using jquery you can
> accomplish that :
>
> http://api.jquery.com/attribute-starts-with-selector/
>
>  jQuery('[id^=id_member_set]').each(so_stuff)
>
> Check the web, there is a __LOT__ of info on this.

The problem I am posting it to django list is because the problem is
obviously related to the way django works. Various solutions to the
problem, none of which have worked so far, have either been using
python/django or css (and now, jquery).

you can not expect to use a web framework and tackle this type of issue without knowing some web basics. js/css/html are things you need to know.

 

I am new to all of these and would prefer if the problem could be
solved without going to jquery. It is a simple django model and I have
picked up some sense of css. But java/jquery is totally alien to me.

One more thing you can try is passing the attrs={'width':'100px'} params to each widget of the column fields in the form and see what happens. 

https://docs.djangoproject.com/en/dev/ref/forms/widgets/

Otherwise, I don't think you have another choice but getting into css, creating the css classes and setting them in the widgets or maybe altering the style with some js framework.

Regards.

Vikas

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To post to this group, send email to django...@googlegroups.com.
To unsubscribe from this group, send email to django-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.

[Vikas Rawal]

> The problem I am posting it to django list is because the problem is
> obviously related to the way django works. Various solutions to the
> problem, none of which have worked so far, have either been using
> python/django or css (and now, jquery).
>
>
>

> you can not expect to use a web framework and tackle this type of
> issue�without knowing some web basics. js/css/html are things you
> need to know.

I understand.

>
> One more thing you can try is passing the attrs={'width':'100px'} params to
> each widget of the column fields in the form and see what happens.�
>
> https://docs.djangoproject.com/en/dev/ref/forms/widgets/

I am not sure if this is possible with tabularinlines. But will look.
Thanks very much for your advice.

Vikas

[Vikas Rawal]

> How do i customise width of different columns in a TabularInline object in my
> admin interface.

For record, I finally managed to resize form fields using instructions
given here:

http://blogs.law.harvard.edu/rprasad/2011/08/31/django-admin-resizing-form-fields-for-tabularinline/

Thanks very much to everyone who posted responses.

Vikas