You found a bug! We've classified it as EXTGWT-3431 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    28
    Vote Rating
    1
    rbrecheis is on a distinguished road

      0  

    Default TextButton is truncated / cut-off

    TextButton is truncated / cut-off


    Hi,

    I'd just like to report a small issue/bug with TextButton in GXT versions 3.0.0 and 3.0.1. It is not rendered entirely right (see screenshot). The bottom border of the button seems to be missing. Strangely enough, version 3.0.0-rc2 displays the button correctly but has other problems (for which I submitted a separate thread). These are related to combo box selection (JavaScript 'parent is null' error when first expanding the combo box, then clicking somewhere outside the combo box). The bug for that one was set to FIXED, but I'm still seeing it in 3.0.0-rc2.

    Anyway, here's the screenshot of the misbehaving TextButton:

    Button.png

    It's just a small issue but looks a bit sloppy I saw this problem in both Chrome and Firefox.

    Thanx!

    Ralph

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,644
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    Can you share a standalone test case (something that implements EntryPoint and has no other dependencies within your project) that can reproduce this issue? Are you seeing this on http://sencha.com/examples/ ?

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    28
    Vote Rating
    1
    rbrecheis is on a distinguished road

      0  

    Default


    Hi Colin,

    Thanks for your reply. I'll see what I can do about this stand-alone testcase. In the meantime, it might be interesting for you to know that this issue seems to appear primarily inside a Portlet. Our application works a lot with them (using UiBinder). For example, we also have a login screen with a "Login" button and that one is rendered correctly....

    So it might not be the button itself but some containing widget. An example XML of our portlet UiBinder code is provided below.

    Thanks for your time. I hope I can give you more information soon.

    Greetz,

    Ralph

    Code:
    <ui:UiBinder
      xmlns:ui="urn:ui:com.google.gwt.uibinder"
      xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
      xmlns:client="urn:import:com.sencha.gxt.widget.core.client"
      xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form"
      xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
      xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
      xmlns:widget="urn:import:com.arcus.pba.client.shared.widget">
    
      <ui:style>
        .topSpacing { margin-top: 10px; }
        .bottomSpacing { margin-bottom: 5px; }
        .employee { font-weight: bold; font-size: 12px; }
        .newEntry { font-weight: bold; font-size: 12px; margin-bottom: 5px; 
          margin-top: 10px; }
      </ui:style>
    
      <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="fullWidth">
        <ui:attributes width="1" height="-1"/>
      </ui:with>
    
      <client:ContentPanel headingText="Timesheet" bodyBorder="false" borders="false">
          <container:PortalLayoutContainer ui:field="mPortalLayoutContainer"
          numColumns="2">
    
          <container:portlet column="0">
            <client:Portlet headingText="Tools" height="80" collapsible="false">
              <container:HBoxLayoutContainer>
                <button:TextButton ui:field="mSaveTimesheetButton" width="120"
                    height="26">Save Timesheet</button:TextButton>
              </container:HBoxLayoutContainer>
            </client:Portlet>
          </container:portlet>
    
          <container:portlet column="0">
            <client:Portlet headingText="New Timesheet Entry" height="200"
                collapsible="true" titleCollapse="true">
              <client:FramedPanel headerVisible="false" bodyBorder="false">
                <container:VerticalLayoutContainer>
                  <container:child layoutData="{fullWidth}">
                    <form:DateField ui:field="mNewDateField" 
                        styleName="{style.bottomSpacing}"/>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <form:ComboBox ui:field="mProjectComboBox" 
                        styleName="{style.bottomSpacing}" emptyText="Select project..."/>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <form:TextField ui:field="mTotalHoursField" 
                        styleName="{style.bottomSpacing}" emptyText="Enter hours..."/>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <container:HBoxLayoutContainer>
                      <button:TextButton ui:field="mAddEntryButton" width="120"
                          height="24">Add Entry</button:TextButton>
                    </container:HBoxLayoutContainer>
                  </container:child>
                </container:VerticalLayoutContainer>
              </client:FramedPanel>
            </client:Portlet>
          </container:portlet>
    
          <container:portlet column="1">
            <client:Portlet headingText="Timesheet" height="510" collapsible="true"
                titleCollapse="true">
              <client:FramedPanel headerVisible="false" bodyBorder="false">
                <container:VerticalLayoutContainer>
                  <container:child layoutData="{fullWidth}">
                    <form:FieldLabel text="Employee" labelWidth="100">
                      <form:child><gwt:Label ui:field="mEmployeeLabel" 
                          styleName="{style.employee}"/></form:child>
                    </form:FieldLabel>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <form:FieldLabel text="Month" labelWidth="100">
                      <form:child>
                        <form:SimpleComboBox ui:field="mMonthComboBox" 
                            emptyText="Select month..."/>
                      </form:child>
                    </form:FieldLabel>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <widget:DefaultListWidget ui:field="mTimesheetListWidget"
                        addStyleNames="{style.bottomSpacing} {style.topSpacing}" 
                            height="350"/>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <container:HBoxLayoutContainer>
                      <button:TextButton ui:field="mDeleteEntryButton" width="120" 
                          height="24">Remove Entry</button:TextButton>
                    </container:HBoxLayoutContainer>
                  </container:child>
                </container:VerticalLayoutContainer>
              </client:FramedPanel>
            </client:Portlet>
          </container:portlet>
    
        </container:PortalLayoutContainer>
        </client:ContentPanel>
    
    </ui:UiBinder>

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,644
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    Your example is missing the com.arcus.pba.client.shared.widget.DefaultListWidget, as well as the basic wiring needs for the ComboBoxes. Deleting these, I can run the example, and see the issue.

    Another thing I deleted: FramedPanel, without an header or border. Without those things, it is just a placeholder, and would be better to be removed to create less objects.

    The bug seems to be coming from the HBoxLayoutContainers you are adding - there may be a bug here, I'll see about investigating further. That said, these containers are only each holding a single child - why add them at all? Removing those containers causes the issue to go away.

    One more thing I wanted to note: Portlet is a subclass of ContentPanel, which has explicit support for buttons at the bottom of the panel, which appears to be the effect you are trying to achieve. If you add the buttons using this instead of a HBox at the bottom, it is nearly what you started with. To customize the position of these buttons, buttonAlign="START" or buttonAlign="CENTER" can be used, or the default of buttonAlign="END".

    Here's the uibinder xml I ended up with, with the thoughts above bolded:

    Code:
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
      xmlns:gwt="urn:import:com.google.gwt.user.client.ui" xmlns:client="urn:import:com.sencha.gxt.widget.core.client"
      xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form"
      xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
      xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container">
    
    
      <ui:style>
        .topSpacing { margin-top: 10px; }
        .bottomSpacing { margin-bottom: 5px; }
        .employee { font-weight: bold; font-size: 12px; }
        .newEntry { font-weight: bold; font-size: 12px; margin-bottom: 5px; margin-top: 10px; }
      </ui:style>
    
    
      <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="fullWidth">
        <ui:attributes width="1" height="-1" />
      </ui:with>
    
    
      <client:ContentPanel headingText="Timesheet" bodyBorder="false" borders="false" width="500" height="500">
        <container:PortalLayoutContainer ui:field="mPortalLayoutContainer" numColumns="2">
    
    
          <container:portlet column="0">
            <client:Portlet headingText="Tools" height="80" collapsible="false" 
                buttonAlign="END">
              <client:button>
                <button:TextButton ui:field="mSaveTimesheetButton" width="120" height="26">Save Timesheet</button:TextButton>
              </client:button>
            </client:Portlet>
          </container:portlet>
    
    
          <container:portlet column="0">
            <client:Portlet headingText="New Timesheet Entry" height="200" collapsible="true" titleCollapse="true" 
               buttonAlign="CENTER">
              <container:VerticalLayoutContainer>
                <container:child layoutData="{fullWidth}">
                  <form:DateField ui:field="mNewDateField" styleName="{style.bottomSpacing}" />
                </container:child>
    
    
                <container:child layoutData="{fullWidth}">
                  <form:TextField ui:field="mTotalHoursField" styleName="{style.bottomSpacing}" emptyText="Enter hours..." />
                </container:child>
              </container:VerticalLayoutContainer>
              <client:button>
                <button:TextButton ui:field="mAddEntryButton" width="120" height="24">Add Entry</button:TextButton>
              </client:button>
            </client:Portlet>
          </container:portlet>
    
    
          <container:portlet column="1">
            <client:Portlet headingText="Timesheet" height="510" collapsible="true" 
               titleCollapse="true" buttonAlign="START">
              <container:VerticalLayoutContainer>
                <container:child layoutData="{fullWidth}">
                  <form:FieldLabel text="Employee" labelWidth="100">
                    <form:child>
                      <gwt:Label ui:field="mEmployeeLabel" styleName="{style.employee}" />
                    </form:child>
                  </form:FieldLabel>
                </container:child>
                <container:child layoutData="{fullWidth}">
                  <form:FieldLabel text="Month" labelWidth="100">
    
    
                  </form:FieldLabel>
                </container:child>
              </container:VerticalLayoutContainer>
              <client:button>
                <button:TextButton ui:field="mDeleteEntryButton" width="120" height="24">Remove Entry</button:TextButton>
              </client:button>
            </client:Portlet>
          </container:portlet>
    
    
        </container:PortalLayoutContainer>
      </client:ContentPanel>
    
    
    </ui:UiBinder>

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    28
    Vote Rating
    1
    rbrecheis is on a distinguished road

      0  

    Default


    Hi Colin,

    Thanks very much for your help. Your suggestions have indeed solved the problem. I'm no longer using the HBoxLayoutContainer. Whenever I have multiple buttons inside the <client:button> block, I use a FlowLayoutContainer.

    Thanks again!

    Ralph

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,644
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    That's one option, and I apologize if I wasn't sufficiently clear - Otherwise, you can add several buttons, each in its own <client:button> tag. This will give the ContentPanel details about how many buttons there are, so it knows how to overflow them if needed. Check out http://www.sencha.com/examples/#Exam...%28uibinder%29 for an example of doing this.

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    28
    Vote Rating
    1
    rbrecheis is on a distinguished road

      0  

    Default


    Thanks very much for your input!
    You have a great library.

    Ralph

  8. #8
    Sencha User
    Join Date
    Sep 2013
    Posts
    3
    Vote Rating
    0
    Ieronim is on a distinguished road

      0  

    Default This bug is present in version 3.0.6

    This bug is present in version 3.0.6


    Recently I found the same bug using GXT 3.0.6.
    Here is my simple example of using com.sencha.gxt.widget.core.client.button.TextButton class.
    Code:
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.sencha.gxt.core.client.util.Margins;
    import com.sencha.gxt.widget.core.client.button.TextButton;
    import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer;
    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
    
    
    public class TextButtonTest implements EntryPoint {
        @Override
        public void onModuleLoad() {
            //I create container of 24 pixels height
            HorizontalLayoutContainer containerWithButton = new HorizontalLayoutContainer();
            containerWithButton.setHeight(24);
            containerWithButton.getElement().getStyle().setBackgroundColor("blue");
    
    
            TextButton textButton = new TextButton("Button for Test");
            textButton.setEnabled(false);
            textButton.setHeight(20);
            //I add my button (20 pixels height) to the container and i specify top and bottom margins (2 pixels each)
            containerWithButton.add(textButton, new HorizontalLayoutContainer.HorizontalLayoutData(-1, -1, new Margins(2, 10, 2, 10)));
    
    
            VerticalLayoutContainer main = new VerticalLayoutContainer();
            main.add(containerWithButton, new VerticalLayoutContainer.VerticalLayoutData(1, -1));
            RootPanel.get().add(main);
        }
    }
    I expect that "containerWithButton" will contain my "textButton" and have 2 pixels top and bottom margins. But actual result is on the picture (I use Mozilla Firefox - 23.0.1, Windows 7).
    incorrectHeight.png

    It isn't what i want, because height of the the TextButton is actually 3 pixels greater than i have set.
    In IE8(Windows Server 2003) situation is worse because it cuts-off bottom of the button.
    incorrectHeightIE8.png

  9. #9
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,644
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    Part of the design goal of the button's default appearance (specifically the Frame pieces) is to avoid ever cutting off the button. The size therefore must be limited by the font used and amount of text present - in the same way that you cannot make the button too short (and thus cut off the bottom of the text), you can't make it too narrow (and cut off the end of the text).

    Instead, the button tries to let you size it smaller by failing to draw the rest of itself (the rounded corner and gradients get cut off) or by bleeding beyond the insufficiently allocated space. If you want to size the button smaller than what can be drawn while still correctly drawing each inner element, you must provide a custom appearance that can achieve this. It may be enough to just change the font size, but I'm not sure what the entire use case you have in mind is where you want the button smaller than it actually has room to draw itself.

  10. #10
    Sencha User
    Join Date
    Sep 2013
    Posts
    3
    Vote Rating
    0
    Ieronim is on a distinguished road

      0  

    Default


    The use case i have in mind isn't to make my button smaller than it actually has room to draw itself. In my example I used height of 20 pixels. I can use 100 pixels as well and the bottom will be cut off in IE8 the same way.
    Code:
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.sencha.gxt.core.client.util.Margins;
    import com.sencha.gxt.widget.core.client.button.TextButton;
    import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer;
    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
    
    
    public class TextButtonTest implements EntryPoint {
        @Override
        public void onModuleLoad() {
    
    
            HorizontalLayoutContainer containerWithButton = new HorizontalLayoutContainer();
            containerWithButton.setHeight(200);
            //containerWithButton.getElement().getStyle().setBackgroundColor("blue");
    
    
            TextButton textButton = new TextButton("Button for Test");
            textButton.setEnabled(false);
            textButton.setHeight(100);
            textButton.setWidth(300);
            containerWithButton.add(textButton, new HorizontalLayoutContainer.HorizontalLayoutData(-1, -1, new Margins(2, 10, 2, 10)));
    
    
            VerticalLayoutContainer main = new VerticalLayoutContainer();
            main.add(containerWithButton, new VerticalLayoutContainer.VerticalLayoutData(1, -1));
            RootPanel.get().add(main);
        }
    }
    My screenshot in IE8 (Windows Server 2003)
    bigButtonIsCutOff.jpg
    I looked into com.sencha.gxt.theme.base.client.button.ButtonCellDefaultAppearance class and found that height for the middle <tr> element of the button is determined in writeText method.
    Code:
    private void writeText(SafeHtmlBuilder builder, String text, int width, int height) {
        SafeStylesBuilder sb = new SafeStylesBuilder();
        if (height > 0) {
          int adjustedHeight = height - heightOffset;
          sb.append(SafeStylesUtils.fromTrustedString("height:" + adjustedHeight + "px;"));
        }
        if (width > 0) {
          sb.append(SafeStylesUtils.fromTrustedString("width:" + width + "px;"));
        }
        builder.append(templates.textWithStyles(style.text(), sb.toSafeStyles(), SafeHtmlUtils.fromTrustedString(text)));
      }
    heightOffset is determined in the constructor as
    Code:
    heightOffset = frame.getFrameSize(null).getHeight();
    getFrameSize method in TableFrame class is the next
    Code:
    @Override
    public Size getFrameSize(XElement parent) {
            return new Size(resources.topBorder().getHeight(), resources.rightBorder().getWidth());}</div>
    And here I have 2 questions.
    1. Shouldn't heightOffset be equal to 2*frame.getFrameSize(null).getHeight()?
    2. Why resources.topBorder().getHeight() is passed as width and resources.rightBorder().getWidth() is passed as height in TableFrame getFrameSize method?

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar