Flask-Admin inline-editable list dropdown menu squished (can’t see menu items)

A picture is worth a thousand words. Here’s what I’m trying to fix in Flask-Admin:

I’m trying to edit a field from the list view by including the field in the column_editable_list of the model view. The field’s values come from another table via a foreign key relationship, so the user selects a value from the dropdown menu, which is not visible, I guess because there are too many columns in the view, so it’s squished?

Anybody know how to fix this without removing the other columns from the list view?

Here’s my model view (I’ve removed quite a few columns to simplify this a bit for StackOverflow):

class StructureView(MyModelView):
    """Flask-Admin view for Structure model (public.structures table)"""

    can_create = True 
    can_edit = True

    column_list = (
        'structure', 
        'uno', 
        'egas', 
        'power_unit', 
    )
    column_sortable_list = column_list
    column_editable_list = column_list

    column_labels = dict(
        structure="Master Structure Serial", 
        uno="UNOGAS UNO",
        egas="UNOGAS EGAS",
        power_unit="Power Unit Serial", 
    )

Here’s the underlying SQLAlchemy model:

class Structure(db.Model):
    """Create a public.structures table representation"""
    __tablename__ = 'structures'

    id = db.Column(INTEGER, primary_key=True)
    structure = db.Column(INTEGER, nullable=False, unique=True)

    egas_id = db.Column(INTEGER, db.ForeignKey('public.egas.id'))
    egas = relationship('Egas', back_populates='structures') # one-to-many

    uno_id = db.Column(INTEGER, db.ForeignKey('public.uno.id'))
    uno = relationship('Uno', back_populates='structures') # one-to-many

    power_unit_id = db.Column(INTEGER, db.ForeignKey('public.power_units.id'))
    power_unit = relationship('PowerUnit', back_populates='structures') # one-to-many

    def __repr__(self):
        return str(self.structure)

Thanks! Sean

Answer

I fixed the problem with custom CSS. Flask-Admin uses Select2 for form fields.

.select2-choices {
  min-width: 200px;
}

Advertisement

Answer