I am using Google Apps Script and the Apps Script UI Builder, which is based on GWT widgets.
If I create a Flow Panel, and add two Labels of 50% width, then these labels appear on separate lines. But isn't 50% + 50% = 100%.
How do I make them appear on the same line?
To try it out yourself:
Open a Google Spreadsheet.
In the Spreadsheet menu, click: Tools / Script Editor...
In the Script Editor menu, click: File / Build a user interface...
Add the widgets to the canvas.
Of course this question doesn't just apply to the problem with the labels. In general I am totally puzzled concerning how to build flowing layouts with the UI Builder. There seem to be (hidden?) paddings and margins that make things very hard.
It's all based on CSS and its box model, and that issue has accumulates cruft over the last 15 years or so. In essence, the widths you specify don't take into account margings (and/or possibly padding, it's been a while), so you will need to add a stylesheed that minimizes them. See something like this CSS reset.
Labels translate to <div>s, which appear on different lines by default. You could try adding float: left to the labels, or change the display mode, etc.
You could also try InlineLabels, which I think compile to <span>s.
If you've already tried all this, then your Labels are apparently just too wide. It's annoying that two 50% objects wouldn't fit on the same line, but what isn't annoying about working with HTML and CSS?
The solution is simple. For both labels, set to zero:
Borders and Margins / Margin
Don't know why I didn't see that yesterday - I was doing a night shift... ;-)
Related
I have built my first dashboard in tableau. When I am logged in and look at this, it looks fine, it consists of 2 horizontal blocks (on the left a double one, on the right it consists of three vizes). When I am logged out and look at the dashboard the right part shows only 1st viz correct, the other two are diminished and you can bearly see them. What might be the reason?
There could be a few things going on. Without a picture, it may be one or more of these:
Use Layout
Containers.
The layout containers will ensure that each part of the dashboard is
exactly where you want it relative to a parent container.
Use tiled
layouts. Floating layouts may cause dashboard parts to be in different places depending on the screen size.
Check to see if you are using Fixed, Automatic or Range sized dashboards. These can also make a difference in appearance based on screen size.
If you are using custom fonts, install them on server to ensure this isn't a part of the problem.
Please do share a picture (or preferably, the workbook) so further investigation can happen.
In the Dashboard tab -> Layout pane, check the Item hierarchy.
When a viz/sheet is dragged and dropped on to the dashboard, tableau, by default arranges them in tiled container.
If you have adjusted the width manually, disable the option fixed width which is pin symbol when sheet is selected.
Make sure that no tiled containers are present and all the sheets are dropped into respective Horizontal containers.
Adjust the width of the viz in the sheet to fit in the view.
These are some common resolutions. Share screenshot for much accurate solution.
I need a CodeMirror editor which starts with a certain width and then grows automatically to the right to match the maximum line length. I.e. roughly what CodeMirror does when height is set to auto, but with width.
Here's a self-contained example. The editor grows automatically along the y-axis fine, but not along the x-axis. By tweaking the CSS, I can either have a fixed width editor with a scrollbar, or one which fills the entire width of the browser, but not one which grows as you type. I assume overflow-x is relevant, but I don't understand how it interacts with other CSS size properties set on parent elements. I also tried setting that property on CodeMirror-scroll, but it didn't help.
I believe this can be done using CSS properties alone. In fact I have this behaviour in my application already, but growing to the left, rather than the right, but I don't understand why it happens, or how to reproduce it in a small example.
This question is essentially the same, but for the vertical scrollbar.
Simply add float:left to the CodeMirror div.
<div id="here" style="float:left"></div>
This is not something CodeMirror supports. You may be able to get something working by setting .CodeMirror's width to (-webkit-)fit-content, but there will likely be corner cases where this breaks the scrollbars or cursor placement.
I have a very busy GUI - lots of textboxes - the end result needs to be 21 columns with 24 text boxes in each column (1 text box for each hour of the day) I am over half way there.
I am getting frustrated with things moving on me as I add a text box or as I adjusted an existing box or title or label.
Is there a way to "lock down" things once I am happy with the look so that I know they can't move and then continue adding pieces?
Is there something I am missing with this problem. I am using (right-click) same size and align (left to column) functions to help. These help some. But I still run into the magic text box that when dropped in things move all around on me.
I am using NetBeans 7.3.1
Thanks
I have had similar problems and issues.
Two suggestions: 1) I have found that if I skip the order I place the textboxes helps with things moving. Meaning - if I had a column of boxes, i would place every other one then go back and fill in. It seemed to behave.
2) you might check into using the swing layout - check the Oracle site.
good luck
I'm having some problems in displaying elements in different regions.
After installing and using Croogo for a while, I made several trials
adding custom elements and custom menus. If I choose region
'right' (being the default region for elements used by Croogo once
installed) everything is fine and I'm able to add anything I want
without any problem.
Anyhow when I choose any other region to display my element (header,
footer, left) nothing is displayed (looking at the source of the page
I noticed the element is not even rendered).
Am I missing something? How can I actually use different regions to
display elements/blocks?
I'm also a bit confused about the 9 regions (named regionX with
X=[1,..,9]) available along with header, footer, left, right. What's
their purpose? Do they actually represent a region on the screen or
they have been left not configured?
Any help will be greatly appreciated.
You probably need to adjust your theme.json so that the desired regions is loaded.
I want to create a custom panel/layout and it's seeming pretty impossible at this point. I need the components to start in the upper left corner and stack downward until they fill the panel vertically, then wrap to the top of the next column and so on until they eventually fill the screen and create a horizontal scrollbar. After an entire day of trying I've decided it's only possible by abusing GWT (and I assume the whole web browser) adding crippling complexity and terrible performance. Please let me know if I'm missing something and layout like this is possible. Thank you!
Lame solution: Have a small (almost invisible) AbsolutePanel where every string is displayed within a div and measured (getClientWidth/height()). Then each panel can calculate it's size based on the strinsg, borders, padding, etc. it contains. Once each panel knows it's size, they can be layed out relative to the sizes of the other panels in the contianer.
Check out FlexTable, which allows you to specify the row,column for the widget to be added