Search code examples
pythondjangodropdowndjango-grappelli

Django grappelli change column width to full screen in admin interface

I'm using django for the first time. I've experience with python but not with web development. Now I'm trying to design an admin page with grappelli. Only grappelli doesn't show the tables full screen (column width too small) and it looks horrible. Only a third of my screen is used. Is there a way to set the column width keeping the users screen size in mind. It look somewhat like this only worse. I can' t post any of the real data since it' s for scientific purposes. I tried to fins the answer as well but couldn't find any that work for me. I'm using django 1.10, python 2.7 and grappelli 2.8.2. The reason I'm using grappelli is because of the drop down filter. If anyone knows how to make a drop down filter in django that' s also fine by me.

Grapelli interface:

enter image description here

Solution

  • Try this one, or this one. They are describing how to change the width of your columns in django admin.

    EDIT

    Install your virtual environment only for your project. if you do not have installed virtualenv in your main pip execute:

    pip install virtualenv

    then create your virtual environment just for your project with:

    1. virtualenv env
    2. Activate just created env with: source env/bin/activate
    3. Install your dependencies like django or grappelli pip install django pip install django-grappelli
    4. Now you can find your files inside newly created env

    EDIT 2

    If you want to add your custom styles to your template, there is a block which basically looks like this:

    {% block stylesheets %}
    {{ block.super }}
    {{ media.css }}
{% endblock %}

    So if you want to add your custom css, just add path to your .css file. Or simply make custom css like this:

    {% block stylesheets %}
    {{ block.super }}
    {{ media.css }}
    <style> 
        .column-your_columns_name {
            width: 500px;
        }
{% endblock %}

    note that, every column can be accessed by class. Each column class is always named column-fieldname. So for example, if you have a column named price (column names are taken from models) you can access it in your styles by:

    .column-price{}