Skip to Content (Press Enter)
2020-10-04 08-53-30
Paul Geven
131Views
5Comments
Solved
Bug Tablet Theme Sidebar DropDown
Question

Hi All, 

For a customer we need to built a Tablet app, so we decided to use the Tablet theme. 

when using the Tablet template, a dropdown in the sidebar doesn't work. 

in attachment an example,  i have the same example done with Base Theme or Phone theme, there it works as expected. 

when inspecting the element in tablet theme, we see that the list of elements is not always populate and if populated, the itemlist is way to the left. (750 px). 


Cheers

Paul G. 

testTabletTheme.oml
0
0
23 Nov 2017
Copy Link
2020-10-04 08-53-30
Paul Geven
Solution

Adding the follow css wil fix the issue until its fixed by OutSytems.

[data-dropdown] > div.dropdown-list{
position: relative;
left: 0px !important;
top: 0px !important;
}

See solution in context
4
0
28 Dec 2017
Copy Link
2020-10-04 08-53-30
Paul Geven

This is a working example based on phone theme.

TestPhoneTheme.oml
0
0
23 Nov 2017
Copy Link
2020-10-04 08-53-30
Paul Geven
Solution

Adding the follow css wil fix the issue until its fixed by OutSytems.

[data-dropdown] > div.dropdown-list{
position: relative;
left: 0px !important;
top: 0px !important;
}

4
0
28 Dec 2017
Copy Link
UserImage.jpg
Fernando Neto

Hi Paul,


Thanks for sharing your solution.


I was having a similar issue on a mobile device with iOS.
For some reason  it displayed properly on the emulator, but not on the mobile device.
On the device, the dropdown content had a left alignment, and the first letters of each items was being displayed behind  the side bar.

I applied the CCS above on the screens with a sidebar and a dropdown,  and it worked like a charm.

2
0
20 Jun 2018
Copy Link
UserImage.jpg
Sekander

Ferox Neto wrote:

Hi Paul,


Thanks for sharing your solution.


I was having a similar issue on a mobile device with iOS.
For some reason  it displayed properly on the emulator, but not on the mobile device.
On the device, the dropdown content had a left alignment, and the first letters of each items was being displayed behind  the side bar.

I applied the CCS above on the screens with a sidebar and a dropdown,  and it worked like a charm.

I've also encounter this problem (left alignment, and letters being displayed behind dropdown-row). Could you share your specific code with me? 


0
0
05 Oct 2018
Copy Link
UserImage.jpg
Fernando Neto

SAHD wrote:

Ferox Neto wrote:

Hi Paul,


Thanks for sharing your solution.


I was having a similar issue on a mobile device with iOS.
For some reason  it displayed properly on the emulator, but not on the mobile device.
On the device, the dropdown content had a left alignment, and the first letters of each items was being displayed behind  the side bar.

I applied the CCS above on the screens with a sidebar and a dropdown,  and it worked like a charm.

I've also encounter this problem (left alignment, and letters being displayed behind dropdown-row). Could you share your specific code with me? 



Hi Shad,

As i said on the previous answer, the solution to my problem was the one provide above by Paul Geven.

I added the following CSS to the screen where my problematic dropdown was: 


[data-dropdown] > div.dropdown-list{
 position: relative;
 left: 0px !important;
 top: 0px !important;
}


0
0
08 Oct 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.