[Silk UI Mobile] Wrong Combobox CSS

[Silk UI Mobile] Wrong Combobox CSS

  
Forge Component
(24)
Published on 14 Jun by Labs
24 votes
Published on 14 Jun by Labs

With the new version, our combobox are like this: 




How can we fix this? 


Tks

Hello 

Sorry, probably from being Sunday, but...

What exactly is the problem?

Cheers,

Eduardo Jauch

The combobox's values show up far below the combobox.

For instance, in the first printscreen, the values are not below the combobox. Are like 200px below. 

Ah!

I see.
If I'm not wrong, you can add this to the CSS of your application:

.DropdownMenu {
    top: 100%;
}

(or top: 0; don't remember, try both ;) rs)

Cheers,
Eduardo Jauch

Tried both and it didn't work.

Tks!

Can you provide a small OML so I can test some possibilities? This is probably just a matter of overriding the CSS selector that is doing this.

P.S. Besides, the CSS I used was to DropDown Button, not DropDown List. Sorry

I've being looking to the DropDown list (is this the widget you are talking, right?)
And it seems that the "top" (and other characteristics) are defined through JavaScript.

So, it would be really cool if you could provide an OML that reproduce the behavior you have (I didn't saw it in my application), so that we can find why it is happening.

Cheers,
Eduardo Jauch

Solution

Is the dropdown inside a List?

If it is, the problem is caused by a recent change where the List has a translateZ(0) to prevent rendering issues on iOS. The side effect is that fixed elements inside the list are positioned relatively to that list and not to the screen.

You can fix the position of the dropdown with CSS (unfortunately to override the JS values you'll need to use !important in the CSS) or you can remove the "transform: translateZ(0)" for that List to have the previous behavior.

Solution

Dinis Carvalho wrote:

Is the dropdown inside a List?

If it is, the problem is caused by a recent change where the List has a translateZ(0) to prevent rendering issues on iOS. The side effect is that fixed elements inside the list are positioned relatively to that list and not to the screen.

You can fix the position of the dropdown with CSS (unfortunately to override the JS values you'll need to use !important in the CSS) or you can remove the "transform: translateZ(0)" for that List to have the previous behavior.

Hi Dinis,

Didn't know about tis change.
Thanks! 

Eduardo Jauch

Sorry for the late reply but I forgot to check this 'til the support said it was already answered here. 

Many thanks