1 Reply Latest reply on Mar 11, 2009 10:01 AM by WessideMD

    Text Input and Button stretching for no reason in accordion

    WessideMD
      Take a look at this http://beta.goodsense.com.

      Click on "Search Catalog"

      Can someone tell me why the textinput and the button are stretched like this? They look fine in their individual containers, but when I put them into the accordion, they stretch out like this... Notice that if you type text in, the first letter doesn't start on the far left.


      SearchBox component:

      <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" height="100%" verticalAlign="top" horizontalAlign="left" width="100%">
      <mx:TextInput width="190" id="searchBox" text="{_defaultText}" editable="true" focusIn="{onFocus()}" focusOut="{onFocusOut()}"/>
      <mx:Button x="691" y="132" label="Go" id="searchBtn" click="{getSearchResults()}"/>
      </mx:HBox>

      Accordion Component:
      <mx:Accordion xmlns:mx=" http://www.adobe.com/2006/mxml" width="265" height="360" creationComplete="init()" xmlns:ns1="goodsense.Components.*">
      <ns1:FilterTherapeuticClass id="tClassFilter"/>
      <ns1:ProductGroupfilter id="prodGroupFilter" enabled="false"/>
      <ns1:SearchBox id="searchBox" label="Search Catalog" paddingTop="5" paddingLeft="5" width="100%" />
      <ns1:CompareToFilter id="compareToFilter"/>
      </mx:Accordion>
        • 1. Re: Text Input and Button stretching for no reason in accordion
          WessideMD Level 1
          I figured it out. My CSS had a property called "textindent=25" which I didn't think would affect its children. The textindent was meant for the header, so I added that line to the header css instead.

          Accordion {
          borderStyle: none;
          borderThickness: 2;
          headerHeight: 26;
          backgroundAlpha: 0.09;
          textIndent: 25;
          openDuration: 523;
          fillAlphas: 0, 0, 0, 0;
          backgroundColor: #ffffff;
          borderColor: #ff9933;
          dropShadowEnabled: true;
          shadowDirection: right;
          headerStyleName: "myaccordionHeader";
          }
          .myaccordionHeader {
          color: #ff9933;
          textIndent: 25;
          fontFamily: Tahoma;
          fontWeight: bold;
          }