Style AutoComplete for Mendix same as standard Text Box

0
I have a Mendix app in 7.12 with an Atlas based UI.  In this app, I am using the AutoComplete for Mendix from AuraQ.  As you can see in the screenshot below, the AutoComplete widget is shorter than a standard text box (AutoComplete is highlighted in yellow, Textbox is outlined in red). I have tried a number of different css methods to get the AutoComplete box to be the same height as the standard Textbox, without success. Any pointers greatly appreciated!
asked
3 answers
6

Hi Mike,

You can change the height of the box by editing the widgets style sheet. Right now the height is static at 28px.

If you go to the widgets folder in your project and unzip the widget (I use 7zip), you can navigate to the style sheet by going to the ui folder.

AutoCompleteForMendix > widget >ui

The file is called "AutoCompleteForMendix" and If you open it up in a text editor, the class you want to change is ".select2-container .select2-selection--single"

 

I changed it to 37px and it looked like this.

 

Once you make the change, you need to put the changed style sheet back into the packaged widget. The easiest way I found to do this is to right click the .mpk file, click 7zip > open archive, navigate to the ui folder and drag the changed style sheet into 7zip and click the option to overwrite the existing file.

 

Hope this helps!

answered
3

An additional note to help you avodi what Robert mentioned under Austin's comment.

You can possibly avoid losing your style changes on a widgets styles by creating a custom div class in your SASS. As long as the widget developer doesn't change the class name on the widget side. The following should work.

 .newclass{

             .select2-container .select2-selection--single{

               height: 37px;

               }

}

Then set this newclass (which you can name however you want) on a contain that wrapps around the autocomplete widget.

Just extra food for thought.

answered
1

It bothered me too. Here is my solution.

I wasn't happy with just changing the height, I also wanted the padding and border color to be correct. So I copied everything from the default class .form-control and adjusted here and there.

//Set styling of auto complete widget same as normal form control
.autoCompleteMainContainer {
	.select2-container--default {
		.select2-selection--single {
			display: block;
			width: 100%;
			height: auto;
			padding: 8px 20px 8px 10px;
			-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
			-moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
			-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
			transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
			color: $font-color-default;
			border: 1px solid $border-color-default;
			border-radius: $border-radius-default;
			background-color: #FFF;
			background-image: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			font-size: $font-size-default;
			line-height: $line-height-base;
			-moz-appearance: none;
			-webkit-appearance: none;
			.select2-selection__rendered {
				color: inherit;
				line-height: inherit;
				padding: 0px;
				.select2-selection__clear {
					font-size: 36px;
					line-height: 20px;
				}
			}
			.select2-selection__arrow {
				height: 100%;
				top: 0px;
			}
		}
	}
}

Place this in your custom styling somewhere. (for example _inputs.scss and make sure it's imported at custom.scss)

Note that you might need to add some variables to _custom-variables.scss, your css compiler will mention this. Check _variables.scss for the default values.

answered