2

I have Lightning Parent component that has three inner Lightning components:

<aura:component>
   <c:searchComponent/>
   <c:newRequest/>
   <c:requestsList/>
<aura:component>

c:newRequest component has several force:inputField components to display fields for New Request. Based on search query in c:searchComponent I want to show/hide c:newRequest or c:requestList. To implement that I added new event to call function with addClass/removeClass. Markup:

<aura:component>
   <c:searchComponent/>
   <div aura:id="newRequest">
      <c:newRequest/>
   </div>
   <div aura:id="requestsList">
      <c:requestsList/>
   </div>
<aura:component>

Toggle logic works great but now I can't see force:inputField components! I tried to remove div aura:id="newRequest" and force:inputField components displayed correctly. Is that Lightning issue? What is the best practice to handle similar functionality?

marked as duplicate by martin, Santanu Boral, Martin Lezer, Raul, Ratan Paul Mar 27 '17 at 9:32

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

0

Try to use lightning:input instead of force:input. There's a bug in this components.

In another hand, this component doesn't inherit the Lightning Design System styling. Use lightning:input if you want an input field that inherits the Lightning Design System styling.

If you needs to add some layouts to divide with custom classes, use lightning:layout & lightning:layoutItem, that works like bootstrap config.

0

I found that is Salesforce Known issue.

Workaround is to create apex method to get picklist values from the schema and add them to the lightning:select component using iteration.

Not the answer you're looking for? Browse other questions tagged or ask your own question.