+ Start a Discussion

Reduce Size between <li> messages.


  Created a popup using lightning component using CSS am creating style sheets. 

I want to reduce the space between messages please suggest me how to fix

User-added image
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="PopupMessageController">  
    <aura:attribute name="ListOfMessage" type="Popup_Message__c[]" description="displayes list of messages"/>
    <aura:handler name='init' action="{!c.doInit}" value="{!this}" /> 
    <aura:attribute name="isOpen" type="boolean" default="False" />
    <aura:if isTrue="{!and(v.isOpen,v.ListOfMessage != null)}"> 
    <div class="slds-backdrop" aura:id="Modalbackdrop"></div>         
        <div role="dialog" aria-labelledby="header43" class='pop-up slds-modal' aura:id="popupDiv1">
            <div class="slds-modal__container">
                <div class="slds-modal__pinner">                      
                    <div class="message">	
                        <!-- <p>Sudhir First </p> -->                         
      					<aura:iteration items="{!v.ListOfMessage}" var="msg">
                            <li type="dice" style="margin: 0;padding: 0.2em;display: inline-block;">{!msg.Message_Text__c}</li>
                    <div class="slds-form-element">
                        <lightning:button variant="success" label="Ok" title="ok" onclick="{!c.close }" class="OKButton button4"/>
        <aura:set attribute="else">

    doInit : function(component, event, helper) {
        var action = component.get('c.fetchMessage',true);
        action.setCallback(this, function(response) {
        //store state of response
        var state = response.getState();
        if (state === "SUCCESS") {
         //set response value in ListOfMessage attribute on component.
         component.set('v.ListOfMessage', response.getReturnValue());
        var temperorySession = localStorage.getItem('tempSession');
        if(temperorySession == '1')
            component.set("v.isOpen", true); //This should be set to false to testing set to true
            component.set("v.isOpen", true);
            var cmpTarget1 = component.find('popupDiv1');
            var cmpBack1 = component.find('Modalbackdrop1');
            $A.util.addClass(cmpTarget1, 'slds-fade-in-open');
            $A.util.addClass(cmpBack1, 'slds-backdrop--open');
        localStorage.setItem('tempSession', '1');
    close: function(component, event, helper) {
        component.set("v.isOpen", false);

.THIS.pop-up {
    display: block;
    opacity: 1;
    visibility: visible;
    overflow: auto;

.THIS .slds-modal__inner {
    padding: 10px;
    overflow-y: scroll;

.THIS .slds-modal__pinner {
    background: #fff;
    padding: 10px;
    font-size: 12px; 
    font-weight: bold;
    overflow-y: scroll;
.THIS .OKButton{
   -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #91989c;
  padding: 6px 15px 9px 13px;
  text-decoration: none;
.THIS .OKButton:hover {
  background: #5c575c;
  text-decoration: none;

Deepali KulshresthaDeepali Kulshrestha
Hi MaheemSam,

In order to reduce size between <li> messages please change the padding that you have defined in the style. 
Please change this:

<aura:iteration items="{!v.ListOfMessage}" var="msg">

  <li type="dice" style="margin: 0;padding: 0.2em;display: inline-block;">{!msg.Message_Text__c}</li>


<aura:iteration items="{!v.ListOfMessage}" var="msg">

   <li type="dice" style="margin: 0;padding: 0.1em;display: inline-block;">{!msg.Message_Text__c}</li>

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,

Deepali Kulshrestha