9 Replies Latest reply on Aug 27, 2009 1:39 PM by Jerry62712

    How Do I: CSS, borders

    Jerry62712 Level 1

      I want to add a divider between several linkbuttons.  As I don't want JAWS to "read" it, I figured to use a CSS option of turning on the right border of the button.  As that doesn't seem to be an option, I put the button in a HBox and want to turn on that right border.  It didn't seem to work and all the borders were turned on.

       

      How do I just turn on one border?

        • 1. Re: How Do I: CSS, borders
          babo_ya Level 3

          Try..

           

          borderStyle : solid;

          borderThinknessRight : 1;

           

           

          BaBo,

          • 2. Re: How Do I: CSS, borders
            Barna Biro Level 3

            Why not simply use a VRule component and add one after each button? You can obviously do it more ellegantly by writing some custom skins or components but I think that using a VRule would be more than enough to solve such problem.

            1 person found this helpful
            • 3. Re: How Do I: CSS, borders
              babo_ya Level 3

              The above HBox style won't work

               

              YOu could convert the HBox to Panel and use this style...

               

               

              .myPanel

              {

               

              borderThicknessLeft: 2;

                borderThicknessTop: 0;

                borderThicknessBottom: 0;

                borderThicknessRight: 0;

                headerHeight: 0;

                dropShadowEnabled: false;

              }

               

               

              hope this helps,

               

              BaBo

               

               

               

               

               

               

               

              • 4. Re: How Do I: CSS, borders
                Jerry62712 Level 1

                Unfortunately, it didn't work with HBox or Panel.  I'm not sure why css won't work with Flex - at least the part of CSS that Adobe claims will work.  If I could get this to work it would be the best solution as you don't add overhead for more containers.

                 

                But until I can figure it out I'll have to go with adding the VBox (height="100%; width="2"; backgroundColor="black").

                 

                Thanks, I appreciate the help.

                • 5. Re: How Do I: CSS, borders
                  Jerry62712 Level 1

                  [Darnest thing.  I tried to reply to you and all the CSS for this site was lost.  Reloading didn't work, so I had to leave and come back in.]

                   

                  I was hoping to find a CSS solution, but it doesn't appear that that will work so I tried the VBox.  I'll have to verify that JAWS doesn't read the VBox.

                   

                  Thanks,

                  Jerry

                  • 6. Re: How Do I: CSS, borders
                    Barna Biro Level 3

                    Could you maybe post a short example that would illustrate what you are trying to do? I'm quite sure that what you are trying to do can be done with CSS too just that what you are trying to do is not totally clear to me ( I can't imagine how you want the whole thing to look like in the end - I thought that the VRule approach is quite straight forward but if you really want to do it with CSS, then provide more "visual info" please ).

                    • 7. Re: How Do I: CSS, borders
                      Jerry62712 Level 1

                      I'd love to get the thing working with CSS.  Here is the end result I'm looking for:

                       

                      Link 1 | Link 2 | Link 3

                       

                      Here is the code (with VBox):

                           <mx:HBox id="footerStateLinkBox">
                                <mx:LinkButton id="footerStateLink"
                                     label="State of Illinois"
                                     toolTip="State of Illinois web page link"
                                     click="linkIDHS('http://www.illinois.gov')"
                                     color="#0000ff" 
                                     paddingRight="0" 
                                     tabIndex="400" 
                                      cornerRadius="20"/>
                      
                                <mx:VBox width="2"
                                     height="100%"
                                     backgroundColor="black" />
                      
                                <mx:LinkButton id="footerAccessibilityLink"
                                     label="Accessibility" 
                                     toolTip="accessibility web page link"
                                     styleName="linkButtonRightBar"
                                     click="linkIDHS('http://www.dhs.state.il.us/page.aspx?item=31360')"
                                     color="#0000ff" 
                                     paddingLeft="-3" paddingRight="-1" 
                                     tabIndex="405" />
                      
                                <mx:VBox width="2"
                                     height="100%"
                                     backgroundColor="black" />
                      
                                <mx:LinkButton id="footerPrivacyLink"
                                     label="Privacy" 
                                     toolTip="Privacy web page link"
                                     styleName="linkButtonRightBar"
                                     click="linkIDHS('http://www.dhs.state.il.us/page.aspx?item=31379')"
                                     color="#0000ff" 
                                     paddingLeft="-3" paddingRight="-1" 
                                     tabIndex="410" />
                      
                                <mx:VBox width="2"
                                     height="100%"
                                     backgroundColor="black" />
                      
                                <mx:LinkButton id="footerReportLink"
                                     label="Report Abuse/Neglect" 
                                     toolTip="Report Abuse or Neglect web page link"
                                     styleName="linkButtonRightBar"
                                     click="linkIDHS('http://www.dhs.state.il.us/page.aspx?item=32675')"
                                     color="#0000ff" 
                                     paddingLeft="-3" paddingRight="-1" 
                                     tabIndex="415" />
                      
                                <mx:VBox width="2"
                                     height="100%"
                                     backgroundColor="black" />
                      
                                <mx:LinkButton id="footerContactLink"
                                     label="Contact Us" 
                                     toolTip="Contact us web page link" 
                                     click="linkIDHS('http://www.dhs.state.il.us/page.aspx?item=29757')"
                                     color="#0000ff" 
                                     paddingLeft="-3" 
                                     tabIndex="420" />
                           </mx:HBox>
                      
                           <mx:LinkButton id="footerGroupWiseLink"
                                label="DHS GroupWise"
                                toolTip="DHS Employee Email web page link" 
                                click="linkIDHS('https://webmail.dhs.state.il.us/servlet/webacc')"
                                color="#0000ff" 
                                right="0" 
                                tabIndex="425" />
                      

                       

                      The last one is pinned to the right and therefore doesn't need the separator between it and "Contact Us" link.  I had each LinkButton inside of a HBox or a Panel and applied the CSS to those objects when I couldn't get it to work with the LinkButton object.

                      • 9. Re: How Do I: CSS, borders
                        Jerry62712 Level 1

                        Thanks, I'll have to look into that.  I couldn't use the "event.label" as you can see from my code each label isn't even close to the URL they point to.  But there might be a way around it.

                         

                        As a noob, I pretty much don't know much of anything.