Alignment for list items

0
Hello Every One, My output is like this    This output is by listview ...I want to make it as  Tag  mendix , reference-selector  How to do this ?
asked
3 answers
1

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;
}

 

answered
1

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.

answered
0

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/

answered