U4-7574 - Adjust grid "choose type of content" items to fit container

Created by Bjarne Fyrstenborg 17 Dec 2015, 23:39:42 Updated by Mads Rasmussen 23 Dec 2015, 08:38:28

In grid editor when creating new content with "choose type of content" dialog, the items should fit the container.

Instead of floating elements, I think it should be done using flexbox, by setting display:flex on the container instead of display:block; .. and instead of each item use float:left; it can use flex:1;

something like:

.umb-card-grid {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;

.umb-card-grid li {
    flex: 1;
    width: 90px;
    height: 80px;
    padding: 5px;
    margin: 5px;
    overflow: hidden;
    font-size: 11px;
    text-align: center;

2 Attachments


Simon Busborg 18 Dec 2015, 10:29:10

Hi @Bjarne.Fyrstenborg – Thanks for noticing :)

I have just committed some changes that solves the problem.

See my commit here: https://github.com/umbraco/Umbraco-CMS/commit/8008a3b7c551dabf07f7b571f35531f09f776262

I used the basics of your solution, but had to provide multiple options if there where more than 3 in a row.

I hope all this makes sense.

– Simon

Bjarne Fyrstenborg 18 Dec 2015, 12:12:20

@simonbusborg ahh okay, it looks great :)

Priority: Minor

Type: Cosmetics

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions: 7.4.0

Due in version: 7.4.0

Sprint: Sprint 5

Story Points: