Salesforce1 - Unable to scroll Lightning Components horizontally/vertically when using Lightning Design System
Trailblazer Community

Known Issues · Fixed

Salesforce1 - Unable to scroll Lightning Components horizontally/vertically when using Lightning Design System

Mobile

Last updated 2018-01-15 ·Reference W-3028274 ·Reported By 212 users

Fixed - Winter '17

Summary
The Lightning Design System contains classes for adding a horizontal/vertical scrollbar to content:

https://www.lightningdesignsystem.com/components/utilities/scrollable/

If a component using this utility is accessed through Salesforce1 then the content and scroll bars do not react to user touch for horizontal scrolling. The content that extends horizontally beyond the initial view will not be accessible to the user through touch interactions, although this will still scroll as expected when using mouse click interactions through a desktop browser.

This affects both the downloadable and mobile-browser versions of Salesforce1.

Repro
1. Create a Lightning Component that contains content that is wider than the device screen width (height if vertical).
2. Add the Lightning Design System "slds-scrollable--x" class around the content:
<div class="slds-scrollable--x">Scrollable Content Here</div>
3. Try to scroll the content horizontally within Salesforce1.

*Underlying issue is same for both vertical and horizontal scroll

Workaround
There is no workaround at this time. If a component needs to be accessed through Salesforce1 then do not include content formatted to be wider than the device screen.

Reported By (212)

Hilary Yau Chutipak Jaroonkosonsurat Tejaram Nidamanuru Hector Carballosa João Paulo Ornellas Felisberto de Lima Dive Jakobusic Sarang Deshpande Jon Rust Jean-Marc BARBIER Jaysukh Patel Nahuel Bergamo Mohan Babu K J Joe Mitchell ELJON GREENE Eljon Greene Rohan Dutta Karthik P Paarth Jolly Admin AC 3 Support 1 Sravanthi Yarava Vamshi Krishna Bashyakarla Satish Kadam Juan David Uribe Ruiz Sejida Pelivani Satoru Kimura Kfir Cohen Derek Kipps Keerti Yadav ChikPea Inc Vishal Parikh Charlotte Welle Alice Toth Stephen Noe Nadezhda Podobed Vamshi Krishna Metta Najlae Kharbouch AKASH MOHAN SINGH Gabriela Tapia Thomas Giricz Niharika Tirumani Caspar Harmer_SEIU ITC Consultant (MBR) Fabio Andree Scheurel Hoang Nguyen 김 지민 Jason Mitchell Ankit Goel vishnu Morem Reddy eFinans Admin Akin Gumusel Erhan Ceylan Admin Santanna Constantine Kurianoff Devika Pujari Erin Ferry, M.Ed. Kyle Crouse MC LOBA Hryhorii (Greg) Samodurov Naveen Kumar Christina Hildebrandt Prateek Arya Jonathan Cohen Dylan Gerow Diraj Potlapally Marian Wimmer Praneel Pidikiti Daniel Utrera Milan Boruvka Prudhvi Kanteti Sridharan Vellaisamy Ravi Doug Kells Chad Kozicki Jason Hugger Fran Johnson Alpesh Patil Virag Gandhi Rahul Gupta Shekhar Gawali Michael Gavino Shreyas Kashyap Vishnu Sai Turaga Tiago Ferreira Sai Santosh Suddula Sayuri Tanioka Antoine LELEU Rajendra Rathore Varun Chaddha SARANG DESHPANDE Grzegorz Łukasik Saurabh Mishra Fabien Taillon Jay Peters Anandhi Sowmyan Jason Kelly Noriyuki Konza Shishir Mallik Vinod Merwade CRMIT Dev Dominique Wallace Diego Gutierrez Codina Jeff Wagner Maurice Kremer jojo zhao Matt Bruederle Matt Gvazdinskas David Sparks Dan Moore Yogaraj Vadivel Vishnu Andra Hoshino Ryotaro Mattis Weiler Derek Kania Aman Aggarwal Jeremy Farber Mohamed Mzoughi Ben Dvorachek Denys Martsenko Nisar Ahmed Robert Almar Javier Combarros Gaurav Puranik Alekhya Bodingari Erik Hamelink Sebastian Gutierrez Grant Smith Samina Hanif Shane Ross Yaovi Kwasi Matthew Urbanowski Sujit Das Rick Hedin Harry Zhang Waseem Qaiser Stanley Sequeira Dilip Singh Luka Matovic Sudhir panchware Akshada Durve Lana Halapchuk Admin User Abhik Saha Akshada Durve Sujit Das Pankaj Singh Pintu Francis Junaid Khader Jennifer Burton balakrishnan s Samir EL AICHAOUI Bill Lesage Prajith Maniyath Rakesh Boinepalli Vaibhav Vora Arjun Modi Rongbo Yang Karim Jalil Satish Osuri Kevin Hart Anoop Ambooken Malay Desai Carmelo Andronaco Kamil Grzywacz Christian Menzinger Kazuhiro Watanabe 佐野 初夫 Hiroshi Yoshita 雄太 箕輪 剛史 河本 Keith Sadler Matthew Read Paul Heffernan Andrea Cruciani Reno Milewski Michał Zadrużyński Gaurav Thakur Aravind Ajith Abhishek Chaturvedi Richie Chik grzegorz pawlowski Scott Zellin hua feng zheng Aleksei Murashin Lance Davala Erik Blomquist Ben Jenkin Anand Bhardwaj Ruslan Kurchenko Erik Myklestad Onttu Lindeman Hasantha Liyanage P Cervantes Corrado Corrado Invernizzi Steve Podell Miguel Moro Álvarez Diane MacRobie Yulia Brereton Chris Howard David van Alphen Jesus Arcas Daniel Temple Chris Peterson Kevin Roberts Kaelig Deloumeau-Prigent Mark Smith Alba Azcona Andrew Fawcett Andrew Barrick Scott Bowers Liz Ichihashi Ramesh Manne Abhishek Gautam Andrew Behrman

