I am using a third party lightning component in 'lightning Flow' to display dynamic questions. Some checkboxes are getting displayed via that lightning component but their width is set to 100%. I inspected the element in google chrome and found out the below code. The width:100% needs to be commented out to fix the issue.

slds-form-element_stacked:not([class*="slds-size"]), .slds-form_stacked 
.slds-form-element:not([class*="slds-size"]), .slds-form_horizontal .slds- 

{ /* width: 100%; */
     flex-basis: 100%; }

How do I add the above code in STYLE class of lightning component to reflect the change?

  • Is the third-party component you are using installed via the AppExchange? Do you have access to its source code in your org?
    – David Reed
    Apr 28, 2019 at 23:11
  • No not from appexchange but from google site. Here is the link: sites.google.com/view/flowunofficial/flow-screen-components/…
    – Student
    Apr 28, 2019 at 23:12
  • Not sure what source code should I have access to make it work but I can see helper, style, design, js file. Still not able to locate where the above code (posted in the question) lies? Need some guidance.
    – Student
    Apr 28, 2019 at 23:15
  • Easy solution: add a custom CSS to DynamicQuestionChild component. Better solution: edit DynamicQuestionChild component main file changing the classes used inside the form and/or the structure of the file.
    – gvgramazio
    Apr 29, 2019 at 7:02
  • .THIS.slds-form-element_stacked .slds-form_stacked .slds-form_horizontal { width: 3%; flex-basis: 100%; }
    – Student
    Apr 29, 2019 at 11:43


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy