topic Re: UI problem with select component in Vuforia Studio

UI problem with select component

Tony_Nystrand — Tue, 08 Jan 2019 07:42:29 GMT

Hi,

I have a strange behavior when using Select-component. In the middle of the screen I have a popup container with a Select- and Button-component. When I select the Select-component to choose one of the items in the list the UI moves upwards (To keep the component visible?), but when I'm done with the selection and closes it the UI remains in the upper position, it doesn't move back to it's original position. Not until I rotate the phone (UI is then re-drawn). Is it possible to force a re-draw with JavaScript?

Also, is it possible to remove the label part from the Select-component? If I leave it blank it still occupies most of the width, I would like the value itself to occupy the whole width.

Can it be done with CSS?

In general I find it really hard to find any documentation how to style the different widgets/components with CSS.

BR,

Tony

Re: UI problem with select component

jmikesell — Tue, 08 Jan 2019 15:21:19 GMT

I have a similar setup in an experience i did a while back and I don't have the problem of it moving around. My popup is in the Left panel of the 2D layout but for the Popup widget the type is Floating and Centered is checked. this places it in the middle of the screen and it stays there on Android and iOS.

As for making the labels smaller I too would like a solution for this. I would imagine a hack method of using some JS to find the element that is the left half of the select object and modify it's width after load. But I have not tried this.

Re: UI problem with select component

Giuseppe_Fiore — Wed, 09 Jan 2019 08:20:16 GMT

for the label use this CSS for the select widget.

.newselect select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
top: 0;
bottom: 0;
right: 0;
height:auto;
width: 100%;
border: none;
background: #fff;
color: #33cd5f;
font-size: 22px;
}

insert into class .newselect and insert a blank character into Label property of select widget.

I hope I was helpful

Giuseppe

I hope I was helpful

Re: UI problem with select component

Tony_Nystrand — Wed, 09 Jan 2019 09:12:54 GMT

I tried to create the setup exactly like you described, but still the same problem.

If I move the popup-window to the top there is no problem. So it only happens when the "default-mobile-selectionlist-ui" partly covers the popup window.

Experience was built with Vuforia Studio 8.3.7 and same version on the Vuforia View app.

Re: UI problem with select component

Tony_Nystrand — Wed, 09 Jan 2019 09:17:45 GMT

I tried your css code but it still reserves some space for the label...

Re: UI problem with select component

Giuseppe_Fiore — Wed, 09 Jan 2019 10:58:41 GMT

try to add this into Application

.input-label {
display:none;
}

i can't try , i hope to solve your problem.

giuseppe.

Re: UI problem with select component

Tony_Nystrand — Wed, 09 Jan 2019 11:09:59 GMT

Sorry, but that code had no effect on the select widget.

Re: UI problem with select component

tmccombie — Wed, 16 Jan 2019 20:22:22 GMT

Can you share a screenshot of the popup within Studio and it's configuration as well as the issue on your mobile device?

For the CSS, you can make the selection be the entire width by adding 'max-width: 100%' to your custom class @Giuseppe_Fiore provided and keeping

.input-label{

display:none;

}