0

I have a question

I have in my HTML code three different :

<div> </div>

-the first contains an image -the second calls for a template that contains two or more fields -the third contains only one button

the three are horizontal on the same line

now I modified in css and I removed the height for the three but the problem is that the second its height changes and becomes large if the fields are added on the other hand the image which is in first div and the button of the third div remain static

my question is how to make their height automatically add if the height of the second div is added and its size changes.

note: I used

 height:auto;

But that did not work

=> My code HTML

  <lightning-layout style="width:100%;" height="auto">
        <lightning-layout-item style="width:20%">
          <div class="CSS1">
            <img style="min-width: 100%;" src={IMAGE}>
          </div>
        </lightning-layout-item>
        <lightning-layout-item style="width:50%">
          <div class="CSS2">
            <div>
              <div class="slds-align_absolute">
                <tr><span class="TEXT1">Composant 1</span></tr>
              </div>
              <div>
                <span>
                    <template>
                                
                            // JE VAIS FAIRE APPELLE A MA TEMPLATE 
                    </template>
                </span>
              </div>
            </div>
          </div>
        </lightning-layout-item>
        <lightning-layout-item style="width:20%">
          <div class="CSS3">
                     <h1> le titre ici </h1>
                  <button>
                          continuer
                  </button>
               </div>
              </div>  
              </div>

            </div>
  
          </div>
        </lightning-layout-item>
      </lightning-layout> 

=> My CSS code :

.CSS1 {
  
    background-color: red;
    padding: 1rem;
    border: 1px solid ;
    height:auto;
}
.CSS2{
    background-color: black;
    padding: 1rem;
    border: 1px solid #d8dde6;
    color: white;
    height:auto;

}
.CSS3 {
    padding: 1rem;
    border: 1px solid #d8dde6;
    height:auto;

1 Answer 1

1

The lightning-layout-item is already a container; you don't need a div inside of it. Don't use style="width: 20%" or something like that, but instead specify the desired size.

A closer approximation to what you want would be:

<lightning-layout style="width:100%;" height="auto">
    <lightning-layout-item size="3" class="CSS1">
        <img style="min-width: 100%;" src={IMAGE}>
    </lightning-layout-item>
    <lightning-layout-item class="CSS2" size="6">
        <div class="slds-align_absolute">
            <span class="TEXT1">Composant 1</span>
        </div>
        <div>
            <span>
                <template>
                        
                    // JE VAIS FAIRE APPELLE A MA TEMPLATE 
                </template>
            </span>
        </div>
    </lightning-layout-item>
    <lightning-layout-item class="CSS3" size="3">
        <h1> le titre ici </h1>
        <button>
            continuer
        </button>
    </lightning-layout-item>
</lightning-layout> 

If you wanted the 20%, 50%, 20% layout, though, you could also specify the size using slds classes:

<lightning-layout-item class="CSS1 slds-size_1-of-5"> ...

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .