displaying list view objects horizontally

0
In the sample Task app available here https://new.mendix.com/link/overview/ it uses a class called ‘listtasks' to list the tasks objects of an entity horizontally. I want to do this in my app for an image entity which uses the system.image generalisation. My question is, can I extract this (minified) css class from the task app and add it to the css for my app. If so, how and which files contain the relevant css? Thanks for any help available
asked
2 answers
1

Hi Gareth,

If you want to see the css they used, you can use f12 and find the div that has the class listtasks. If you want to see all scss of that part, you can find the location of the file in the right panel:

You can click it to see the file.

If you want to display a listview horizontally, you can use display:flex on all ul's of that listview.

 

Hope this helps!

answered
0

I have created something that can be useful with this class:

 

.list-view-horizontal{
    overflow: auto;

     /* width */
::-webkit-scrollbar {
    width: 10px;
}
/* Track */
::-webkit-scrollbar-track{
     //box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb{
    background:#888;
    border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
    background: rgb(83, 83, 83);
}
           ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
            ul li{  
                    margin: 3px;
                    border: 1px solid rgb(206, 208, 211);
                    border-radius: 10px;
                    height: 65px;
            }
            li {
                float: left;
            }

            li a {
                display: inline-block;
                color: black;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                

    }
}

Hope this helps.

answered