CSS Border Issues

0
For the application I’m working on, I’m trying to use a vertical border to separate two columns in a layout grid, and I ran into the below shown design issue. For whatever reason, even though I have the border set for the inside of the columns, the border is not reaching to the bottom of the cell (the information is being displayed in a list view). Sometimes editing the text a little bit, or changing the border from being on the right side of the left column, to the left side of the right column, helps, however it is inconsistent. Is there a way to have some sort of border or line that separates the two columns that can grow with the text fields that are displaying the information? Thank you so much!
asked
1 answers
0

Hi Matthew,

The cleanest way I’ve found to achieve adding these types of properties to a Data Grid or List View is to use design properties, creating your own design system properties that you can use for individual list views and then easily reuse across your apps.

https://docs.mendix.com/howto/front-end/create-a-company-design-system

https://docs.mendix.com/howto/front-end/extend-design-properties

 

Here’s a simple how to that creates a new design property called ‘Inside borders’ for Data Grid in your own custom design system.

 

In your app create a new module, right click the top level App folder, call it ‘DesignSystem’ or something similar.

Right click the new module and click ‘Mark as UI resources module’ (The module icon will turn green)

Open up File Explorer and navigate to the root folder of your app, under this navigate to

< App root folder > / themesource / designsystem / web  (Replace designsystem with the name of the new module)

 

 

You’ll see two file templates in this directory

design-properties.json

main.scss

 

Open design-properties.json and add in the following, you can use text/code editor, my preference is Visual Studio Code

{
    "DataGrid": [
        {
            "name": "Style",
            "type": "Dropdown",
            "options": [
                {
                    "name": "Inside borders",
                    "class": "grid-inside-borders"
                }
            ]
        }
    ]
}

 

This defines a new design property called ‘Inside borders’ that you’ll be able to select from the Appearance tab in any Data Grid, which is associated with a new class called ‘grid-inside-borders’ which we’ll now define in the other file ‘main.scss’

 

Open main.scss 

Under the import line at the top of the file add the following, you can customise the border styling to your requirements

.grid-inside-borders.mx-grid {
    table {
        border: unset;
        th {
            border: unset;
        }

        tbody tr {
            td {
                border: none;
                border-right: 1px solid black;
            }
            td:last-child {
                border: none;
            }
        }
    }
}

 

This effectively removes all borders apart from having a solid border between columns in your grid.

 

Back in Studio Pro select ‘App’ > ‘Synchronize App Directory’

Open your Data Grid properties and on the last tab ‘Appearance’ scroll down to the Style section, you’ll now have a new style property you can select 'Inside borders’

 

 

Here’s the running app with the Data Grid 

 

You can extend the design properties of any component in Mendix in the same way.

 

 

answered