So this is the situation:
I have a Google Spreadsheet with an attached Google Apps Script.
Based on data in the spreadsheet I want to create a document that can be printed onto label stickers. In other words, I have to create an m×n matrix of elements that are of a fixed size (w×h mm). I'd much prefer to be able to do all operations in the web browser, and I can't really see why this should not be possible, but none of the options I have tried so far have resulted in a document where I have the necessary level of layout control:
Creating a Spreadsheet where each cell contains the text for a label.
However, I can only set the cell height and width in pixels, not in
millimetres, and on printing margins that I cannot control are added to the document. (And, in order to limit the display
of the cell contents in the vertical direction I have to do a strange
workaround by merging my cell with the cell below it. What’s with
that?)
Creating a Document with a table where each cell contains the
text for a label. In this case I can set the minimum height of a
cell, but I cannot limit the maximum height. If it were possible to detect the current height of a table cell, I could truncate strings that overflow the cell, but this information is not available. Alternatively, if I could modify the underlying HTML representation of the document I could modify the relevant attributes, but this is not possible either.
Creating an HTML document
with a table where each cell contains the text for a label. In this
case I can directly set the width and height of the cell and use the
overflow attribute to restrict the contents to the given extents.
However, I cannot create an HTML file in my Docs area, so instead I tried to use a
ModelessDialog to contain my table. This sort of works in that in
Firefox and Safari (though not in Google Chrome!) I can print out
the table, but only the first page of it. This is due to the body
of the HTML automatically getting wrapped in a
<div id="guest" style="height:100%; overflow: auto">
and I have not figured out a way of getting rid of this.
Does anyone have a suggestion for how to achieve what I want?
Related
I'm trying to create Table Rows in a Table that can expand by clicking on them (individually).
For example, if I would click on the specified area in the picture below, a Segment/Container (some sort of area) would drop down with content inside.
I've tried a solution that is mentioned in this thread, but the underlying problem is that every element under a Table Row/Cell is subject to the rules and boundaries of the Table HeaderCell. So if I for example try to create a Table Row with a Segment under it, the result will look like this:
As you can see the Segment is inside the new Row but is limited to the size of the HeaderCell.
When doing this I also get this error:
validateDOMNesting(...): <div> cannot appear as a child of <tr>.
in div (created by Segment)
It seems that Segment under Table Row is therefore a prohibited element structure.
Any idea on how the element structure should look to create some kind of area under a Table Row?
The the warning of a <div> not being allowed as a child of a table row is telling you that it is not valid HTML. That is true whether you are using Semantic UI React or plain HTML.
I'd recommend rendering another row below the row you have in your table already. Set a column inside of that row which spans all of the columns. Now you have a container which you can put other UI inside if you want to. You can customize the style of the wide cell if you need to for some reason.
Then you can set a toggle state on the clickable area of your table. You'll probably want to put the click events on the contents of the cells and not the cells themselves.
I threw together a quick Codepen showing how this would work. This gives you a working concept that you can modify based on your use case.
https://codesandbox.io/s/serene-water-ikco9?file=/example.js
I've a Google form/sheet which collects data creating cells that are so large that navigating up and down rows becomes tricky.
The below function should resize all rows (except the header row 1) to 50.
However, when it runs, all rows Auto-fit the data, again making it again unwieldy.
var sheetResponses = 'Form responses 3';
var ss = SpreadsheetApp.getActiveSpreadsheet();
var responsesSheet = ss.getSheetByName(sheetResponses);
var responseData = responsesSheet.getDataRange().getValues();
// Sets all rows to a height of 50
function resizeRowsTo50() {
responsesSheet.setRowHeights(2,responseData.length,50);
};
Can anyone spot what I've done wrong? Even if I manually resize all of the rows to a uniform height beforehand, the function reverts them back to fit the data.
Thanks in advance.
Edit: Link to Sheet
It appears that setWrap and setWraps override any manual or
programmed (setRowHeight/setRowHeights) row height adjustment.
The documentation for setWrap and setWraps says "Cells with wrap enabled (the default) resize to display their full content" (emphasis is mine). That is, the cell width remains unchanged, and the row height changes to enable display of the entire content.
It goes on... "Cells with wrap disabled display as much as possible in the cell without resizing or running to multiple lines". In the later case, the amount of text displayed otherwise depends on the width of the column.
By comparison, when the settings are adjusted manually (the row height set to 50 pixels and text wrapping set to wrap), the row does not revert to auto-fit.
I've re-run my initial tests and I believe that I may misinterpreted your auto-fit comments when comparing my results. My apologies.
The auto-fit outcome appears deliberate on Google's part - even though the effect is very different to the effect of the manual "Wrap" adjustment. These are relatively new commands (at the time of writing) and there are very few examples to be found online.
I've raised this as a feature issue and we'll see whether that generates any clarification and/or change.
I found a poor decision for me in this tricky way:
- set Wrap to text wrapping;
- set setRowHeight;
- cut the string to such symbols amount which is enough for setted Row Height.
(but you still can see "fit to data" when you trying to resize your row)
I mean I fit my data to my rows hight before google sheet fit hight to my data:)
I need to change a plugin that build a calendar with events. The problem is that these events (that can have one or two lines) are built in rows, not columns. What causes that the events with TWO LINES fill in the spaces below the next horizontal events with ONE LINE. Generating blank spaces.
Here is an illustration of what I'm talking about:
What I need to know is if there is a way to "unlink", or "break" the cell connection with the "TR" of the table, so that the cell adjust its height according to its content, not the full height from the "TR".
Sorry if it sounds confusing.
JS Fiddle: https://jsfiddle.net/sua780k5/
link
EDIT: I'm using a plugin called FullCalendar (http://fullcalendar.io/)
I work with ssrs with a dynamic row data in matrix/tablix. There is possibility when I have more than one page (say it two pages) where the data just fill half of the second page and leave a blank space below (half page blank space on the second page). How is the way to fill this blank space with empty rows? (whether rendering empty rows in the tablix, or inserting background image, or anything. I don't have any solution yet as it is dynamic data with many possibilities of the blank space size on the page)
Unfortunately there aren't any settings in the reporter that support this behavior. There are however several workarounds you could use to get the wanted result.
[1]
You could determine the amount of rows that fit on the first page and on the second page, just in case you have items above the
table on the first page. Before you send the datasource to the
reporter count the total rows and check if it exceeds the first page.
Then calculate the number of rows missing to fill an entire second
page (or third/fourth... if you ever get more data). Finally you add
empty rows/objects at the end of your datasource, which will of cource
cause the pages to be filled to the end.
As was pointed out before, this solution is only possible when working
with fixed row heights. If certain columns can have multi-line cells
then these could be checked as well and taken in account when
calculating the number of rows being displayed on the page. This makes
it slightly more complicated but is still a valid solution if you can
predict which columns might be troublesome.
[2]
A second solution would be to hide the table borders and place the table inside a rectangle that spans the maximum size of the
page. The borders of this rectangle can be used to display the table
outer borders and columns can be displayed by adding lines inside the
rectangle. This will cause the columns to fill the last page of the
report automatically. Unfortunately this isn't a solution to display
horizontal grid lines.
[3]
A third approach is adding an extra table directly below your table
with the same size of columns. Using the same method as from the first
solution you could fill the second table to represent the empty rows.
You'll probably have the same issue as with the first solution when
dealing with multi-line rows though.
I believe solution [1] and [3] will offer the most exact solution, if you're willing to do the math. If you don't want any horizontal lines then I suggest using approach [2].
Using an image to overlay the borders is of course another option but then you'll have the same issues when dealing with the multi-line rows. If you plan on working with fixed row heights, where you leave space for multi-line cells then this is becomes a valid approach but so does solutions [1] and [3].
Update:
If you only need the filled pages for printing you could make sure you add enough empty rows to fill at least the entire last page, these may go to a new page (1 new page, not 2... you can use a simple calculated guess for this) and exclude the last page when printing.
Here I have a manually created table using textboxes inside of a list object:
The problem with this is that if one of the textboxes has too much text only it will grow while the others will remain the same height.
Now the other issue is you can't merge two cells in the same column (vertical merge). Is there a way using a combination of controls that I could replicate what is in the picture such that if the Release Description textbox has too much text in it and it grows the other controls will grow along with it?
Two suggestions:
1) If you want to keep your current workaround, and wish to avoid the growing of your textboxes you can set the CanGrow property to False.
A UI solution for the long text will be using ToolTip: Lets say that your textbox can contain only 60 chars, in the textbox expression use the following:
=iif(Len(Fields!YourField.Value)>60, Left(Fields!YourField.Value,57) + "...",Fields!YourField.Value)
means that only 57 charecters will be displayed in the text box, the full text should be display will hovering the textbox (using tooltip).
2) If you want to merge cells vertically you can do some workarounds.
You can place a table inside another table's cell, that way using several tables you can perform your desired output.
Attaching sample of using table within another table (I use 3 tables):