how to increase the default size of HeaderButton in MGWT - gwt

I want to increase the default size of HeaderButton Widget in MGWt.I tried this:
headerBackButton.setHeight(String.valueOf(50)+"px");
headerBackButton.setWidth(String.valueOf(50)+"px");
headerBackButton.getElement().getStyle().setWidth(50, Unit.PX);
headerBackButton.getElement().getStyle().setHeight(50, Unit.PX);

I have just tried in the mgwt.showcase (class UIViewImpl) and using the headerBackButton.setWidth("75px"); works perfect (just after headerBackButton = new HeaderButton(); ).
Have you checked you do not have other elements or other cssĀ“rules that block the resize??
For example, in the mgwt showcase after 80px the button does not get bigger because the p child element has the rule max-height

Related

Ag-grid "Size to Fit" on desktop and "Auto-Size" on mobile

I need ag-grid to be responsive on all devices. When I tried this.gridApi.sizeColumnsToFit() It looks nice on desktop, but in mobile screen column width gets zero
as shown in this image.
When I give this.gridColumnApi.autoSizeColumns(allColumnIds, false); it leaves a blank space if there are less number of columns like shown in this image.
Is there a way to autoFit in desktop and autoSize in smaller screens?
you can call them after another. I'd suggest to first call the autoSizeColumns.
Afterwards you calculate the actual tableWidth with something like
const tableWidth = grid.columnApi.getAllColumns()
.reduce((i, current) => i += current.getActualWidth(), 0);
and then you calculate the actual container width
const {left, right} = grid.api.getHorizontalPixelRange();
const containerWidth = right - left;
and only if the tableWidth is smaller than the container width you call `sizeColumnsToFit``
if (tableWidth < containerWidth) {
grid.api.sizeColumnsToFit();
}

2D Unity: expand UI element based on text to the bottom

I've got a game object (InfoBox) with a..
Vertical Layout Group (Padding 20 on all sides, Control Child Size Height active)
an image
a Content Size Fitter (Vertical Fit set to Preferred Size, Horizontal Unconstrained)
Inside this InfoBox is a Text-Element and every time I update the text, I want the InfoBox to expand or collapse, but to the bottom only. Right now my InfoBox always expands or collapses to both top and bottom, but I don't want that to happen. How can I achieve that? I added some screenshots to better visualise this.
These are my settings for the InfoBox:
And these are my settings for the text:
And this is what happens when I use for example less text, the box collapses from bottom and top, but I want it to stay fixed at the top (on the same line as the green box next to it) and only collapse on the bottom:
Any help is really appreciate!
You main issues looks like you are using a ContentSizeFitter also on the parent object. So it depends how this parent object is aligned with its according parent.
This sentence sounds strange I know but what you did is basically shifting up the alignment responsibility to the parent.
=> Make your UI element aligned to the top and grow downwards.
All you need to do for this is either set
Anchors Min y -> 1
Anchors Max y -> 1
Pivot y -> 1
or simply go to the RectTransform Inspector, open the alignment tool and hold Shift + Alt and click on the top alignment:
For the second instead of using the ContentSizeFitter I prefer to have my own script that only does what it should and nothing more.
You can get the preferredHeight which is exactly the value you are looking for.
The following script simply always applies the preferred height to the text rect. Using [ExecuteAlways] this also works in edit mode. Simply attach it on the same GameObject as the UI.Text component
[ExecuteAlways]
[RequireComponent(typeof(Text))]
[RequireComponent(typeof(RectTransform))]
public class TextHeightFitter : MonoBehaviour
{
[SerializeField] private RectTransform _rectTransform;
[SerializeField] private Text _text;
private void Update()
{
if (!_text) _text = GetComponent<Text>();
if (!_rectTransform) _rectTransform = GetComponent<RectTransform>();
var desiredHeight = _text.preferredHeight;
var size = _rectTransform.sizeDelta;
size.y = desiredHeight;
_rectTransform.sizeDelta = size;
}
}

Get the size of wrapped text in Label

If I create a Label in a 500x500 area with wordwrap, how can I find out the height of the wrapped text ? I'm looking for the yellow height, not the salmon height.
Answer of #idrise doesn't work for system font And here I give a more flexible answer.
Assume we want to create a text/label which has a fixed width, but dynamic height according to text's length. for that you can use below code:
Label *lbl = Label::createWithSystemFont("aaa aaa aaa aaa aaa aaa", "Arial", 50);
lbl->setDimensions(FIXED_WIDTH, 0); // "0" means we don't care about wrapping vertically, hence `getContentSize().height` give a dynamic height according to text's length
////
auto dynamicHeight = title->getContentSize().height; // According to text's length :)
And obviously for fixed height you can do similarly.
Hope Help someone :]
This may seem a little counter intuitive.
First you set the dimensions with an excessively large height.
Calling getLineHeight and getStringNumLines will calculate the height based on the width passed.
You send the width and height back to setDimensions.
Now your labels getContentSize() will return the actual size of the text.
IE
label->setDimensions(width, 2000);
label->setDimensions(width,label->getStringNumLines() *
ceil(label->getLineHeight()));
They added the functionality you want:
Added three overflow type to new label: CLAMP, SHRINK, RESIZE_HEIGHT.
Overflow type is used to control label overflow result, In SHRINK mode, the font size will change dynamically to adapt the content size. In CLAMP mode, when label content goes out of the bounding box, it will be clipped, In RESIZE_HEIGHT mode, you can only change the width of label and the height is changed automatically. For example:
//Change the label's Overflow type
label->setOverflow(Label::Overflow::RESIZE_HEIGHT);
mTexto=Label::createWithTTF(mTextoHelp.c_str(),CCGetFont(), 30);
mTexto->setHeight(100.f);
mTexto->setOverflow(Label::Overflow::RESIZE_HEIGHT);
mTexto->setDimensions(mSize.width*0.8f, 0.f);

vb6 Inner Form Resize

Are it's possible to resize vb6 inner form, because if i use Form1.Height or Form1.Width it's including window border height and width, so i just can use this code in one window theme (ex. it's work best in WinXP with XP theme, but not work in WinXP with Classic theme, it's seen too long), any suggestion?
What you can do is compare the Width (the outside size) to the ScaleWidth (which is the inside size) to get the size on the non-client border. Likewise, you can compare the Height to the ScaleHeight to get the non-client size at the top and bottom. From that you can set your final height and width based on the inner (client area) size you want plus the non-client size.
Something like this could go in your Form_Load:
Const DesiredClientHeight as Single = 3435
Const DesiredClientWidth as Single = 3345
Dim fNonClientHoriz As Single, fNonClientVert As Single
fNonClientHoriz = Me.Width - Me.ScaleWidth
fNonClientVert = Me.Height- Me.ScaleHeight
Me.Width = DesiredClientWidth + fNonClientHoriz
Me.Height = DesiredClientHeight + fNonClientVert
Be aware that the form width and height are always in Twips, so if you change your scale mode to something other than twips you will need to account for that.

LWUIT Form.show() has a weird margin (or padding)

When i add a Form to LWUIT using form.show(), the form is not set exactly in the (0,0) coordinate, it's leaving like 20 pixels in the top and 3 on the left.
I'm developing for the Nokia SDK 1.1 FYI and i'm using their version of LWUIT
Let me know if there is a workaround on this.
Cheers!
Alberto
EDIT:
Here is how i'm creating the Form
Display.init(this);
this.view = new Form();
this.view.setLayout(new CoordinateLayout(Display.getInstance().getDisplayWidth(), Display.getInstance().getDisplayHeight()));
this.view.setScrollableY(false);
this.view.show();
This shows a padding on the top and on the left side (Bigger on the top than on the left side)
See a screen shot:
Found the 2 Issues:
1) I had to set the titleArea padding and margins to 0 like this:
this.view.getTitleArea().getStyle().setMargin(0, 0, 0, 0);
this.view.getTitleArea().getStyle().setPadding(0, 0, 0, 0);
this.view.revalidate();
2) For the left padding, it was in the label where i was placing the photo, so just changing it's style (padding) to 0 made the trick
Cheers,