Skip to main content
T
Tony_Nystrand1-Visitor
1-Visitor
January 8, 2019
Solved

UI problem with select component

  • January 8, 2019
  • 1 reply
  • 5831 views

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

Best answer by tmccombie

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;

}

 

selector.jpg

1 reply

J
jmikesell1-Visitor
1-Visitor
January 8, 2019

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.

G
Giuseppe_Fiore15-Moonstone
15-Moonstone
January 9, 2019

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

T
Tony_Nystrand1-VisitorAuthor
1-Visitor
January 9, 2019

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

Terms & ConditionsAccessibility statement