Change webcombobox height?

Targets Web
1

Hello folks. I’ve been trying to shrink the height of a webcombobox with no success. Some things I’ve tried:

  • change the height in the inspector
  • tried: me.style.value("max-height") = "28px" and me.style.value("height") = "28px" in the opening event
  • create a CSS class in App HTML Header & add/load it in the opening event with “ExecuteJavaScript”
    I’ve tried so many CSS combinations like max-height, line-height, font-size, etc., with & without using “!important”, but nothing seems to work. However, I have been able to use the CSS class/App HTML Header method to make changes to the webcombobox button.
    From what I’m reading online about comboboxes, it looks like changing the height with CSS isn’t possible. Anybody know of any tricks (CSS or otherwise) you can point me to?
2

To reduce the height to 28 is not as simple as changing the value to 28px, font size, padding and other metrics will limit the height so you will need to change all of those too.

Because the Combobox is control group (2 controls in it), you will need to change for both.

See that the textfield part is changed to 28px but the actual textfield height is more than that:

image

Are you willing to change the font size, padding, etc. if needed? For example see the button triangle, is not in the middle of the blue area.

3

Thanks for answering, @AlbertoD.
I’m willing to do whatever it takes to solve this. I already have the button & arrow placement solved. Also tried setting various CSS parameters (including height) to match the button, but I’m sure there’s something I’m either doing wrong or just outright missing. Here’s what’s in App HTML Header for the button:

<style>
.combobtn .btn {
  background-color: red !important;
  color: white !important;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 18px;
  margin: 0px 0px 0px 0px;
  padding-top: 0px;
  padding-left: 8px;
}
</style>

For reference, in the webcombobox opening event, I have this:

Me.ExecuteJavaScript("document.getElementById('" + Me.ControlID + "').classList.add('combobtn');")

I originally had another class for the box defined, but ended up being confused by what might be working and what might be causing problems, so I removed it.

4

Do you want all your combobox to be 28px (using changes in style/creating new Theme) or do you want to change as needed using ExecuteJavaScript? If the second option then you will need to test because Xojo may reset the changes and you will need to execute JS every now and then.

5

I’m happy with either option, but changing all comboboxes would be ideal.

6

Try:

<style>
.input-group {
height: 100%;
}
.input-group>.custom-file, .input-group>.custom-select, .input-group>.form-control, .input-group>.form-control-plaintext, .input-group>.btn {
height: 100%;
}
</style>

You can set the size in the IDE
image

and it looks like this in the browser
image

This way you can have combobox of different sizes without ExecuteJS.
image

Note: not tested with other controls, don’t know if this will break something else.

1 Like
7

Thanks, man. Sorry, I had to make a couple of runs to the dump. I’ll give this a try in a wee bit and post back. :slight_smile:

8

@AlbertoD That works great! I still need the styles I posted above & ExecuteJavaScript for the button, but I’m totally happy with the outcome. Best of all, I don’t think any of this will interfere with my toolbar icons, as other methods have previously. Thank you very much!

1 Like
9

Is this code to put background red, icon white and icon in the middle of the button?

You can be able to do this:
image

if that is what you want, then try this code (no ExcecuteJavaScript needed):

<style>
.input-group {
height: 100%;
}
.input-group>.custom-file, .input-group>.custom-select, .input-group>.form-control, .input-group>.form-control-plaintext {
height: 100%;
}
.input-group>.btn {
height: 100%;;
background-color: red;
color: white;
line-height: 1;
}
</style>
10

I previously used just .btn on its own, but that changed the position of an icon in my toolbar dropdown menu. Do you know if your solution will do the same?

11

I haven’t tested that but because the CSS indicates a .btn inside .input-group I guess, if the toolbar is not an input-group, then it should not affect it.

Can you test and confirm?

12

I was just about to edit my post to say I’ll test it. LOL

1 Like
13

Yes, it does change toolbar dropdown menu icon & label position very slightly, but it’s only really noticeable when viewed in a desktop browser. Since this app is designed for phones, it doesn’t matter…the slight shift isn’t noticeable in the hamburger menu unless you’re looking very closely for it.
As it turns out, my original method using executejavascipt also has the same effect. I do have a a fair bit of css in an external stylesheet, so that could also be a contributing factor.

Regardless, I’m quite happy with the result of all this. Thank you again, AlbertoD!

1 Like