-
Feb 1st, 2016, 09:33 AM
#1
[RESOLVED] Overriding the css for a Report Viewer
Ref this thread
I hit a problem where I added a report viewer to a site and it looked butt ugly due to the css it was inheriting. I'm looking for a decent way to address this. I'll freely admit I'm not too hot on css so go gently on me.
An example of what went wrong was the minimise button that's used to hide the parameters pane on the report. Normally this is a small button, maybe a dozen or so pixels wide. However, it's implemented as an input and the css for the site specifies that inputs have a width of 300px so it was appearing as a horrible, blobby mess.
Some of the ways I've thought about fixing it (and the reasons they won't work) are:-
1. Remove that width specification from the css. This isn't good because I'll be removing it from the whole site. The whole point's to aim for a consistent look and feel so this would be counter to that goal. After all, this will be entirely appropriate for most input buttons on the site.
2. Specify a css class with a more appropriate width and assign it to the button. I can't do that because a report viewer's a black box at design time. I don't have access to the actual button to set its class.
3. Specify a css selector for the id of the button. I can't do that because the button's id is auto generated and includes the id of the report viewer. Different report viewers around the sit will have different ids so, in turn, the button will have different ids. again, this all happens inside the black box so I can't affect this.
At that point I have exhausted my admittedly limited knowledge of css. Can anyone point me in the direction of a solution to this.
The best argument against democracy is a five minute conversation with the average voter - Winston Churchill
Hadoop actually sounds more like the way they greet each other in Yorkshire - Inferrd
-
Feb 1st, 2016, 11:01 AM
#2
Re: Overriding the css for a Report Viewer
Some progress. The report viewer has a CssClass attribute that sets a class on the highest level div the report viewer generates.
So now I think I'm looking for a selector a bit like this:-
element element
Except I need to pass a class in as the first half of that rather than an element. Does anyone know if that's possible?
edit>Turns out it's not only possible but blindingly obvious. You simply pass a class selector in as the first element. Because that link described it as "element element" I assumed it would only work with element selectors but it works with id and class selectors too.
So I've added this:-
Code:
.ReportViewer input[title="Show / Hide Parameters"] {
width: auto
}
...and it's all gravy.
I've got some similar overriding to do with a few of the other elements but I think I can probably make the bird fly.
Last edited by FunkyDexter; Feb 1st, 2016 at 11:28 AM.
The best argument against democracy is a five minute conversation with the average voter - Winston Churchill
Hadoop actually sounds more like the way they greet each other in Yorkshire - Inferrd
-
Feb 2nd, 2016, 06:16 AM
#3
Re: [RESOLVED] Overriding the css for a Report Viewer
I thought I'd post back the amendments I finally made to the css. I'll freely admit that I'm no css expert an it's likely that someone else could make a much better fist of this. None the less, if you're creating a web forms or mvc project in visual studio and accepting the default styling it creates for you, then this will get your report viewer looking decent.
It relies on setting the CssClass attribute of the report viewer to ReportViewer. Then you add the following to your css file:-
Code:
.ReportViewer label {
display: inline-block;
}
.ReportViewer td {
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
}
.ReportViewer input {
width:auto;
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
}
.ReportViewer input[type="image"] {
background-color: transparent;
}
For some reason which I cannot discern, combining the padding and margin attributes for input and label into a single combined selector causes it to go screwy so I've kept them separate.
The best argument against democracy is a five minute conversation with the average voter - Winston Churchill
Hadoop actually sounds more like the way they greet each other in Yorkshire - Inferrd
-
Feb 2nd, 2016, 07:37 AM
#4
Re: [RESOLVED] Overriding the css for a Report Viewer
combining the padding and margin attributes for input and label into a single combined selector causes it to go screwy so I've kept them separate.
You can combine multiple selectors by separating them with a comma.
td, a { ... }
will apply that css to td and a elements.
So if you want to combine some of the CSS you posted, it would be like this:
Code:
.ReportViewer td, .ReportViewer input {
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
}
.ReportViewer input {
width:auto;
}
This will apply the same margins and padding to all of the td and input elements in the report, and then in addition, labels get the auto width.
easy peasy.
-tg
-
Feb 2nd, 2016, 01:34 PM
#5
Re: [RESOLVED] Overriding the css for a Report Viewer
Ah, I tried:-
Code:
.ReportViewer td, input
but that didn't work.
I figured it would treat that as Any td or input which was a descendant of .ReportViewer. I thought it would "remember" the ancestor part and wouldn't need repeating. I'll give it another punt tomorrow.
Thanks TG
The best argument against democracy is a five minute conversation with the average voter - Winston Churchill
Hadoop actually sounds more like the way they greet each other in Yorkshire - Inferrd
-
Feb 2nd, 2016, 02:15 PM
#6
Re: [RESOLVED] Overriding the css for a Report Viewer
nope, the comma resets the ancestry...
-tg
-
Feb 4th, 2016, 03:31 AM
#7
Re: [RESOLVED] Overriding the css for a Report Viewer
Woot! that worked a treat.
Thanks TG
The best argument against democracy is a five minute conversation with the average voter - Winston Churchill
Hadoop actually sounds more like the way they greet each other in Yorkshire - Inferrd
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|