How to change height of the map element on button click?

Question

I want to remove the styling back and forth on button click but when i try to resize now the map is rendering all over the screen but without any background, only the markers that were on it.

So basically i want to remove the styling and hide the list element and only display the map element on one click and on the next one to display again the list and to resize the map how it was initially.

any ideas ?

**Updated**

  **aura component** 

<aura:component >
<aura:attribute name="map" type="Object"/>
<aura:attribute name="buttonstate" type="Boolean" default="false"/>

<div aura:id= "screen">        
 <div id="map" aura:id="mapSize" class="mapSize" style="position:relative;">   
        <lightning:button class="button" aura:id="buttonList" label="Button" onclick="{!c.handleClick}" />
 </div>
</div>
   <div  aura:id="listDiv" class ="listDiv">
   <c:List  />
    </div>        
  </div>       
</aura:component>

**CSS**

   .cAccountMap .mapSize{
   width: 100%;
   height: 80%; 
}

.cAccountMap .mapTestSize{
    height: 100%;
}


.THIS .listDiv{
 height: 20%;
}

}

**Javascript** 

   handleClick : function(component,event,helper){
      var buttonName = event.getSource();
      var elements = document.getElementsByClassName("listDiv");
     var buttonstate = component.get('v.buttonstate');
    var cmpTarget = component.find('mapSize');
    if(buttonstate==false){
        buttonName.set('v.label', 'LALA');
        elements[0].style.display = 'none';
        $A.util.removeClass(cmpTarget, 'mapSize');
        $A.util.addClass(cmpTarget, 'mapTestSize');      
    }else{
        buttonName.set('v.label', 'gogo');
        elements[0].style.display = '';
        $A.util.addClass(cmpTarget, 'mapSize');

        $A.util.removeClass(cmpTarget, 'mapTestSize');  
    }
    component.set('v.buttonstate', !buttonstate);

}

can you share your complete code including `.buttonstate` button? Thanks — Hassan Siddiqui, Apr 10 '19 at 04:20
@HassanSiddiqui i added the code that i managed to make it work but now the map is all over the screen without background, basically is showing only the markers that were on the map without background. Also i checked and for some reason on salesforce mobile app is not displaying the map anymore only grey. Thanks — cUser, Apr 11 '19 at 08:21
have you deployed your code on any server or any working example? Please share the link. Thanks — Hassan Siddiqui, Apr 11 '19 at 09:45

score 0 · Accepted Answer · answered Apr 11 '19 at 10:00

After multiple tries  i managed to find the solution 
aura component is the same

css 
.cAccountMap .mapSize{
  width: 100%;
  height: 65%; 
}

.THIS .listDiv{
 height: 35%;
}

.THIS .listHideDiv{
 height: 0%;
}

Javascript

 handleClick : function(component,event,helper){
    var changeViewButton = event.getSource();
    var listDiv = document.getElementsByClassName("listDiv");
    var mapDiv = document.getElementsByClassName("mapSize");
    var buttonstate = component.get('v.buttonstate');
    var cmpList = component.find('listDiv');

    if(buttonstate==false){
        changeViewButton.set('v.label', 'lala');
        listDiv[0].style.display = 'none';
        mapDiv[0].style.height = '100%';
        $A.util.addClass(cmpList, 'listHideDiv');
    }else{
        changeViewButton.set('v.label', 'gogo');
        $A.util.removeClass(cmpList, 'listHideDiv');
        listDiv[0].style.display = '';
        mapDiv[0].style.height = '65%';
    }
    component.set('v.buttonstate', !buttonstate);

}

So basically the map height style was changed from javascript

How to change height of the map element on button click?

1 Answers1