WebComboBox not showing all of its contents

[Tim_Seyfarth]

Hello all,

I have a WebComboBox that is populated with several items. The box is inside of a webtabPanel that is inside a container.

The problem appears to be that the WebComboBox cannot show its entire contents unless I increase the height of the WebTabPanel. I have tried bringing the WebComboBox to the front, and the TabPanel behind but that does not work.

Is there a way to do this without increasing the height of the WebTabPanel?

BTW the underlying webpage’s height is adequate to show this.

Thanks,
Tim

[AlbertoD]

You may need to change the overflow CSS for either the Container or the TabPanel (maybe both?)

If you can create a sample I can take a look.

If I remember correctly I create a Feature Request to allow us to define the height of popups/combos, that will help in this case to show a scrollbar without overflowing the parent(s).

[Tim_Seyfarth]

Hi Alberto,

How do you change the CSS?
Tim

[AlbertoD]

Usually with .Style.Value("<CSSValue>") = "<what is needed>"

[AlbertoD]

In this case the XojoPagePanel class has the overflow: hidden directive.

Using .Style.Value code will not alter this section. Even using overflow-visible in CSS Classes will not help.

What you will need to do is either:
a) modify the overflow value in XojoPagePanel Class (that will change the behavior for all Panels), or

Code Sample

Add this to App HTML Header, this will modify all controls that use XojoPagePanel class:

<style>
.XojoPagePanel {
overflow: visible;
}
</style>

b) use JavaScript to modify the control ID Class on only the panels that you want to change

Code Sample

Put this code on Shown event for the WebTabPanel that you want to modify the overflow behavior:

ExecuteJavascript( "$('#" + Me.ControlID + "').css('overflow', 'visible')" )

[Tim_Seyfarth]

B, worked perfectly!

Thank you Alberto!

Tim

[Tim_Seyfarth]

Hi Alberto,

Where can I find a sample for doing this?

@AlbertoD

Add this to App HTML Header, this will modify all controls that use XojoPagePanel class:

ExecuteJavascript( "$('#" + Me.ControlID + "').css('overflow', 'visible')" )

Does not appear to work for WebComboboxes. It does work for WebPopupMenu’s but not for combo boxes. Is there a similar code for WebComboBoxes?

Thanks,
Tim

[AlbertoD]

@Tim_Seyfarth

It does work for WebPopupMenu’s but not for combo boxes

Looks like WebPopupMenus use a different way to show the dropdown list than WebCombobox. WebPopupMenu is not affected by the overflow: hidden for the Tab Panel.

This is how Xojo works without any ExecuteJavascript:

This is how it looks with the ExecuteJavascript in the Shown event of the Tab Panel

This is the sample project:
ForTim.xojo_binary_project.zip (8.7 KB)

@Tim_Seyfarth

Where can I find a sample for doing this?

Not sure if you are asking how to add code to App HTML Header:

or how to know where to find what needs to be put after ExecuteJavascript:
in this case I just play with the browser developer tools and see how the Xojo control is created and what is showing the browser, found that overflow: hidden limited the WebCombobox and used the Javascript to override that value.

I guess you put the ExecuteJavascript elsewhere (not in Shown event for the Tab Panel).

Edit: if your problem is somewhere else, it really help me if you upload a sample project and some pictures of what is wrong. I hope my information is helpful.

[Tim_Seyfarth]

Nice!

Very very Nice!!!

Thank you Alberto

Tim

[Tim_Seyfarth]

Well not so fast… It works as you programmed it, but when you add the container, different story.

Take a look please.

ForTim.zip (11.5 KB)

Tim

[AlbertoD]

@Tim_Seyfarth

Take a look please.

TabPanel1 with Shown event (green arrow) = correct.
TabPanel1 with Opening event (red arrow) = wrong.

Just remove the Opening event and put the code in Shown event.

Edit: no need for cntText Opening or Shown events. The ExecuteJavascript code is specific for the WebTabPanel, will not work on other controls and even if it works may not change how the web app works.

[Tim_Seyfarth]

Thank you again Alberto.

Question - aside from the obvious, what is the difference between putting it in the Opening Vs Shown events?

Thanks,
Tim

[AlbertoD]

@Tim_Seyfarth

what is the difference between putting it in the Opening Vs Shown events?

In this case, I tested in Opening event but the creation of the control overwrite the change. Puting the code in Shown event worked.

[Tim_Seyfarth]

OK, I see and that does make sense.

**Edit **
One more thing… is it possible to have the drop down be scrollable instead of a huge long list? The reason to use a WebComboBox is for its built in search capabilities. But the list (countries, states etc) can be really long!

Thanks!
Tim

[Tim_Parnell]

@Tim_Seyfarth

Question - aside from the obvious, what is the difference between putting it in the Opening Vs Shown events?

Opening occurs before the control is sent to the browser. Shown is after the DOM object has reached the browser and has been displayed. To ExecuteJavaScript on something, it must exist in the browser first. You can set framework properties on objects in Opening, but browser-side stuff (unless you’re building a custom control) needs to wait until the control has been Shown.

[AlbertoD]

@Tim_Seyfarth

One more thing… is it possible to have the drop down be scrollable instead of a huge long list? The reason to use a WebComboBox is for its built in search capabilities. But the list (countries, states etc) can be really long!

I think there is an Issue already requesting the ability for us to display the height and show the scroll bar. Not sure.

You can check or open a new feature request. Besides that, maybe GraffitiSuite has something or you will need to use the WebSDK to create your own.