So you want a Material Design Combobox …

So you want a Material Design Combobox …

There was a recent conversation on our Facebook Group, concerning creating combo boxes that match the Material Design Style edit boxes, you know the type with the caption above the entry but inside the input area. Although PCSOFT has made it pretty easy to get exactly what we want for edit controls, combo boxes haven’t caught up yet. I did a little playing today and here’s what I came up with.

You can see the effect live in our wxQuickbooks demo, if you go to the item browse, and then edit an Inventory Item, you will see 4 of these combo boxes along with an edit control.

2020-05-16 17_51_02-Pete's Development Desktop

Before we get started, I should mention, my solution isn’t perfect and probably be improved with a bit of fancier CSS, or possibly some jQuery, and I haven’t put this in production and beat up on it, but if nothing else it should let you play we it and tweak it into what you want.

Let’s look at the style Edit Control first.

2020-05-16 18_42_13-Pete's Development Desktop

It’s those 2 position settings for the caption that makes it so easy to set up edit controls. Notice I am using the Manual option which lets me tweak the CSS the way I like.

Click on the overrides, you will see I am changing the color of the text on Edit

2020-05-16 18_46_30-Pete's Development Desktop

And I have added a bit of Custom CSS which is where the real magic happens

2020-05-16 18_47_51-Pete's Development Desktop

On to the input area, to make it “Material Design Style” we want just a line under the edit control and not an entire border. First, we need to switch the element to the Input area (CSS)

2020-05-16 18_50_25-Pete's Development Desktop

Then again click on overrides and on the border tab you will see I am doing a full border but the Top, Left, and Right are the same as the background color. The reason for this if we try to make it just a bottom border something happens, I don’t know if it is other CSS or just standard browser behavior but I end up with a light border anyway. By making the other 3 sides match the background I prevent that and have the appearance I want, and despite what your mother told you sometimes appearances matter.

2020-05-16 18_52_14-Pete's Development Desktop

On the Edit status, you will see I make the line blue and 2 pixels thick

2020-05-16 18_56_45-Pete's Development Desktop

Hint: After those changes, if you are still getting a border, you might check the shadow tab and make sure there isn’t a shadow set.

Now let’s look at the style for our combo boxes. As I mentioned we don’t have those two positions options and that’s why we have to work much harder.

2020-05-16 19_02_15-Pete's Development Desktop

My solution involves not showing the caption at all, we still set it, and you will see why shortly, but when we put the control on the page, we leave off the caption area. Normally it would look like this

2020-05-16 19_06_14-Pete's Development Desktop

But by sliding over the red box between the caption and the entry area we can remove the caption

2020-05-16 19_07_19-Pete's Development Desktop

What we are going to do instead of the standard caption is in the HTML before property we are going to stuff in a <Label> element with our own code. Of course, I don’t want to hard code this for every Combobox and then, later on, have to tweak the code so I made a simple procedure

PROCEDURE AddComboCaption(inControlName)

tmpString is string = [
<label style="position: absolute;transform: translateY(-8px) scale(0.93);">[%{inControlName}..Caption%]</label>
RESULT tmpString

This accepts a controls full name, with page name etc., and returns the label tag as we want it, you might recognize some of that CSS from the Custom CSS we had on the entry control. Notice it is using the ..Caption property, which is why we set the caption like normal when we set up the control.

Now in the Initializing event of the combo boxes, we put in a bit of standard code.

MySelf..HTMLBefore = AddComboCaption(MySelf..FullName)

For clarities sake, here is a screenshot of the code for the ItemForm

2020-05-16 19_15_32-Pete's Development Desktop

And just like that “Pete’s your Uncle”, you got a combo box in the “Material Design Style”. If you improve on my implementation please be sure to share with the rest of us.

… Here’s hoping PCSOFT adds the Position options to the combo box caption with v26, so we don’t need a workaround like this!










One thought on “So you want a Material Design Combobox …

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s