In Google Apps Script UiApp, is there any way to merge 2 adjacent cells in a Grid?
Quick link to Grid doc
Looking through it, I see nothing about merge capability. Take the following example:
What I want to do is merge the cells # [0,5] and # [1,5] So that the TextArea for Description is a bit better-centered.
Is there any possible way to do this at the current time? I don't want to have to revert to using Flex Table for this... is that my only option? Are there any other workarounds like embedding the encircled elements in another panel or something similar?
Solution: CSS margin properties on the Grid or Widgets (through setStyleAttributes()). Apparently this is the behavior of Widgets in a Grid: CSS styles almost bypass Grid constraints; i.e., if you set a bizarre bottomMargin on a Widget, it can almost move out of the Grid, which acts as a "centering" between two cells. So I just did the following:
textArea.setStyleAttribute("marginBottom", "-75px"); which gave the following result:
I'd try using 2 grids, one with the textArea (and the 5 widgets of the first row) and the other with the other elements...
This latter should have a negative top margin to allow you to get the right vertical distribution on the 5 first left widgets.
I didn't try the negative margin but it should work.
Let me know if you try it :-)
Related
First of all take a look to this picture:
I'm trying to build this using Twitter Bootstrap (3.2.0) but doesn't know how to. So after read TB docs and Google some resources I came with this possible solutions:
Not use row and cols-x class from TB which may cause issues later for responsiveness and so on
Use them and overwrite the behavior by removing any padding or margin causing the gap between the two div
In this case which one should I use? What yours use on this cases?
As second question and related to the same:
How do yours calculate the right cols-x to apply in order to get as close as image width is? Any formula? Right now I'm doing using Firebug and applying cols on the fly but this is insane, any advice?
If you want to make two columns without gaps between each use own custom columns
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
I'm new here and to Bootstrap so apologies for any stupidity.
In Bootstrap I'm trying to display .span4 in a row over 2 columns, this is because of page width, which should eventually nest into each other and leave no space. However with all I have tried at the moment I can still only manage to get each .span4 to lineup with the bottom-line of the longest span4 I have created. The site will eventually be dynamic and the size of the list could change frequently.
Looked at many different questions on here but no joy yet.
I have an example of my tryings here http://jsfiddle.net/joebarr/YJunh/
I think you're looking for jQuery Masonry. See for example: How can I float elements with different size in a tile or How to Create Grid/Tile View with CSS?
In case it must be CSS only, the accepted answer for the first link above ( https://stackoverflow.com/a/15320187/1449799 ) shows a good approximation.
I have to implement this grid of divs. It won't change often, but it may at some point (meaning a box may be removed, and another resized). Each black box will eventually contain an image or a word, but that's not important.
How do I pull this off? Is there a more elegant way than by absolutely positioning every single box and manually entering every X/Y/width/height?
A grid based approach would be my recommendation.
Something like: http://960.gs/
EDIT (some more options)
http://developer.yahoo.com/yui/grids/
http://cssgrid.net/
http://weknowwhatyouredoing.com/
I'm trying to make a table like this one where I have a profile image to the left, a bold title/name and text underneath the bold title/name, and date/time stamp underneath that... basically the same views as on that website (http://weknowwhatyouredoing.com/) or better (or twitter tweets).
Anybody know of any tutorials on how accomplish this? I'm currently using table with multiple columns but it seems that when one cell is big, all the cells in that row become the same height and i don't like that. In android this is called a list view but i'm not sure what it is in the html/css world, any help please? Thanks in advance
You could make multiple tables floating next to each other. The elements on the website you show aren't aligned as fa as I can tell.
A tutorial on rowspan and colspan can be found here.
If you make the image span 3 rows, you can put the bold text, content and date stamp each into one row. With valign you can vertically position elements within a row if the row becomes higher than the content. This will probably happen if the 3 rows together are higher than the one spanning row containing the image.
As a quick fix for your issue with the equal row heights, you could use the same layout method as they use on weknowwhatyouredoing.com.
Wrap each column in a separate <div>, and then place your <table> inside.
4 containers, 4 tables with independent row heights.
You shall give a look at the Twitter Bootstrap CSS library Twitter Bootstrap
It's pure HTML5/CSS using only divs.
for improve your knowleges in HTML, you can see W3C (Word Wibe Web Consortium) specs. For sample, if you see this page, W3C explain all structure, attributes, for Table element.
You can find lot of tutorial in google ( search "tutorial create Table HTML" ).
Also, you can help you to understand website structure with browser plugins that display hover element in specific website. ( firebug for Firefox and Chrome, Dragonfly for Opera browser...)
Why not use multiple list elements? Tables definitely don't give you flexibility for responsive designs. Making multiple columns of list elements can be rearranged as needed with limited restrictions