I'm using the chosen script by harvest, and on a couple of pages I'm using a Multiple Select. When you have selected some options, the select box grows in height. The only issue is that I have this is in a table cell which doesn't grow with it :/
Unfortunately the code is in a locked site and it's not easy to duplicate for a demo, but if you go to the chosen site (linked above) and try one of the multi selects you'll see how it grows when selecting multiple items.
I've tried to put it in a div in the table cell and cleared it, but it still goes over the cell.
I've also tried inline-block, and height:auto on the cell, but nothing :(
Does anyone have any suggestions on how I could make the cell height grow with the content?
Here's a screenshot:
Related
I have a report with a tablix in it. I just need to stay the tablix in a fixed position and shouldn't push down other elements down it. If say there are 4 rows which will be visible in the specified space and if more then it should not be visible and shouldn't push down other elements.
I tried several ways to prevent
Added tablix inside a rectangle(act as a container) so if it grouped it
will not push down other elements (didn't work)
Enable consume white space in report=true (didn't work)
Keep items together property is set to true in rectangle (didn't work)
Is there any other way to not to pushdown elements in the report even if the tablix gives more rows. It should only show the rows in the mentioned size.
Edit : 1 (7/28/2018)
All the three elements below is pushed down if the table has more rows.
Either I have to fit the rows in this table by reducing the size automatically if possible or It should not push down the elements.
Also if the tablix has less row the elements will move up. I just need to keep the elements (Expr) should stay in the same position.
You still didn't post your design but anyway, here is what I think you want.
The basic idea to to set the area you want you table to cover by using a rectangle of the same size. Then we will reduce the row heights within reason as the number of rows in the table increases. As you cannot directly change a row height, we can get round this by setting the row height to be very small and adjusting the font, as long as the can grow option is on the cells will grow to fit the font size, giving the effect of changing the row height.
Basic steps.
Create your report and add a rectangle that is the maximum size you want your table to be. In my example it's 38mm high.
Create a table inside the rectangle. I find this easier to create it outside then cut and paste it inside, simply dragging it over the rectangle will not work.
Position your additional text boxes, under the rectangle as desired. Set 'Consume Container WhiteSpace' on in the report properties.
Next we need to decide what the maximum and minimum font sizes are that acceptable. In this basic example I only use 3 sizes, 10pt, 12pt and 14pt. If you want to use more then you could write an expression to scale the fonts more accurately but you get the idea.
You'll need to determine the maximum number of rows you can fit into the rectangle when the minimum font size is used, in my case it's 5 rows at 10pt font. Your query will need to take this number into account and never return more rows than this.
On the table, the click row selector for the detail row (this basically selects all the cells in the row). Next, change the font size property to an expression. In this simple example I used this.
=SWITCH(
Parameters!topx.Value <3 , "14pt",
Parameters!topx.Value <5 , "12pt",
True, "10pt"
)
Next set the row height, choose any cell on the row and set the height to something small, I used 4mm but it doesn't matter as long as its' smaller then you will ever show.
In my example, for testing I added a 'topx' parameter and filtered the dataset using this, but this is only for testing.
The final design looked like this. I added a background colour to the rectangle so you can see how it remains static until it's filled.
Then running with various rows looks like this
finally, only if I exceed my maximum (5 rows in this case) does the text below move down.
You could include a column (let's call it RowNumber) in your dataset that shows the row number of the data. Then in your Tablix filter, you can set the filter to show only values from that "RowNumber" column that are less than or equal to the number of rows you want to display in the tablix.
You can use the same concept to limit the number of rows returned in your query, but without knowing how you are getting the data, it is not possible to help with that.
If you want your report to be that static, why not take a screenshot of the data and include that as an image in your report?
No serious reporting tool will "ignore" records that you pass to it using a Dataset, so that's the place where you will have to "ignore" all unwanted data yourself. Restrict the data in the Dataset to only 4 rows (maybe using SELECT TOP 4 ...).
I have a large table inside a scrollable div. The table contains a person's name, followed by his details. I need the first column of the table to stay fixed while scrolling horizontally, so that the person's name stays visible while look at his details. Similar to this: HTML table with horizontal scrolling (first column fixed)
However, my table is also very large in the y direction, so when I scroll down, the person's name should also scroll up with his details. This almost solves my problem, but not the vertical scrolling.
Please help!
I was trying to solve fixed column issue where a table is inside other DIV control. While solving that, I faced the same issue and found solution via setting up container at ScrollTop property on event of "onscroll". I applied below style to the container:
.floatingStyle
{
position:relative;
background-color:#829DC0;
top:0px;
}
You can look complete solution here: http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html
There are few browser related issues which are also handled there.
For vertical scrolling the problem is keeping the headers and footer fixed. The best way to do this is to actually have three tables - one for headers, one for the data (in a scrollable DIV) and one for the footer. If the table column widths are fixed then that's all you need to do. If they aren't then you'll need to use JavaScript to adjust them. But there is a trick here - a table with AUTO column widths can't be guaranteed to use widths that you specify in JS, especially if a column is empty, or a header text item is quite long.
I've handled this by setting the headers width based on the data, finding if the browser resized and then changing the data widths. Once they are close I then set the table to FIXED mode for the final adjustment.
Have a look here:
http://hifi.goneill.co.nz/cd.php
Click on Jazz, Classical buttons etc to see the tables. Also read the technical notes page as it describes the coding and try out the Ajax version too.
For your fixed column you could do something similar: have two tables and use the offsetTop of one to set the scrollTop of the other. See how my table sets the top line when you sort on a column with empty rows, or saves and restores the current row in the Ajax version when swapping between tabs.
I've found a very strange behavior of a HTML table, where the width allocation of the cells depends on the count of rows. If I have 2 rows the cells have all the same width but when I insert another row the first column expands a little and the second column is narrower than the others.
I have uploaded an example on fiddle.
You can see this behavior when you delete the comment around the third row in the HTML.
Where does this behavior come from?
Table cells will expand to the content unless they have a fixed width. In your example you have table inside tables. Tables tend to have default values such as padding and cell spacing.
To get around this you can use a reset style sheet and modify the CSS of the table and its cells to your choosing
You may need to also perform CSS declarations such as collapsing borders if you really want it to be pixel perfect.
actually columns expands and oontract on the base of contents inside the header or cells
DEMO:http://jsfiddle.net/aPPAL/1/
see the results.
Of all the CSS issues out there, the height paramaters – which should be fairly easy – always vex me.
I'm developing a calendar component for a ExpressionEngine-driven client website. I'm using SolSpace's Calendar plugin (which is fantastic on the back end, BTW), and the templates that comes with it is table-based.
I wanted to make a CSS-based template and I'm stuck on how to manage the height of the cells.
Here's what it looks like now: http://cornerstonearts.hostasaurus.com/calendar
Initially, I set up the cells so that they would expand when the number of events exceeded the available space. I did it as you would expect: min-height:100%; overflow-y:hidden;
I also applied the same settings to the containing DIVs, which make up each week row, and the month container.
The problem was that empty cells collapsed completely, while overflowing cells expanded independently of one another. The latter pushed open the week rows appropriately, but the other day cells within that row would not expand to fill them. As a result, the borders were all out of whack (see attachment).
So I changed the min-height to 120px, but then they don't expand at all. I also tried a combination of height:120px; min-height:100%; overflow-y:hidden; but that didn't work, either.
How do I make it so that the cells expand, and expand the other days in the week with them, when needed, but retain a minimum height when they are empty.
As always, I am super appreciative of any assistance.
Thanks,
ty
You say the templates are table-based. Do you mean html tables exactly? If so I would put the borders you have on your screenshot on the <td>s not on the divs.
The trouble with css is that individual <div>s don't know what the height of each other are unless they are nested inside each other which is an unworkable solution for what you are trying to achieve.
Actually, if it's an events calendar then it is tabular data, it's a table of events. There is nothing wrong with tables per se. Just using them like people did in the old days to lay out an entire website.
Please look at the following page in IE9..
www.homextreme.co.za/default_test.aspx
I have added borders on some of the tables for debugging purposes
On the left choose any region from the dropdown, the page will refresh..
On the right you will see there is now a gap below the table on the right.
I have googled for ages and searched for IE9 table bug fixes and tried them but for the life of me I cannot get that cell to size correctly. Can somebody please help me with a solution for this?
Link to screenshot before I expand the directory on the left.
Link to screenshot after...
Thanks
After making a selection from the list you get a long list on the left column. Since all the content is inside a bigger table (oy tables inside tables inside tables), the right column has to expand vertically.
In the right column there are two cells on on top of the other one (plus the one in the middle for spacing). The one in the top includes the table with the space you don't want, the cell in the bottom has a bunch of other smaller sections. The top cell expands vertically and ends up being taller than the content, and that's the extra space you see. If you change the vertical alignment (vAlign) of that cell (1st row, 3rd cell) to top, you'll see the space move to the top.
The reason it doesn't show up in other browsers is that they probably have different row height algorithms and make the 1st row as small as possible and leave the rest to the 2nd and 3rd. And then IE uses percentages or makes the rows proportional to the content or something.
I'm not sure what to suggest you do to fix this. If you're going to stick to tables for layout, just use one row and have a cell for each column, and keep the content of each column in the same cell instead of splitting it in rows.