1

Migrate this code from Aura to a LWC. After doing so I implemented some JavaScript into my LWC and it is breaking the UI I created. The UI is inside of a modal window and is only being touched by the "Select Service" checkbox button to have changes happen to it. The "Out of Area" is hidden by a template tag if the box is checked. Before this part was added in, the borders were not being truncated or being combined into other tags. I.E. the 'XYZ Person Services' wasn't on the upper line and the slds-border_bottom stretched across the modal. I am needing help trying to figure out why this is breaking the UI. Picture 1 is the closest thing to it being normal, just needing to have the slds-border_bottom to stretch across. I attempted adding this first into a lightning-layout but it didn't fix it, had the same affect as pic 2. Any help would be greatful!

Here is the code I have for html:

<template>
     <lightning-button variant="brand"
        label="Search People"
        title="Search people"
        onclick={openModal}
        class="slds-m-left_x-small">
     </lightning-button> 
     
     <template if:true={isModalOpen}>
         <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
 aria-describedby="modal-content-id-1" class="slds-modal
 slds-fade-in-open">
             <div class="slds-modal__container">
                 <!-- Modal/Popup Box LWC header here -->
                 <header class="slds-modal__header">
                         <lightning-button-icon icon-name="utility:close"
                             class="slds-modal__close"
                            icon-class="slds-button_icon-inverse"
                            title="Cancel Search"
                             onclick={closeModal}></lightning-button-icon>
                     <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Add Person</h2>
                 </header>
                 <!-- Modal/Popup Box LWC body starts here -->
                 <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                     <div class="slds-text-body_small slds-border_bottom">
                         <div class="slds-float_left">Found 2 results for this "searched Term"</div>
                         <div class="slds-float_right"><lightning-input type="checkbox" label="Select Service" onchange={handleFilter}</div>  
 
                     </div>
                     <lightning-layout> <div class="custom-box slds-border_bottom">
                      <p>XYZ Person Services</p><div class="slds-float_right slds-badge">Select Person</div>
                      <p class="slds-text-body_small">1234 Sundrive Lane, Raleigh NC 27617</p>
                      <p class="slds-text-body_small"><a href='#'>123 456 5678</a> | <a href='#'>xyz@email.com</a> | <a href='#'>www.xyzpeople-nc.com</a></p>
                      <p><lightning-button label="View Details" title="View Details"></lightning-button></p>
                     </div>
                     </lightning-layout>
                     <template if:false={areOutofServiceVisible}> <div class="custom-box slds-border_bottom">
                      <p>ABC People Shop</p><div class="slds-float_right slds-badge slds-theme_warning">Out of
 Area</div>
                      <p class="slds-text-body_small">82 Lakeview Road, Chicago IL 60607</p>
                      <p class="slds-text-body_small"><a href='#'>123 456 5678</a> | <a href='#'>abc@email.com</a> | <a
 href='#'>www.abcpeopleshop.com</a></p>
                      <p><lightning-button label="View Details" title="View Details"></lightning-button></p>
                     </div>
                     </template>
                 </div>
                 <!-- Modal/Popup Box LWC footer starts here -->
                 <footer class="slds-modal__footer slds-modal__footer_directional">
                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Refine Search">Cancel</button>
                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
                     <button class="slds-button slds-button_brand" onclick={addPeople} title="Add">Add</button>
                 </footer>
             </div>
         </section>
         <div class="slds-backdrop slds-backdrop_open"></div>
     </template>  
</template>

Code for JavaScript:

 import { LightningElement, track } from 'lwc'; 
 export default class SearchResults extends LightningElement { 
      @track isModalOpen = false;
      areOutofServiceVisible = false;
      
      handleFilter(event) {
           this.areOutofServiceVisible = event.target.checked;
      }

      openModal() {
           this.isModalOpen = true;
      }
      closeModal() {
           this.isModalOpen = false;
      }
      searchForPeople() {
           this.isModalOpen = false;
      }
 } 

"Found 2 results for this 'searched term'" inside a div but inside of a lightning-layout tag, closest thing to the desired outcome, need line to span across the modal.

"Found 2 results for this 'searched term'" inside a div but outside of a lightning-layout tag

2

solved. Added slds-clearfix to the parent div, adding it allowed it to be correct the issue at hand.

Your Answer

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

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