I am having some trouble with GWT Labels and html/css.
I have a horizontalPanel, and I am trying to align the 2 labels so that each 1 is on an end of the Horizontal Panel
1) [Label 1 --~500px-- Label 2]
However, it seems that the 500 px is divided up into 250px each for a label, and theres a white space. (First I tried to make it like like this)
2) [Label 1 Label 2 --~500 whitespace px-- ]
but what happens is this
3) [Label 1 -~250 whitespace px- Label 2 -~250px whitespace-- ]
I would like It to be like 2) so then i can set the HorizontalAllignment on the Horizontal Panel to ALIGN_JUSTIFY which would put on one each end. I have no idea how to do it. I tried using display: inline but that doesnt seem to work as I hoped (it makes the border just go around the text but the whitespace is there)
Here is the code I am messing around with .border is just (border: 1px solid Red) so i can visualize how the border and size is calculated
HorizontalPanel p = new HorizontalPanel();
p.setWidth("500px");
//p.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_LEFT);
//p.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_JUSTIFY);
Label l1 = new Label("Label 1");
Label l2 = new Label("Label 2");
l1.addStyleName("border");
l2.addStyleName("border");
p.add(l1);
p.add(l2);
I just threw this together from memory, give it a try and let me know if it works like you expect.
HorizontalPanel p = new HorizontalPanel();
p.setWidth("500px");
p.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_JUSTIFY);
Label l1 = new Label("Label 1");
Label l2 = new Label("Label 2");
l1.addStyleName("border");
l2.addStyleName("border");
p.add(l1);
p.setCellHorizontalAlignment(l1, HasHorizontalAlignment.ALIGN_LEFT);
p.add(l2);
p.setCellHorizontalAlignment(l2, HasHorizontalAlignment.ALIGN_RIGHT);
If that doesn't work, have you tried setting text-align:right; in your css for the second label?
Related
I use these lines to dynamically create buttons and text boxes.
For i As Integer = 1 To 100
Dim newButton = New Button()
newButton.Text = i
newButton.ID = i
newButton.CommandName = i
newButton.Style.Add("width", "20%")
newButton.Style.Add("height", "100%")
Panel1.Controls.Add(newButton)
Next
For i As Integer = 1 To 100
Dim newtext = New TextBox()
newtext.TextMode = TextBoxMode.MultiLine
newtext.Style.Add("width", "20%")
newtext.Style.Add("height", "100%")
Panel2.Controls.Add(newtext)
Next
While the buttons fit the page width correctly, text boxes leave a space to the right.
1 2
I've tried assigning a class instead of width, but it doesn't work.
"min-width" also doesn't work.
How to set the text boxes to fit the page width?
I resolved setting textbox border-width and padding to zero pixels.
newtext.Style.Add("border-width", "0px")
newtext.Style.Add("padding", "0px")
I have created this simple address form from devexpress components in MVC view. It consists of two groupboxes - the first is with border for 4 rows. The second is inside first groupbox at last line which consists of 3 elements. The first element is 30px wide, the second 60px and the third should just fill the rest of space so he doesn't have fixed width. The whole box is 250px wide. My problem are spaces between textboxes in second groupbox which I can't get rid of. I want the second textbox to be aligned right behind the first and the third textbox right behind the second which will take all the remaining space. I tried all sort of horizontal alignment but the spaces still persist and I start to be desperate - viz picture belove:
Thank you for your help.
Edit: the code here:
var group1 = settings.Items.AddGroupItem().FormLayoutGroup(1, Unit.Percentage(100), GroupBoxDecoration.Box);
... // other textboxes
var group2 = group1.Items.AddGroupItem().FormLayoutGroup(3, Unit.Percentage(100), GroupBoxDecoration.None);
group2.Items.Add(model => model.AdresaOsobyId.Adresa.Stat.ID).ToLambda(x =>
{
x.TextBox()
x.Width = 30;
x.HideCaption();
});
group2.Items.Add(model => model.AdresaOsobyId.Adresa.Psc).ToLambda(x =>
{
x.HideCaption();
x.TextBox();
x.Width = 60;
});
group2.Items.Add(model => model.AdresaOsobyId.Adresa.Posta).ToLambda(x =>
{
x.HideCaption();
x.TextBox();
});
I want to add 3 numbers next to each other on the same row in a table, I also want there to be about 100 units padding between each number. Under these numbers are words that correspond to them, for example:
0 0 0
Total Wins Losses
However, if the I use padding, ie table.add(actor).padLeft(100);, then changing the number from say 0 to 160 would also move the number to the right, since I'm using padding. example:
160 0 0
Total Wins Losses
How can I avoid this behaviour? It must be a common scenario.
I suggest to create a custom class that extends the WidgetGroup.
Inside this class you manage two labels, one for the number and one for the "label" of the number.
Then you can easily set the relative position of the labels respect each other without keeping in mind where they are positioned inside the tabel.
Maybe the constructor of this special class could accept a String for the "label" and the initial value of the number.
Tell me if the idea it's clear or if you need more info.
Luca
What I would do is set all the cells in the table to be centred, by default, with a little padding on left and right, as follows:
Table table1 = new Table();
// Set defaults for all cells in table. Alignment and padding in this case.
table1.defaults().align(Align.center).pad(0, 20, 0, 20);
Label number1 = new Label("160", skin);
Label number2 = new Label("0", skin);
Label number3 = new Label("0", skin);
table1.add(number1);
table1.add(number2);
table1.add(number3);
table1.row();
Label label1 = new Label("Total", skin);
Label label2 = new Label("Wins", skin);
Label label3 = new Label("Losses", skin);
table1.add(label1);
table1.add(label2);
table1.add(label3);
table1.row();
Try that.
I am generating dynamic multicell with string. Like A, B, C etc. I want to center those multicell on the page. I need to make the $pdf->SetMargins() dynamic, which means it will automatically center itself when the content is loaded. This is a code I tried but something is wrong.
$pdfWidth = 210;
col = 9; // This is dynamic so it can be any value from 5-20;
$mar = (($pdfWidth + ($col * 8)) /2)/2;
$pdf->SetMargins($mar,0,0);
I'm not sure why you're dividing by 2 twice. If you take the total width of the page, minus the content and divide that by two you have your desired margin already. Also, don't forget to set the override parameter in SetMargins() to 'true'.
$pdfWidth = 210;
$col = 9;
$mar = (($pdfWidth - ($col*8)) /2); //Only one division by 2 is required
$pdf->SetMargins($mar,0,0, true); //the 'true' is necessary or it won't override the default margins
//VERY IMPORTANT that you set all the above BEFORE adding the page!
$pdf->AddPage();
//Content of page
Now any MultiCell with cell width of 8, as you provided in the example, should be perfectly centered on the page.
I want to get radioButton's label height in as3.
I have 5 radio buttons in my radioButton group. One of those radioButtons has a three line label, another has a single line etc...
When I try to access the radioButton.height, I always get same value regardless of the label height.
I need to know the height of the label, so I can set the radioButton y coordinate accordingly.
can I change the radioButton's label height?
spacing = 30;
rb.label = tempQQString //from xml. long or short string anyone
rb.group = myGroup;
rb.value = i + 1;
rb.x = answerX;
rb.y = questionField.height + (questionY+20) + (i * spacing); // here use rb.height or rb.textField.height
trace("rb height**" + rb.height) // always get velue 22;
addChild(rb);
RadioButton and any fl control that extends labelButton (all the ones that have a label), expose the actual text field with the .textField property.
So for your example, instead of using rb.height, you would use rb.textField.height to get the height of just the label portion of the control.
You can also set properties on the textField as well.
rb.textField.background = true;
rb.textField.backgroundColor = 0xDDDDDD;
rb.textField.multiline = true;
rb.textField.wordWrap = true;
rb.textField.autoSize = TextFieldAutoSize.LEFT;
now, for your scenario, you may be better off just using the radio button's bounds instead, as it will be the REAL height of the object.
rb.getBounds(rb).height; //this will be the true height of the component.
If your label was one line and your icon was taller than your label, you could potentially be getting a value from rb.textField.height that is smaller than the real height of the radio button.
Try this.
for(var i=0;i<rb.numChildren;i++){
if(rb.getChildAt(i) is TextField){
var txt:TextField = rb.getChildAt(i) as TextField;
trace(txt.height+":"+rb.height);//traces the height of text field and radio button
}
}