I have a rectangle and its background image is a screenshot of a form.
I have placed many Gauge Panels on this rectangle where check marks need to be.
Based on certain logic, the Gauge Panel will be visible or not.
The problem is that if all Gauge Panels on the left side are hidden, it moves all the Gauge Panels on the right side.
Here's a screenshot during design mode:
And here's when I run it:
I'm assuming it has moved because there was no visible "Yes" check mark.
How should I go about making sure these panels are FIXED inside the rectangle?
EDIT -
I tried putting the items inside rectangles and I'm running into the same problem:
Place your gauges inside fixed rectangles so even when they're not visible, their container rectangles will still take up space in your report on the left side and not interfere with the checks on the right hand side.
My general rule of thumb when trying to do fixed layouts in SSRS is use a lot of rectangles, as they are rendered as absolute DIVs and therefore bend to your whim a bit more in terms of heights, widths, and positioning.
Related
i need to create a footer that can stay at the bottom of every pages of the report, but i can't use the standard function because i need to hide some element before it self.
I hope that i've explained correctly!
Somebody can help me?
If I've understood you correctly, you should be able to do this by creating rectangles to hold your report content.
If you need a header, body and footer then you would need 3 rectangles, if you only need the main body and a footer then 2 rectangles.
For simplicity, let's say you page is 29cm high and the bottom 6cm will contain the footer.
You create a rectangle that is 23cm high and wide enough to hold the elements you need in it. Then your seconds rectangle immediately below will be 6cm.
Within each rectangle, place you report elements (text boxes, tables etc).
Note: If you already have the report elements in your report, do not drag them over the rectangle as this will literally overlay them, instead, select everything you ned, then cut them. Then click in the rectangle to make it active and paste them, this way the rectangle will be the container. If you are creating the elements from new then you can add them within the rectangle as normal.
Once all your body and footer elements are in position, change the 'ConsumeContainerWhiteSpace' property of Report to true. This property will prevent the rectangle from expanding as the number of rows in a table gets larger, as it will use the space in the container first.
I am using SSRS (on top of SQL Server 2014). I am making a 3D horizontal stacked bar chart, but there are some display properties that I cannot figure out, despite all information available.
I Am wondering how/if the two measures in the chart above, a & b, can be set:
(a) The depth of the bar chart. Can I make this smaller? I want a much narrower bar.
(b) The offset of the chart from the axis. Is there a way to make the bar hug right up against the axis? Maybe I'm the only one, but when I look at the right extreme of the bar,I have trouble telling how close it falls to the 300 line due to this unnecessary offset.
Furthermore, does SSRS allow me to control things like the color rendering of the chart? Here is an example from another BI reporting tool:
This one has black outlines around all of the bars. Is SSRS capable of this? Mostly, I am just wondering if SSRS can make a chart that looks more like the latter.
The first two can be easily changed.
To set the bar width and border colour, click on one of the bars then hit F4 to bring up the properties pane.
In the properties, expand Custom Attributes and set the point width to something smaller, say 0.2 and set the border colour and style to your choosing.
Here's a screen-grab of the properties to give a nice garish red border and smaller bars.
To set the bars against the base, go to the horizontal (or vertical if you want to change this too) axis properties and set Side Margins to Disabled.
This gives this output...
I have a rather complicated layout.
At the top and bottom are fixed header/footer.
The central display is broken up into two panels:
the left panel is hideable (may be visible, may not); if it is visible then it has a fixed width. It has a scroll within it if needed.
the right panel is always visible and has a variable width. It is scrolled by the window's scroll bar.
The right panel then consists of two parts that each fill the width of the panel - a set of tabs, of various heights (the visible tab should start at the top of the right panel, as the controlling buttons for those tabs are in the header), and directly below that a 'summary' box of unknown height, which comes immediately after the visible tab, no matter which tab we are looking at and how high it is.
Each of these panels/tabs/boxes consist of an outer div, and various internal divs as needed for the content.
The tabs are made by an outer div containing four inner divs, one after the other.
I can change the HTML and css as needed.
See https://jsfiddle.net/jvw8j62t/ (with thanks to JavaSpyder who provided the basic JSFiddle that I adapted for this demo)
I have tried various methods for the left and right panel, and the best one seems to be https://stackoverflow.com/a/4676510 but I would be happy to use a different method.
I then use jquery to hide/show the left panel (using display:none) and fix the right panel's left margin accordingly, though I am happy to use a different system for that.
However the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none. I cannot easily change this as there are three different libraries from three different sources having this issue.
This means that the different tabs' tops are then positioned incorrectly, because of the visibility css - they follow after each other, per https://stackoverflow.com/a/133064/1910690.
If I try different ways to make the top of the all the tabs fall at the top of the right panel then the summary box is positioned wrong and I can't align it to below the visible tab (changing position when you switch to a tab of a different height); or the right panel's scrolling is messed up; or the bottom of the tab disappears behind the footer; or one of several other problems.
Can anyone suggest a solution to the whole layout?
Is this the kind of thing you're looking for?
I used a flex container to create the left and right sections - the header and footer were easy enough with a fixed position. I used flex-shrink:0 on the left section so its width would be fixed, while leaving the right able to change to the screen width.
I'm not sure I did the tabs the way you specified, but feel free to correct if it isn't right. If you click on a tab, it will toggle visibility:hidden , but of course this leaves an empty gap. You said "the tabs have to be made visible/invisible using visibility: visible and visibility: hidden (not display:none), because the contents of the tabs do not size correctly when using display:none." Is this something we can also take a look at, or perhaps post in another question and link it here? If we could fix this problem, it could simplify this layout issue.
The left section is really another fixed position div with overflow:auto to give it the scrollbars. The height is handled by jquery.
Finally, clicking "Toggle Left Panel" will toggle the fixed position div and the width of the left section from 0 or 200.
With thanks to #JavaSpyder for his JSFiddle, and #Dhaval Chheda for the comment that inspired me...
I realised that I could use position:absolute on the tabs - NOT to position the visible tab correctly, but rather to REMOVE the invisible tabs from the layout of the page, leaving the visible tab and the summary ONLY in the layout of the page - and the result is as wanted.
See JavaSpyder's https://jsfiddle.net/JavaSpyder/fq43Lhez/ which also fixes an issue with the width of the right panel (my original solution is at https://jsfiddle.net/jvw8j62t/ ).
Again, thanks to JavaSpyder and Dhaval Chheda - could not have done it without you.
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I'm having trouble with some report items changing other items' positions when they are conditionally hidden.
I've been using Reporting Services 2000 for printing item price labels as PDFs, with the report consisting of a single table with a single cell for each item. The data fields and other items on the label are all placed inside a single rectangle. Because of the very specific layout required, some of the report items overlap in the designer in order to position correctly on the rendered PDF.
This has worked fine for several years, until we upgraded to SSRS 2008 and I had to migrate the report to the new version.
Now, suddenly, when certain items on the report are hidden (by an expression in the Hidden-property), certain other items shift their positions. In some cases, even the containing rectangle is resized.
After quite a bit of googling, I've come to the understanding that SSRS 2008 attempts to maintain the relative spacing between report items, so that if an item to the left of another one changes in size, the item to the right is adjusted accordingly.
Apparently, hiding an item equates to changing its size to zero, and so the item next to it is shifted left to fill the gap.
However, I do not want this behavior, since all items should stay in their predefined positions regardless of others.
So, does anyone know of a way to "fix" report item positions, so that they are not affected by hiding other items?
I've tried placing the items inside separate rectangles so as to group them, in the hope that only items inside the same rectangle can affect each other, but this does not seem to help.
Any ideas would be greatly appreciated.
In the side by side example, you can place the control that may be hidden into a rectangle big enough to hold both; but then put the other control that must stay in a fixed position BEHIND the rectangle (i.e. the parent of this control is the report rather than the rectangle).
If that's not enough, and the hidden and non-hidden items use the same dataset, you could (shudder) use a giant tablix control with a grouping of =1 and the right number of rows and columns to control the layout (because you can insert rectangles inside).
Some other tricks are to set the color/backgroundcolor properties to white (though in some rendering formats you can click and drag to highlight and still read what was there)... alternately you can go so far as to make the contents of controls all expression based, so as not to produce anything if a condition is met, and so it's basically invisible.
Another approach: create rectangles containing the fields you want to hide, then put a WHITE line across the entire bottom (or top) of the rectangle. This keeps the rectangle the same size even if the fields within it are hidden. A rectangle will shrink if the fields within it shrink, but the line spanning the entire rectangle prevents this from happening.
Not sure if this will help anyone else as it's a fairly specific requirement but it solved my variant of the OPs issue so here goes. I was designing an SSRS report to print labels (in my case the Avery 5164) and the users wanted to pick which labels on the sheet they would print because they may have already used one or two labels from a page. Because the positioning of the printed labels is important I needed them to stay in place even if the labels above them on the sheet were hidden. My solution was to create empty rectangles of the same size as the label and lay them directly on top of the existing rectangles. Even if I hide two, three, four, etc... labels, the rest will stay put.
Just draw a Rectangle, and slightly overlay the Objects with the Conditional Hidden expression with the position of your new empty Rectangle. Objects out to the right will be held in place by the Rectangle. No background colors or anything, just a Rectangle. Works vertically like if you have an address block and you want objects underneath the address lines to stay put. Like so...
enter image description here