You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@royale.apache.org by GitBox <gi...@apache.org> on 2017/11/13 01:44:15 UTC
[GitHub] justinmclean opened a new issue #74: Button's size doesn't include selection indicator

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:
users@infra.apache.org


With regards,
Apache Git Services