0

I have a code below, it works fine, the issue comes when i hide lightning:button, css is broken. I tried several ways but i couldnt set the icon and text div in middle.Please help me to solve it. Thank you so much.

Before hiding button

enter image description here

After hiding button

enter image description here

component.cmp file

...SOME_STUFF_HERE
  <div class="custContainer">
     <div class="insideContent">

      <div class="leftContent">
        <div style="position: absolute;margin-top: -7px;">
          <lightning:icon iconName="action:new_note" alternativeText="Pencil" title="edit" />
        </div>
        <div style="margin-top: -5px;">
          <lightning:formattedRichText value="{!'TEXT'}" class="customText" />
          <p class="note">Text</p>
        </div>
      </div>

      <div class="rightBtn">
        <aura:if isTrue="{!v.isNotAdmin}">
          <lightning:button variant="brand" label="Edit" title="Edit" onclick="{! c.handleClick }" class="Btn" />
        </aura:if>
      </div>

    </div>
  </div>

component.css file

THIS.custContainer{
  display: table;
  width: 100%;
  height: 70px;
  padding: 0px 15px 0 0px;
  background: #f3f2f2;
  position: relative;
}
.THIS .insideContent{
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
}
.THIS .leftContent{
  position:absolute;
}
.THIS .rightBtn{
  float:right;
}
0

You will have to check your developer console and verify what styles are being "overridden" modified and correct them. Not much we can do here without seeing exactly what styles are being overridden.

did you test in the browser before adding the property?

what is the expected behavior in browser, and after applying it in your component, is it the same?

doesn't work properly maybe it is working exactly as it should, you will have to describe what it is you were expecting the property to do.

After a quick peak at your code, I noticed that your absolute positioning is part of the issue. generally speaking, you want to avoid using custom css if you are not very proficient with it, and try to leverage SLDS as well as built in lightning layout component. For example, lightning-layout will help you create a container. documentation sample:

<template>
        <p>This example creates a simple layout with field headers.</p>
    <div class="c-container">
        <lightning-layout>
            <lightning-layout-item padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 1">Field 1</p>
                    <p>Name</p>
                </div>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field2 (3)">Field 2 (3)
                        <lightning-button-icon icon-name="utility:down" variant="border-filled" size="small" alternative-text="More Actions"></lightning-button-icon>
                    </p>
                    <p>Eligibility</p>
                </div>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 3">Field 3</p>
                    <a href="#">Website</a>
                </div>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 4">Field 4</p>
                    <p>
                        <span title="">Address</span>
                    </p>
                </div>
            </lightning-layout-item>

enter image description here

if you go through the documentation, you should be able to figure out the same layout you are attempting without the custom CSS, additionally, you can refer to the SLDS blueprints for sample components as well, for your use case, there seems to be similarity with the Header Blueprint which you can refer to for a similar component: enter image description here you can always strip out the html you don't need.

3
  • Can you take a look ? codepen.io/ledat94/pen/yLMVajN – hideo May 19 at 5:19
  • had a quick peak, your absolute positioning is part of the issue, generally speaking, you want to avoid using custom css if you are not very proficient with it, and try to leverage SLDS as well as built in lightning layout component – glls May 19 at 5:22
  • i will try SLDS Thank you for sharing – hideo May 19 at 5:36

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.