[GitHub] justinmclean opened a new issue #74: Button's size doesn't include selection indicator

[GitBox]

justinmclean opened a new issue #74: Button's size doesn't include selection 
indicator 
URL: https://github.com/apache/royale-asjs/issues/74
 
 
   Selecting the middle button in this example code:
   ```
   <?xml version="1.0" encoding="utf-8"?>
   <js:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
                   xmlns:js="library://ns.apache.org/royale/basic">
       
       <js:valuesImpl>
           <js:SimpleCSSValuesImpl/>
       </js:valuesImpl>
   
       <js:initialView>
           <js:View>
               <js:style>
                   <js:SimpleCSSStyles padding="20" />
               </js:style>
               <js:Container width="100%">
                   <js:beads>
                       <js:HorizontalLayoutWithPaddingAndGap gap="20" />
                   </js:beads>
                   <js:TextButton text="Button 1" />
                   <js:TextButton text="Button 2" />
                   <js:TextButton text="Button 3" />
                </js:Container>
           </js:View>
       </js:initialView>
   
   </js:Application>
   ```
   
   Cuts off the selection indicator on the top and bottom of the button.
   
   
![2017-11-13_12-36-28](https://user-images.githubusercontent.com/144504/32706217-b17562f0-c86f-11e7-96c6-caccd521d41f.png)
   
   On buttons 1 and 3 it only shows on one vertical edge.
   
   One way of getting around this issue is adding padding to the buttons 
container like so:
   
   ```
   <?xml version="1.0" encoding="utf-8"?>
   <js:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
                   xmlns:js="library://ns.apache.org/royale/basic">
       
       <js:valuesImpl>
           <js:SimpleCSSValuesImpl/>
       </js:valuesImpl>
   
       <js:initialView>
           <js:View>
               <js:style>
                   <js:SimpleCSSStyles padding="20" />
               </js:style>
               <js:Container width="100%">
                   <js:beads>
                       <js:HorizontalLayoutWithPaddingAndGap paddingLeft="10" 
paddingRight="10" paddingTop="10" paddingBottom="10" gap="20" />
                   </js:beads>
                   <js:TextButton text="Button 1" />
                   <js:TextButton text="Button 2" />
                   <js:TextButton text="Button 3" />
                </js:Container>
           </js:View>
       </js:initialView>
   
   </js:Application>
   
   ```
   
   
![2017-11-13_12-42-28](https://user-images.githubusercontent.com/144504/32706262-30dbb17a-c870-11e7-8299-0161aee9a0a1.png)
   
   
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services