0

I have this code, it is a header with LWC, divide into three parts, but the problem I have that my display is not responsive, each part points to the other The part 2 and 2 overlap the part 1.

How can I fixe this .

<template>
    <lightning-card> 
        <div class="slds-page-header">
            <div class="slds-page-header__row">
                <template if:true={MyObject.data}>
                    <div class="slds-m-around_medium ">
       
                       <lightning-layout style="width:100%;">
                        <div class="slds-grid slds-wrap">

                        <div class="slds-size_1-of-3">
                            <lightning-layout-item  style="width:20%" >
        
                                    <div class="slds-m-around_medium styleStatut">
                                        <img style="height: 20px; display: block;     margin-top: -15px; " src={statut}  >
                                    </div>
                                <div class="position1">
                                    <tr><span class="titlePosition"><h1><strong>{Name}<br /> </strong></h1></span></tr>
                                        <br><br>
                                        <span class="titlePosition1"><h1><strong>{Formula__c}<br /> </strong></h1> </span>
                                        <br><br>
                                        <span class="titlePosition2"><h1><strong>{Type__c}<br /></strong></h1> </span>
                                </div>
                               
                            </lightning-layout-item>
                        </div>  
                        </div>

                        <div class="slds-grid slds-wrap">

                        <div  class="slds-size_1-of-3">

                            <lightning-layout-item   style="width:45%" > 
                            
                                    <lightning-spinner if:true={isLoading} alternative-text="Loading" size="small"> </lightning-spinner>
                                    
                                    <template if:true={imageurl}>
                                                    <img src={imageurl} style="height: 185px; display: block;
                                                     margin-top: -30px; width: 350px; max-width: initial; 
                                                    "/>
                                    </template>                          

                                            
                                        <div style="margin-top: -65px; ">
                                            <div class="slds-m-around_small ">
                                                <lightning-file-upload  name="fileUploader"  accept={acceptedFormats} record-id={recordId} onuploadfinished={handleUploadFinished} onchange={saveFile} disabled={disableImport}>
                                                </lightning-file-upload>
                                            </div>
                            
                                            <div class="slds-m-around_small">
                                                <template if:true={fileName}>
                                                        {fileName} &nbsp; &nbsp; 
                                                </template>
                                            </div>
                                                 
                                    </div>
                                </lightning-layout-item>
                     
                            </div>
                            </div>
                            <div class="slds-grid slds-wrap">

                                <div class="slds-size_1-of-3 ">

                                <lightning-layout-item  style="width:35%" >
                 
                                        <lightning-map style="height: 185px; width: 60px;  margin-top: -30px; " 
                                        map-markers={mapMarkers}
                                        zoom-level={zoomLevel}
                                        center={center}
                                        onmarkerselect={handleMarkerSelect}
                                        selected-marker-value={selectedMarkerValue}
                                    >
                                    </lightning-map>
                                    <div class="StyleAdress">
                            <p >{Country}</p><br>
                            <p>{City}</p><br>
                            <p>{Street}</p></div>
                    </lightning-layout-item>
                
                </div>



           
            </div>
    </lightning-layout>                             

</div>
                  
                </template>
         </div>
    </div>
</lightning-card>
</template>

==> CSS

.StyleHeader{
    color: white;
    background-color: white;
}

.titlePosition2{
    color: red;
    font-size: 160%;  
    margin-top: -12%;
    margin-left: 8%;
  
    
}


.slds-page-header{
    background-color: white;

}


.styleStatut{
    margin-top: 0.5%;
    margin-left: -5%;
}

.position1{
    color: black;
    font-size: 160%;
    margin-top: -12%;
    margin-left: 8%;
    /* position: absolute; */
  
}
.StyleAdress{
    color: rgba(0, 153, 255, 0.973);
    font-size: 120%;
    margin-top: 15%;

    
}





New Version of the code :

<template>
    <lightning-card>
        <div class="slds-page-header">
                <template if:true={MyObject.data}>
                            
                        <div class="slds-grid slds-gutters">
                            <div class="slds-col">
                            <div>
                                <div class="slds-m-around_medium styleStatut">
                                    <img style="height: 20px; display: block;     margin-top: -18px; " src={statut}   >
                                </div>
                                
                                <div><br>
                                    <div class="position1">
                                    <div>
                                        <h1><strong>{Name}</strong></h1>
                                    </div><br><br></div>
                                    <div class="position1">
                                    <div>
                                        <h1><strong>{Formula__c}</strong></h1>
                                    </div><br><br></div>
                                    <div class="titlePosition2">
                                    <div>
                                      <h1><strong>{Type__c}</strong></h1>  
                                    </div>
                                </div>
                               
                            </div>
                            </div>
                            </div>

                           

                            <div class="slds-col">
                            <div>
                                <lightning-spinner if:true={isLoading} alternative-text="Loading" size="small"> </lightning-spinner>
                                                                                    
                                <template if:true={imageurl}>
                                                <img src={imageurl} style=" display: block; 
                                                min-width: 120%; 

                                                width: 120%;height: 120%; 
                                                "/>
                                </template>    
                            </div>
                            </div>

                            <div class="slds-col">
                                <div>
                            <div >
                                <lightning-file-upload  name="fileUploader"  accept={acceptedFormats} record-id={recordId} onuploadfinished={handleUploadFinished} onchange={saveFile} disabled={disableImport}>
                                </lightning-file-upload>
                            </div>
                                <div style="margin-top: 50%; margin-left:20%">
                                    <template if:true={fileName}>
                                            {fileName} &nbsp; &nbsp; 
                                    </template>
                                </div>
                            
                            </div>
                        </div>
                            <div class="slds-col">
                            <div style="height: 50%;  width: 60% ">
                                <lightning-map 
                                map-markers={mapMarkers}
                                zoom-level={zoomLevel}
                                center={center}
                                onmarkerselect={handleMarkerSelect}
                                selected-marker-value={selectedMarkerValue}
                            >
                            </lightning-map>
                            </div>
                            </div>
                          
                            
                            <div class="slds-col">
                            <div>
                                <div class="StyleAdress">
                                    <p >{Country}</p><br>
                                    <p>{City}</p><br>
                                    <p>{Street}</p>
                                </div>
                            </div>
                            </div>
                            </div>



                </template>
        </div>
    </lightning-card>
</template>

Now it works with this code except the image I upload, when I reduce the page it goes up and its size decreases. What can I do for this?

2 Answers 2

0

If you are using class="slds-size_1-of-3" then the style width would not work for the lightning-layout items. Please remove the class="slds-size_1-of-3" from the div elements.

1
  • when I remove it , It is true that no part overlaps the other but once I reduce the page I find the same problem Apr 27 at 11:42
0

You're putting grids inside of grids (lightning-layout and slds-grid are effectively the same thing). Choose one or the other.

4
  • Even if I removed slds-grid, at first each part takes its position, one on the left, one in the center and one on the right but once I reduce the page their positions change Apr 27 at 11:49
  • @SalesforceJuniorDev It's not that simple. You're mixing in tr (which is only for tables), h1 and strong, etc. You may as well start over from the beginning, get the layout working first, then work on the formatting.
    – sfdcfox
    Apr 27 at 11:58
  • @SalesforceJuniorDev Here, start from this. I don't know what you're trying to accomplish, but this is what it should look like.
    – sfdcfox
    Apr 27 at 12:05
  • I already modified my code , could you check it please Apr 27 at 16:58

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.