AnsweredAssumed Answered

Calcite Maps Panel - modifying height and width causing toggle icon size to be different

Question asked by mshukun1 on May 1, 2017
Latest reply on May 1, 2017 by rscheitlin

I am not sure this question is applicable for this forum since the question is related to Calcite Maps styling.  If there is a forum specifically for Calcite Maps styling, please direct me to the forum site so that I can ask my question in the directed forum.

 

I modified a panel size both height and width which caused the panel toggle size to be different as below.  Also, please see attached code.  I added styling (width and height) in line 1 and 10 to change panel width and height which is causing toggle icon size to be wide (image 2). 

 

I would like to have default toggle icon size (image 1) with custom height and width.  How can I achieve this?  I would appreciate your help.

 

 

<div id="panelExplorer" class="panel collapse"  style="width: 500px; max-height: 850px;">

     <div id="headingExplorer" class="panel-heading" style="background-color: rgba(0, 121, 193, 0.6);">
          <div class="panel-title">
               <a class="panel-toggle collapsed" role="button" data-toggle="collapse" href="#collapseExplorer" aria-expanded="false" aria-controls="collapseExplorer"><span class="esri-icon-organization" style="color: #fff" aria-hidden="true"></span><span class="panel-label" style="color: #fff;">Explore Scenario</span></a>
               <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelExplorer"><span class="esri-icon esri-icon-close" aria-hidden="true" style="color: #fff;"></span></a>
          </div>
     </div>
     <div id="collapseExplorer" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingExplorer">
          <div class="panel-body" style="width: 100%; max-height: 850px;">
               <ul class="nav nav-tabs" role="tablist">
                    <!--<li role="presentation" class="active"><a href="#title" aria-controls="title" role="tab" data-toggle="tab">Name</a></li>-->
                    <li role="presentation" class="active"><a href="#about-building" aria-controls="about-building" role="tab" data-toggle="tab">About Building</a></li>
                    <li role="presentation" ><a href="#explorer-tab" aria-controls="explorer-tab" role="tab" data-toggle="tab">Explore</a></li>
                    <li role="presentation"><a href="#total-change" aria-controls="total-change" role="tab" data-toggle="tab">Total Change</a></li>
               </ul>

               <div class="tab-content">

               <!-- /.tab-content -->
          </div>
          <!-- /.panel-body -->
     </div>
     <!-- /.panel-collapse -->
</div>
<!-- /.panel -->

Outcomes