How do I add a horizontal scroll bar to the lightning component?

How do I add a horizontal scroll bar to the lightning component?

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: Scrollable Content Here
  3. Try to scroll the content horizontally within Salesforce1.

How do I add a scrollbar in Salesforce?

The scrollbar can be shown on a visualforce page using the inline CSS Style: “overflow:auto” in an Output Panel. And then Place your Datable inside the Output Panel. If you only need the Horizontal Scroll Bar, the height attibute can be removed.

How do you make a div scrollable in HTML?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable. < div class = “scroll” >It is a good platform to learn programming.

How to use a scroll bar in Lightning?

Here’s an example, where my component extends the Activity Description field to fit the text. Here’s the standard Activity component where the Description is limited to 10 lines and offers a scroll bar to show more.

What kind of component item provides the means to show the vertical scroll bar?

I’d like to try to mimick one of the features of the standard Activities component, where the Description field is set to show the first 10 lines and offers a vertical scroll bar to see more. What type of component item provides the means to show the vertical scroll bar and limit its size?

How are class names used in scrollable Lightning?

The selector that the class name is allowed to be used on. The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.

When to use scrollable Lightning in Adobe Acrobat Pro?

For example, when the content within an element exceeds either the width or height of the element, applying .slds-scrollable_y provides a vertical scrollbar, while .slds-scrollable_x adds a horizontal scrollbar. Sit nulla est ex deserunt exercitation anim occaecat.