Listview Inline-block Styling. Horizontal rather than vertical view.

0
I'm trying to make my listview expand horizontally rather than vertically, but I can't figure out how to do this.  I read elsewhere on the forum to try inline-block class, but the text box in my list view takes up the entire width of the listview so not sure if that's preventing the next one from being on the same line.     Do I need to limit the size of the textbox somehow (max I need to display is only about 4 digits)?  If so how can I do that so that the next object in the listview appears next to this one rather then below.  If there are other suggestions I'm open to ideas.
asked
9 answers
3

Cole

Yes, you'll need to limit the width of your textbox using some css.  For testing purposes, you can do it in the Style box of your textbox.  Just to get it working, you could try something like:

padding-left: 5px;
width: 50px,
float: left;

Once its working you should create a custom class in your style sheets.

I think the inline-block class may also work if you make the width of the textbox fixed to a small width.

Hope that helps,

Mike

**EDIT**

I put together a small example.  Screenshots below:

Domain model:

Page

Config of Listview on page above

This class removes any listview styling as the listview row styling will interfere with trying to get the textboxes from different rows to appear on 1 row.  Also, the microflow button on this page creates and commits a new object.

Text field configuration

Result in the app

Note, this is an example.  Preferred method is to put the styling into a custom class and then use that custom class in the Class field of your Text widget.

 

answered
2

Hi,

Just to add my opinion to the thread, I have had a lot of success with horizontal lists by using flex  -

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It gives much more flexibility than floating left.

-Andrej

answered
2

You can use the CSS classes flexcontainer and flexitem to have the boxes fit on the same line horizontally.

Place the text box widgets inside a container and give the container the flexcontainer class. Give each text box widget the flexitem class. This will place each text box on the same line, horizontally.

If you want to limit the width of a text box, you can use the max-width CSS option.

answered
2

Hi,

Since I could not find the correct answer easily, I'll add the following solution:

  1. create a separate class: listview-horizontal
  2. this class should contain ‘display: flex’ and ‘flex-direction’ as shown below
    ‘overflow-x: auto’ can be used to make it larger than the screen (scrollbar will not be shown on mobile)
  3. add this class to the relevant listviews in Mendix

 

See below for a possible class definition:

.listview-horizontal {

    ul {

        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        overflow-x: auto;

        li {

            flex: 0 0 auto;

            padding: 1px;

        }

    }

}

answered
1

there are 2 ways to do this each with their own pro's and cons.

Most elements in Mendix have a width of 100%, if you give an item the class "display: inline-block" it will have the width of the element. Depending on what it is, you might also need to specify the width as well.
If you want to have 4 next to each other you will also need to give the element the class "width:25%".

the most simpelest way to achieve this would be what @jan suggested.

"Place the text box widgets inside a container and give the container the flexcontainer class.
Give each text box widget the flexitem class. This will place each text box on the same line, horizontally."

 

or just use sass

.addClassThisToYourListview{
  > ul.mx-listview-list{
    display: flex;
    > li.mx-listview-item{
      width: 25%;
    }
  }
}

 

answered
1

Hello Cole

first try this if you have the program mendix modeler 7.22.0 if no download this then maybe it works.

answered
0

Hi, when you want to use inline-block you should add to your custom css something like:

.yourownclassname .mx-listview-item {
  display: inline-block;
}

 

So you combine .mx-listview-item with your own made up class name. In this case you add the name 'yourownclassname' to your listview on the page.

 

Hope this helps.

answered
0

Hi,

I am getting list object from a microflow and below is my container with text box.

I tried to implement above solutions to get task names as horizontal list, but no success so far. Any idea why flexcontainer and flexitem class not working?

answered
0

Hi, 
In mendix version 9 
listview=> appearence tab==> style=> navigation-listview

can do this easily

answered