Results 1 to 7 of 7

Thread: [RESOLVED] Overriding the css for a Report Viewer

  1. #1

    Thread Starter
    Super Moderator FunkyDexter's Avatar
    Join Date
    Apr 2005
    Location
    An obscure body in the SK system. The inhabitants call it Earth
    Posts
    7,900

    Resolved [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

  2. #2

    Thread Starter
    Super Moderator FunkyDexter's Avatar
    Join Date
    Apr 2005
    Location
    An obscure body in the SK system. The inhabitants call it Earth
    Posts
    7,900

    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

  3. #3

    Thread Starter
    Super Moderator FunkyDexter's Avatar
    Join Date
    Apr 2005
    Location
    An obscure body in the SK system. The inhabitants call it Earth
    Posts
    7,900

    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

  4. #4
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    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
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  5. #5

    Thread Starter
    Super Moderator FunkyDexter's Avatar
    Join Date
    Apr 2005
    Location
    An obscure body in the SK system. The inhabitants call it Earth
    Posts
    7,900

    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

  6. #6
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,532

    Re: [RESOLVED] Overriding the css for a Report Viewer

    nope, the comma resets the ancestry...

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  7. #7

    Thread Starter
    Super Moderator FunkyDexter's Avatar
    Join Date
    Apr 2005
    Location
    An obscure body in the SK system. The inhabitants call it Earth
    Posts
    7,900

    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
  •  



Click Here to Expand Forum to Full Width