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

Anonymous User — Fri, 10 Dec 2021 23:00:33 GMT

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 -->‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

RobertScheitlin__GISP — Mon, 01 May 2017 15:11:42 GMT

Makiko,

Remove your style addition to line 1 and make the style width change to line 10 to be a pixel value and not %.

topic Calcite Maps Panel - modifying height and width causing toggle icon size to be different in ArcGIS JavaScript Maps SDK Questions

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

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