Reduce space in table row and change styling of text box widget

0
I have the following row in a table:     I need to accomplish two things:   1. I need to make the text of the textbox widget bigger, the same size as the total assets text widget. (I already tried with font-size and it didn't change anything) 2. As you can see, There is  a huge space under the text on the row. This happened the moment I added the text box widget. If i use text only this does't happen.   Here is an example of how it looks when I use  a text widget instead of text box.  IMPORTANT :  I need to use a text box widget because I require the currency to be shown with the group digits function (meaning correctly formatted currency)   Any idea how can I achieve this?   Regards, Diego
asked
2 answers
1

Hi Diego

 

The root problem is that you want to show a currency with grouped digits, which is totally possible in a normal text display within Mendix. 

When you add a text widget, you are able to set parameters. In these parameters you can define the decimal behaviour of your decimal as such: 

image.png

For some additional information about this, I will refer you to the documentation: https://docs.mendix.com/refguide/text/

 

However, if you do want to go through with styling the text field (which I do not recommend), I also have a solution:

The reason for this spacing is because the text input widget by default has quite a lot of spacing at the bottom. Back in the day I created a custom css class for this issue:

 

.editablelabel {
    .form-control {
    width: -webkit-fill-available;
    position: relative;
    background-color: transparent;
    border: none;
    box-shadow: none;
    }
}
.editablelabel input[type=text] {
    height: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    text-align: center;
}
.editablelabel input[type=text]:focus {
    background-color: transparent;
}
.editablelabel .mx-validation-message {
    width: -webkit-fill-available;
    font-size: 7px !important;
}

.editablelabeledit input[type=text] {
    text-align: start;
}

 

It might need some optimizations in the code (for example because I see an !important there), but it could be a good start. It simply removes everything that makes the text input field look like an input field, and gives it a true in line feel. So feel free to play with it as you please. However, do note that I do not think you would be able to make the fonts the exact same size as your titles without it adding some spacing somewhere. 

For a quick reminder on how to style your app, please click here

answered
1

You could keep a String version of the DecCount attribute as well as the Decimal value itself. You could then update the string version in an event handler or whereever the DecCount value is changed. If you do this you can use the formatDecimal function to group the digits like in the Text Box Widget in your string. For example...

 

formatDecimal($TotalLiabilities/DecCount, '#,##0.00')

 

You can then use this new String value in the Text widget like your other content.

 

This would need to be done in a microflow as the nanoflow version of formatDecimal doesn't support this functionality.

 

I hope this helps.

 

answered