Is it Fixed?

AP0 AP3 AP4 AP5 AP6 AP7 AP8 AP9 AP10 AP11 AP12 AP13 AP14 AP15 AP16 AP17 AP18 AP19 AP20 AP21 AP22 AP24 AP25 AP26 AP27 AP28 AUS14S AUS18S AUS16S AUS13 AUS11 AUS1 AUS28S AUS20S AUS27 AUS26S AUS25 AUS24S AUS23 AUS22S AUS2S AUS36S AUS38S AUS3 AUS4S AUS47 AUS43 AUS5 AUS58 AUS6S AUS64 AUS62 AUS60 AUS7 AUS77 AUS75 AUS9 BRA1 BRA2S BRA3 BRA4S BRA5 BRA6S BRA8S CAN1 CAN17 CAN11 CAN25 CAN2S CAN20S CAN29 CAN28 CAN27 CAN26 CAN34 CAN4S CAN6S CAN8S CS1 CS2 CS4 CS5 CS6 CS100 CS109 CS108 CS107 CS106 CS105 CS102 CS101 CS115 CS119 CS110 CS117 CS114 CS113 CS112 CS111 CS116 CS123 CS122 CS121 CS126 CS127 CS129 CS128 CS125 CS124 CS137 CS138 CS133 CS132 CS14 CS148 CS142 CS159 CS152 CS151 CS15 CS162 CS167 CS166 CS169 CS165 CS160 CS173 CS17 CS172 CS170 CS171 CS174 CS189 CS194 CS192 CS193 CS190 CS191 CS199 CS197 CS198 CS196 CS195 CS203 CS209 CS200 CS202 CS201 CS210 CS219 CS218 CS217 CS216 CS215 CS214 CS213 CS212 CS211 CS22 CS220 CS226 CS224 CS222 CS225 CS223 CS221 CS237 CS234 CS238 CS239 CS236 CS24 CS242 CS248 CS247 CS241 CS245 CS244 CS243 CS249 CS246 CS240 CS252 CS259 CS257 CS256 CS255 CS254 CS250 CS258 CS253 CS251 CS263 CS265 CS268 CS267 CS266 CS269 CS262 CS261 CS260 CS264 CS27 CS271 CS270 CS28 CS29 CS308 CS31 CS32 CS33 CS34 CS35 CS364 CS36 CS365 CS37 CS40 CS41 CS42 CS43 CS44 CS45 CS57 CS58 CS59 CS60 CS61 CS62 CS63 CS67 CS72 CS73 CS74 CS75 CS76 CS77 CS80 CS81 CS84 CS86 CS87 CS88 CS89 CS98 CS99 DEU10S DEU13 DEU11 DEU1 DEU16S DEU14S DEU12S DEU2S DEU20S DEU25 DEU36 DEU3 DEU38 DEU46 DEU4S DEU48S DEU5 DEU52 DEU50S DEU6S DEU8S EU16 EU17 EU18 EU19 EU25 EU26 EU27 EU28 EU29 EU30 EU31 EU32 EU33 EU34 EU35 EU36 EU37 EU38 EU39 EU40 EU41 EU42 EU43 EU44 EU45 EU46 EU47 EU48 FRA12S FRA19 FRA1 FRA11 FRA24S FRA2S FRA32 FRA36 FRA34 FRA4S FRA5 FRA6S FRA7 FRA8S FRA9 GBR1 GBR2S GBR4S IND14S IND17 IND19 IND18S IND16S IND15 IND13 IND11 IND1 IND12S IND10S IND20S IND27 IND25 IND21 IND23 IND2S IND28S IND26S IND24S IND22S IND37 IND3S IND39 IND41 IND47 IND4S IND43 IND54S IND5 IND6S IND7 IND8S IND9 JPN18S JPN12S JPN10S JPN1 JPN19 JPN17 JPN20S JPN2S JPN21 JPN28S JPN24S JPN22S JPN3 JPN4S JPN5 JPN6S JPN7 JPN8S KOR1 KOR2S KOR4S NA104 NA107 NA109 NA100 NA101 NA103 NA102 NA105 NA119 NA116 NA110 NA118 NA112 NA111 NA115 NA114 NA113 NA117 NA125 NA124 NA122 NA120 NA126 NA127 NA123 NA129 NA121 NA128 NA138 NA134 NA133 NA136 NA135 NA132 NA131 NA130 NA137 NA139 NA140 NA142 NA141 NA149 NA146 NA147 NA148 NA154 NA158 NA159 NA153 NA151 NA155 NA152 NA150 NA156 NA161 NA163 NA167 NA160 NA166 NA165 NA169 NA164 NA168 NA162 NA172 NA170 NA174 NA171 NA173 NA196 NA207 NA204 NA206 NA208 NA209 NA21 NA218 NA214 NA217 NA215 NA211 NA212 NA213 NA210 NA223 NA226 NA224 NA225 NA70 NA71 NA75 NA80 NA81 NA82 NA83 NA84 NA85 NA89 NA90 NA91 NA92 NA93 NA94 NA95 NA96 NA97 NA98 NA99 SGP10 SGP1 SGP2S SGP3 SGP4S SGP6S SGP8S SWE1 SWE2S SWE4S UM1 UM2 UM3 UM4 UM5 UM6 UM7 UM8 UM9 USA194S USA13 USA198S USA196S USA1 USA19 USA17 USA15 USA20S USA26 USA28S USA2S USA222S USA220 USA22S USA3S USA32S USA30S USA36 USA34 USA59 USA60S USA61 USA62S USA7 USA8S

Any unreleased services, features, statuses, or dates referenced in this or other public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make their purchase decisions based upon features that are currently available.