I am having problems correctly aligning my content in DecoratorPanel in GWT.
Using the following code snippet, all the content appears to be vertically aligned to the middle (?)
DecoratorPanel decor = new DecoratorPanel();
decor.setHeight("100%");
decor.add(new Label("Test"));
Diagram to explain:
-------- --------
I get this: | | I want this: |test |
| | | |
|test | | |
| | | |
| | | |
-------- --------
I have tried decor.getElement().getStyle().setVerticalAlign(VerticalAlign.TOP);, but it does not seem to affect anything.
How do I align the content to the top of the panel?
Update:
I have notice that if I use a LayoutPanel instead of a DecorPanel everything seems to align properly.
Could the problem be that I am using regular Panels with LayoutPanels? If so, why am i having problems?
A DecoratorPanel uses a HTML table, while the other use a div. So with the DecoratorPanel you set the vertical style on the table element instead of the content, which explains what you see and a reason for not to use this panel. So you either should use a div based panel or set the alignment on the label or the td (which is label.getElement().getParent(), but that's a bit ugly and prone to future bugs).
Get the td element.
... . getElement().setStyleName("myStyle");
Then in your css
.myStyle td{
vAlign : centre;
}
DecoratorPanel is 9-box panel which is used to place images around, specially for rounded corner effect of widgets it mostly useful, there is a a cells around you widget when you set 100% it might be applying some width and height of all cells you are seeing the label in center.
Related
Stumbled across a problem while trying to make a layout.
Base idea. I have a listview with following items
|
o Header
| TextA
| TextBCD
| Some other multiline, variable height text text
|
where the lines and o sign are some kind of a pathway from top to bottom. they should connect one listitem to another.
the texts and header can have different texts. 1-2-3 lines. Variable height.
The problem:
- how to make pathway to match_parent to texts frame? So far I cannot stretch/expand pathway because it will give error/make infinite height list item.
Any ideas?
Code link:
https://pastebin.com/dRhSmWJy
I'm trying to put text on it, but some trailing letters wrap when there looks to be plenty of room on the current line.
child: RaisedButton(
child: Text("Order\nTruffles"),
Result is left justified, but wrapping too early. Everything normal in a wider button, but it just seems to be wasting space:
| Order |
| Truffle |
| s |
Any way to get farther out to the edge? Thanks.
Is it possible to draw vertical lines in the editor that descend from the start of an indented statement, like in IntelliJ IDEA?
public...
| while...
| |
| | for...
| | |
Or if not natively, is there a plugin for this?
You cannot use vertical bars as indent marker character AFAIK, however, in Preferences > General > Editor > Text Editors, you can enable whitespaces markers, and tabs can be rendered as ยป , well aligned and so on, providing I believe a similar feeling than the | of intellij
I have a Table of Figures generated using PDFPTable like so.
--------------------------------------
|Caption|Figure Title | PP|
--------------------------------------
| fig 1 |title text | 2 |
--------------------------------|----|
| fig 2 | This is a longer title| |
| | text that wraps | 55 |
--------------------------------------
| fig N | another title | 89 |
--------------------------------------
I need to generate leader dots from the last line of text; it may have wrapped in the cell.
Here's a sample again showing the Figure 2 item of wrapped titled text and additionally having leader dots from the end of the text to the right side of the cell.
| fig 2 | This is a longer title| |
| | text that wraps.......| 55 |
This is what I want to achieve.
When I write the cell text I don't know where it will wrap and therefore I don't know what the last line of text will be for the purpose of measuring it, and if I do know about the last line of text I'm hard pressed to find the immediate x position following it.
So far, I've tried harnessing Cell Events and Table Events to write the leader dots after the fact. The two problems that have stopped me so far are:
I can't find the x position directly after the last line of wrapped text.
If I try the strategy of underlying dots beneath the entire last line of text (so I don't have to know where it stops in the x position. I do now the y position) the only canvas that allows the dots to appear is PdfPTable.TEXTCANVAS however it writes the leader dots on top of the existing text instead of beneath. I can give the text chunk a background color, so if some leader dots exist behind it they will not be visible (a poor man's crop).
I'm open to any strategy inside the context of the PDFPTable.
First things first: +1 for your question and the answer you provided yourself.
But...
Although your answer may work, there is a better way to achieve your goal. I've written a small sample called DottedLineLeader as an alternative that will be much easier to maintain. This example uses the DottedLineSeparator wrapped in a Chunk object.
Take a look at how such a chunk separator is used:
Chunk leader = new Chunk(new DottedLineSeparator());
Paragraph p;
p = new Paragraph("This is a longer title text that wraps");
p.add(leader);
When we add this Paragraph to a PdfPCell, we get the following effect:
The dots in the dotted line are not '.' characters. Instead it's an actual line (vector data) with a specific dash pattern. Using this approach instead of your own, will significantly reduce the number of lines in your code, use less CPU and result in cleaner PDFs.
Here's one solution that suffices the question requirements.
Each PdfPCell object has a .Column property that "Returns the list of composite elements of the column". Its property ColumnText.LastX returns "The X position after the last line that has been written". This is the position where we want the leader dots to start.
This work can be done in the PdfPTablEvent.TableLayout handler where all the cell positions are known.
class TofEvents : IPdfPTableEvent {
public void TableLayout(PdfPTable table, float[][] widths, float[] heights, int headerRows, int rowStart, PdfContentByte[] canvases)
{
// do the work here
}
}
Because we know where the last line of the text ends on the page, and where the right side the cell is, we can fill that space with dots.
General calculation for creating the proper number of dots for a particular cell is:
// You'll have to get references to things you need from the handler method args -
float ptXCellLeft = GetLeftSideOfCellFromIncomingWidthsArgument();
PdfPCell cell = GetCurrentCellFromIncomingCellsArgument();
// the math -
Font f = getTheFontToUse(); // for measuring the text size in this font
float leaderDotSymbolWidth = f.BaseFont.GetWidthPoint(".", f.Size);
float leaderDotsWidth = cell.Width - (cell.Column.LastX - ptXCellLeft);
string strLeaderDotsFillText = ".".Repeat(Convert.ToInt32(leaderDotsWidth / leaderDotSymbolWidth));
The resulting strLeaderDotsFillText should fit nicely into the last line's space.
I have a GWT application where the GXT Menu/MenuItem widgets are used. The menu is on the top left corner of the work area and then there are multiple levels of submenus to it:
==========================================
[-Main Menu-] ||
| Option1 | ||
------------- | Option2 > | ||
| Option2.1 | | : | || //no space to expand submenu 2; expands on left
| Option2.2 >|---------- | ||
| : |Option2.2.1| | || //Space available for submenu 2.2; expands on right,
|-----:----|Option2.2.2|----| || //therefor overlaps with Main menu options
| : | ||
|-----:-----| ||
by default, the first level submenu opens to the bottom
The second level submenu opens to the left (because there is no space on the right)
the third level submenu opens to the right thus overlapping the main menu.
Is there a way to control the behavior so that submenus at all levels keep opening to the left instead of trying to open on the right while there is space there (and opening on the left only if and only if no space is available to the right)?
Simply put, I want the opposite of what is currently happening: If there is space on left, expand on left; else expand on right.
I looked at the GXT classes MenuAppearance, MenuItemAppearance and the method Menu.setSubmenuAlignment() but nothing seems to provide what I want to do. It seems to me this would have been a common requirement which is why I am trying to look at an API solution. I do not want to extend and write the functionality myself unless that is th only way.