nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

dynamically change container size

DebbieAlger

I hope I explain this properly. I have a left sided navigation bar that has several forms on it. I need the bottom (the largest) to shrink if the user either makes the page smaller or the resolution is smaller such as 1024 x 768. At this level the bottom is cut off.
I don't need a vertical scrollbar, I already have that. What I need is the entire container to shrink just like the Map Layers legend does.
Is this possible??

thanks,

Find more posts tagged with

Accepted answers

rscheitlin

Debbie,

If I understand you correctly than you just need to use top="0" bottom="0" left="0" width="100" or what ever the width you need is. This way the size of the panel is locked to the parent container.

All comments

DebbieAlger

Thanks Rob,

that actually helped, and of course I am taking no offense. I appreciate your help. I had no idea what I was doing was wrong, have been
self-teaching by google searches. I will definitely start using spark tags.

CHeers,
Debbie

rscheitlin

Debbie,

There is just so much here that is... Well it is hard for me to say exactly what is wrong. Here is my best guess

<mx:Canvas  width="100%" height="100%     >
   
     <mx:VBox     height="100%"   width="100%"  horizontalScrollPolicy="off"   verticalScrollPosition="{this.height}"  verticalScrollPolicy="auto"  >

Your use of mx boxes where they should be canvas (if you are still going to use mx) and labels that you are using as spacers instead of mx spacers... It hard to advise on code I just want to completely re-write. Don't take offense, I do understand this is your first flex app. But things like using mx repeaters when you could be using spark data groups and itemrenderes, there is so much more to learn.

DebbieAlger

Robert,

I still have an issue here. What you gave me does help with the resizing. BUT, as shown in the attached picture. when the resizing gets to the point where it can't get any smaller, it should turn into a vertical scrollbar for the lower Results box. The scrollbar DOES show fine when more results are added and it gets to big, but it doesn't show when the viewer page is shrunk by the user.. I attached screen caps.
this is the entire code for the Results section...


   
   <mx:Box top="0" bottom="0" left="0" width="100%" height="100%"   paddingLeft="10" styleName="WidgetText"    horizontalScrollPolicy="off" borderStyle="solid" borderVisible="true"   visible="{wsArray !=null && wsArray.length>0}" >

    <s:Label    text=" " />
    <s:Label id="txtDG"    paddingLeft="5" fontWeight="bold" text="{resourceManager.getString('resources', 'results')}"   />

    <s:Label id="txtHeading"     paddingLeft="5" text="{resourceManager.getString('resources', 'dgHeading')} "     />
    <mx:Canvas width="100%"     >

     <mx:VBox     height="100%"   width="100%" horizontalScrollPolicy="off"   verticalScrollPosition="{this.width }" verticalScrollPolicy="auto" >

      <mx:Repeater dataProvider="{wsArray}" id="wRepeater"   >

       <mx:HBox verticalAlign="middle"    >
        <s:Label   text="             " />
        <s:Label   text="             " />

        <mx:Button click="remove(event )" buttonMode="true"   useHandCursor="true"   toolTip="{resourceManager.getString('resources', 'deleteWS')}"
             upSkin="@Embed('assets/images/delete.png')"
             overSkin="@Embed('assets/images/delete_selected.png')"
             downSkin="@Embed('assets/images/delete_selected.png')" width="20" height="20" />

        <s:Label   text="             " />

        <mx:Button click="Export(event )" buttonMode="true"   useHandCursor="true" toolTip="{resourceManager.getString('resources', 'exportWS')}"
             upSkin="@Embed('assets/images/export.PNG')"
             overSkin="@Embed('assets/images/export_selected.PNG')"
             downSkin="@Embed('assets/images/export_selected.PNG')" width="20" height="20" />

        <s:Label   text="             " />
        <s:Label   text="{wRepeater.currentItem.wsName}" buttonMode="true" useHandCursor="true" color="#0000FF" textDecoration="underline" styleName="WidgetText" toolTip="{resourceManager.getString('resources', 'zoomWS')}" click="zoomLocation(event)"      />

       </mx:HBox>

       <mx:HBox paddingLeft="15" >
       <mx:Image id="showCharacterize" click="btnShowCharacterize(event)" buttonMode="true" useHandCursor="true"   toolTip="{resourceManager.getString('resources', 'expand')}" source="{plusSign}" width="15" height="15"    />
       <s:Label   text="{resourceManager.getString('resources', 'characterize')}" styleName="WidgetText"   visible="true" />
       </mx:HBox>


       
        <mx:VBox id="displayDatagrid" paddingLeft="15"   height="0" visible="false" >

       <mx:DataGrid id="datagrid" dataProvider="{wRepeater.currentItem.gridData}"   rowCount="5" styleName="WidgetText" itemClick="dgClick(event)"   >
        <mx:columns>
         <mx:DataGridColumn headerText="Characterization"    dataField="charType" width="125"/>
         <mx:DataGridColumn headerText="Value"    dataField="charValue" width="75"/>
         <mx:DataGridColumn headerText="Select"   dataField="charChkBox" width="50"    itemRenderer="mx.controls.CheckBox" />
        </mx:columns>
       </mx:DataGrid>

       <mx:Box paddingLeft="10" paddingBottom="5">
          <s:Button     id="btnCharacterize" click="characterize(event)"   label="{resourceManager.getString('resources', 'selectChars')}" width="250" />
          </mx:Box>

        </mx:VBox>
      <s:Label    text=" " />
     </mx:Repeater>
      </mx:VBox>
    </mx:Canvas>
   </mx:Box>

thanks,

resizeIssue1.doc

resizeIssue2.doc

DebbieAlger

Hi Robert,

That did the trick, how do you guys get so Freakin Smart!

THanks so much,

rscheitlin

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.