I have a display difference when I deploy my report from what I can see in the Preview.
My report is composed of rectangles with elements inside (textbox, indicators, etc.). On the top there is a white rectangle which the size is the same as the body. The background of the body is a light blue. It should appears like this:
But when I deploy it, it appears like this:
There is a strange space between the top rectangle and the end of the body.
I am using Chrome. On Firefox, the space between the white rectangle and the end of the body is smaller but still exists.
The rectangle hasn't any border. Here are his properties:
For the body, I even tried with a white border to hide:
This is the property of the report:
I also tried with a table instead of the top white rectangle but I have the same result.
Related
I am trying to implement a sidemenu with a background image but I don't understand how to make it responsive also vertically...
I have this image https://ibb.co/Pzyyyh2 whose size is 320x1000px. It's a very tall white image that a certain point becomes black.
I'd like to have this black detail to stay always at a certain point of my sidemenu (the transition from white to black should start before the social link part).
As you can see here, on iPhone X emulator, it works as expected: https://ibb.co/C7Nm6b7.
While on another device such as Moto G4 this happens: https://ibb.co/S7tQwJV
You don't need the white part of the image, if what you're trying to show is the black, then just use the black. If your image is an svg, it will always expand/contract properly, without visible pixelation. The rest of the footer should have a background-color equal to that of your img.
If you want to use skew, then make a first div (the parent/wrapper), then place it right before your footer area. Then inside the wrapper, add the skew-div. Make the parent have overflow:hidden so the excess of the skew-siv doesn't become visible past the borders of the parent.
Like this:
Then, inside your 'magic-div', you'd have the following:
The parent gets width: 100%; and overflow:hidden;. The child skew div inside gets width:100%; too. If you're using background with an svg as suggested earlier, the background-size rule should be 100% auto or cover, depending on the scenario (the widths you're covering + the angle of your skew). Give it a try and let us know how it went.
I would like to remove excess space that is appearing between the legend of my bar chart and where the bars begin. It appears that the amount of this white space changes depending on how many bars are in the chart (determined by the parameters the user selects). Additionally, there is white space about the same size that appears at the bottom of the report.
I have tried updating the custom position and location of the chart and the inner plot. I have tried using the Point Width as well. See highlighted excess space in red pen below.
I am trying to incorporate the following image into the cover page of my report.
It's currently saved as a PNG file with dimension 1275 x 1650.
Like a lot of online posts suggested, I
* inserted a rectangle
* set the image as the background image
And here are my properties for the rectangle.
When I rendered my report to PDF, the image was splitted
into multiple blank pages and the bottom of the graphic (with logo and URL)
didn't even show.
How can I make sure this graphic is displayed fully on only the first page?
I can't tell if you have other objects on your cover page, but here's what I did to get this working correctly.
Add an image object to your report.
Make sure the margins are set fairly low(I used .25in for top, bottom, left, and right).
With the margins set at .25in, I set the image object to a size of 8in x 10.5in to fill the remaining space on the page.
In the image object properties, set padding options all to zero and Display to "Fit to size".
Now the trick here, is to put the image object in the very top left corner and resize the report to the exact size of the image object -- no whitespace in the design view. For me, this returns a single page report with the entire image shown on a single page.
I have a report, and on that report is a rectangle with a bunch of textboxes that are only visible based on a Visibility Expression for each box.
When I run my SSRS report on my desktop, or if I convert it to a PDF from the server, it looks fine. When a textbox is not visible, the box underneath moves up to fill the void.
When I just let it render through a browser on the server using (&rs:Command=Render) it's adding white space to move it to the middle of the rectangle so it is not formatting properly.
Here's what it looks like when only one of the lines is visible when it's on my desktop or when saved as a PDF (or image) file:
The red box is moved up to right underneath the black box when all the other boxes are not visible. That's what I want.
When it's rendered on the server, it looks like this:
It's moving the red box to the middle of the rectangle for some reason.
It's not the browser, I've tried 3 and it looks the same in all of them.
I've setting the consume container white space property to both true and false for the report and it makes no difference.
I can't add the textboxes to a tablix as this is a subreport that takes parameters and cannot have a datasource or dataset.
Any ideas on how to get rid of that whitespace when only one or a few lines are visible?
Thanks.
I have rectangle which act as container for other elements.
Can I somehow setup some property of rectangle to round its corners, in fact, to get rounded box.
In css it is easy, but how to do in SSRS?
Actually, it is fairly easy. I had a bunch of text boxes that a rounded corner border needed to be placed. The first thing I tried was an image control. I placed it on top of my text boxes and set it to "Send to back." It worked well in print rendering, however, in the browser rendering the HTML placed the textboxes after the image making it look horrible.
The solution was this:
Go into paint and draw a rounded corner box the size you need.
Cut the set of text boxes to surround with rounded border.
Place a rectangle control over the entire area all the text boxes covered.
Paste my text boxes onto the rectangle.
Right-Click and choose rectangle properties.
Select the Fill Tab and select "Embedded" image source.
Click Import and select your paint image(i used PNG but it shouldn't matter).
Click Ok.
Find and expand BackgroundImage on Rectangle and change BackgroundRepeat to "Clip.". Otherwise, your image is repeated.
The report should now render properly in both print and html rendering views. Unfortunately, this doesn't seem to stretch/size, so unless you can figure that one out, you will have to repeat whenever you need a different sized rounded box.
Brian
All solution I have seen use a background image inside a textbox.
But you get problems when you try to resize the textbox.
The solution is to insert a 3x3 table inside the texbox.
Insert the 3x3 table
Insert an image on each corner. They will be a quarter of a circle each. (This image is created in MS Paint or your favorite image program)
Make those 4 corners cells unresizable (Set property CanGrow to false). Make sure all the other cells have CanGrow = true if you need it
Make all the cells the same background color (same color as the image you draw).
Write your text in the middle cell.
OPTIONAL: It might also be a good idea to fuse the 3 vertical middle cells if possible. It will allow more space to write text in the cell.
This way you won't have to create new image everytime the size of your textbox change.
You would have to build an image that has a transparent center for adding your text.
All this would be more work than I would want to do just for a report.
I would stick with just the standard textboxes.