Mendix 8 - Textbox field input height / Datagrid header radious

0
Hello all, We moved from V7 to V8 and it completely broke the styling of the app. I now have the fun task of trying to resolve the issues and I am stuck with 2 issues that are driving me up the wall. We are using the auto complete field and next to that we have an input field. The auto complete field is a different size to the input field. A class was created and used in V7 that reduces the height of the input field to 28px, where applied. In v8, this is not working correctly.  .cd-thintextbox-col .cd-thin-textbox.mx-textbox input { height: 28px; } That is what I have. The size, when using Chrome dev tools tells me it is 36 and not 28. I can apply background coloring, text coloring etc.. to the field, but the height will not adjust. Any ideas? The other issue I am facing is with data grids. We had a datagrid with a blue header, white text, top left and top right had a 10px radius applied to it. Now no matter what I try, it is applying the radius to each column and not the entire header row. This makes each column appear like a tab and not what I want. Any ideas on this?   I don’t know what the general consensus is with Mendix and styling but I find any custom styling in Mendix an absolute nightmare to deal with and the changes between 7 to 8 have made me despise it even more.
asked
6 answers
0

Here you go. I actually didn’t do the styling originally so I am trying to unpick the work of someone else which is making this a little bit more challenging.

answered
0

If the style wasn’t being applied, the height: 28px would be crossed out in Dev tools to indicate it’s being set by something else/elsewhere. Adding the !important tag to the end would mean it would then override that other styling rule being applied to it. That isn’t the case though.

answered
0

Got this to work by adjusting the padding and line-height of the element. 

Anyone have any input/thoughts on the table header radius and does anyone know how to get the paging controls to move to the other side? A simple float:left, float:right doesn’t appear to work like it does in V7. 

answered
0

V7 With radius top-left/right: 10px

 

V8 Radius:

 

V8 Dev tools:

 

answered
0

Hi Richard,

It’s a little tough to see what the problem is without seeing the css here as well, but I think that the styling is applied to the th elements instead of the tr element. Can you try to apply the styling to the tr element? Should look something like:

.cpdashboard-table table thead tr {
background: blue;
color: white;
font-weight: bold;
}

 

As for positioning of the control buttons, the element is flexed since MX8, so float doesn’t work anymore. You should apply some flex properties to the element instead. Many different solutions, but you could try something like:

.mx-datagrid .mx-grid-controlbar {
 .mx-grid-toolbar {
   flex: initial;
 }
 .mx-grid-pagingbar {
   flex: 1
 }
}

 

answered
0

Fixed the rounding of table headers:

.mx-datagrid{
    font-family: $font-family-bold;
    font-size: $font-size-small;
    & table thead  tr{
        color: white;
        background-color: $brand-primary-light;
		>th:first-child {
			border-top-left-radius: 10px;
		}
		>th:last-child {
			border-top-right-radius: 10px;
		}
    }    
}

The important part is the th:first-child and th:last-child. This means it gets applied to the first and last columns and not each column individually.

answered