Just add more CSS to remove whatever else you dont want
.mx-listview .mx-listview-item,
.mx-listview .mx-listview-item:nth-child(2n+1) {
background-color: unset!important;;
background: unset!important;
border:unset!important;
}
.mx-listview .mx-listview-list {
display:flex;
}
.mx-listview .mx-listview-list >.mx-listview-item{
padding:0px;
}
.mx-listview .mx-listview-list
.mx-listview-item
.mx-dataview
.form-group {
padding:0px!important;;
margin:0px!important;;
}
.mx-listview .mx-listview-list
.mx-listview-item
.mx-dataview
.form-group
.control-label{
display:none;
}
.mx-listview .mx-listview-list >.mx-listview-item >.mx-dataview >div .form-control-static{
padding-left:12px;
padding-right:12px;
margin-right:12px;
background:#36404e;
border-radius:12px;
border:unset;
}
First: set the referenceset 'Show label’ to no. Then change the styling.
- Easiest and uggliest: Add a style to the style-property of the Mendix-textbox: “width: 75%; float: left” and add a style to the style-property of the Referenceset-box: “width: 25%; float: left”.
- Better: add a class to the class-properties of both textboxes: yourclassMx and yourclassRef. Add this to your <projectdir>/theme/styles/css/custom.css:
.yourclassMx{
width: 75%; float: left;
}
.yourclassRef{
width: 25%; float: left;
}
- The right way:
Add this to your <projectdir>/theme/styles/sass/custom.css:
.yourclassMx{
width: 75%;
float: left;
}
.yourclassRef{
width: 25%;
float: left;
}
And then generate your css using any sass-tool. See this https://docs.mendix.com/howto7/front-end/style-with-gulp-and-sass#1-introduction
Probably you will need some tweeking like “margin: 5px; padding: 5px”. Set it to you liking.
Use a two column 6-6 weight layout grid and place the items in there. Or use css to resize them.
If you’re having questions like this it might be a good idea to first complete the learning course where many of these situations will be explained. You can follow the learnings at https://learn.mendix.com/