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 -->
Solved! Go to Solution.
Makiko,
Remove your style addition to line 1 and make the style width change to line 10 to be a pixel value and not %.
Makiko,
Remove your style addition to line 1 and make the style width change to line 10 to be a pixel value and not %.