1. #1
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Vote Rating
    1
    Answers
    2
    darkling235 is on a distinguished road

      0  

    Default Answered: Content Panel Tool Alignment

    Answered: Content Panel Tool Alignment


    Is there a simple way to change the alignment process of the Tool items on top of the ContentPanel? By default they seem right aligned but we'd like them left aligned.
    Thanks

  2. Ok I discovered the issue deals with a few things.
    The Header over the contentPanel has text on the left and then the buttons so this is part of why we couldn't left justify the tool buttons, they were left aligned there were just invisible items in the way.

    I could have probably just removed the other elements from the top of the contentPanel but I thought it would be easier to change the CSS. I discovered that if your not using the text or icons you can just alter the float property and the ToolButtons will be left aligned. This is the code I used to change the float property for the header. There's probably a better way to do it but this worked for me.

    Code:
    public class ScaleBaseContentPanelAppearance extends GrayContentPanelAppearance 
    {
    
        @Override
        public HeaderDefaultAppearance getHeaderAppearance() {
            return new ScaleBaseContentPanelHeaderAppearance();
        }
    
    }
    Code:
    public class ScaleBaseContentPanelHeaderAppearance extends HeaderDefaultAppearance 
    {
          public ScaleBaseContentPanelHeaderAppearance()
          {
              super(GWT.<ScaleBaseHeaderResources> create(ScaleBaseHeaderResources.class));
          }
          
          public interface ScaleBaseHeaderResources extends HeaderResources {
    
                @Source("ScaleBaseContentHeader.css")
                HeaderStyle style();
              }
    }

  3. #2
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Vote Rating
    1
    Answers
    2
    darkling235 is on a distinguished road

      1  

    Default


    Ok I discovered the issue deals with a few things.
    The Header over the contentPanel has text on the left and then the buttons so this is part of why we couldn't left justify the tool buttons, they were left aligned there were just invisible items in the way.

    I could have probably just removed the other elements from the top of the contentPanel but I thought it would be easier to change the CSS. I discovered that if your not using the text or icons you can just alter the float property and the ToolButtons will be left aligned. This is the code I used to change the float property for the header. There's probably a better way to do it but this worked for me.

    Code:
    public class ScaleBaseContentPanelAppearance extends GrayContentPanelAppearance 
    {
    
        @Override
        public HeaderDefaultAppearance getHeaderAppearance() {
            return new ScaleBaseContentPanelHeaderAppearance();
        }
    
    }
    Code:
    public class ScaleBaseContentPanelHeaderAppearance extends HeaderDefaultAppearance 
    {
          public ScaleBaseContentPanelHeaderAppearance()
          {
              super(GWT.<ScaleBaseHeaderResources> create(ScaleBaseHeaderResources.class));
          }
          
          public interface ScaleBaseHeaderResources extends HeaderResources {
    
                @Source("ScaleBaseContentHeader.css")
                HeaderStyle style();
              }
    }