0 Replies Latest reply on Jun 10, 2010 8:25 AM by CRez79

    Spacing the underline under text

    CRez79

      Hi, banging my head on this one. I found solutions but it seems to only work in the non-flex environment. Was nice to see the simularities between flex's css and typical css, but this one isn't so transferable.

       

      I have a button that I'm styling, and I want to increase the space between the bottom of my text and the underline. By using the CSS

       

      text-decoration: underline;

       

      you can underline elements in both standard CSS/Html as well as Flex. But if you want to increase the space in CSS/Html you just use

       

      padding: 2px;  
      border-bottom: 1px solid #aaaaaa; 

       

      but if I try this in Flex, it fails. I do not see any border under the text. I even tried negative padding, wider borders, different colors, but I just can't get the normal CSS solution to work with Flex CSS. Here is the code I'm trying to get the affects on.

       

      example below

      test3 - displays the standard underline

      test4 - uses a method to try and display an underline but with increased space between the text and the line.

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">

      <mx:Style>

      Button {

      skin: ClassReference(null);

      text-roll-over-color: #2EAAC2;

      font-size: 13pt;

      color: #2E6DC2;

      border-bottom: 3px solid #AA22AA;

      padding-bottom: 2;

      }

      .test3 {

      font-size: 13pt;

      color: #2E6DC2;

      text-decoration:underline;

      }

      .test4 {

      font-size: 13pt;

      color: #2E6DC2;

      border-bottom: 3px solid #AA22AA;

      padding-bottom: 2;

      }

      </mx:Style>

      <mx:Style source="main.css"/>

      <mx:Button id="test2" label="2. Testing"/>

      <mx:Label id="test3" text="3. Testing" styleName="test3" />

      <mx:Label id="test4" text="4. Testing" styleName="test4" />

      </mx:Application>