CODEWITHSUNDEEP
javascripthtmlcssprintingoracle-apex
RickieRich
RickieRich

Reputation: 1

Oracle APEX - How to scale region to fit on single page when printing

I am only recently beginning my APEX journey (and am certain this is where I want to stay!) so please excuse any 'idiot' comments I may make!

I am using APEX 5.0.3 along with the Universal Theme.

I have followed the steps kindly provided by Christian Rokkitta on the following blog to create an Organisation Tree;

Oracle & Apex Geekery: Pure CSS3 Org-Tree with APEX List

I only have limited CSS and JavaScript knowledge but have successfully made a number of edits to meet our particular requirements. Where I am struggling is around printing regions that do not fit onto the single page.

I have attempted to edit the CSS, I've tried to use JavaScript to open within a new pop-up, I delved into Printing Style sheets and have am currently using an edited version of the 'Standard' page template so that I can use @media Print to stop certain items displaying. On the CSS front I have attempted to use scaling and page breaks but after 4 days of working on nothing else but this printing issue I am starting to wonder if I'm going about it completely the wrong way.

Is anybody able to help with the above? Basically, I need to make the organisational chart fit on the single page when printing; almost as if I have 'zoomed-out' until it is on one page and then print.

I have refrained from putting links or screen-shots however please let me know if you require any further information and I'll get it straight over!

Thank you all!!!

Richard

Upvotes: 0

Views: 1618

Answers (1)

RickieRich
RickieRich

Reputation: 1

I received this reply from the Oracle Community; I am still having issues as I need to scale the print size depending on how many children the manager has.

At the moment larger charts are not being 'scaled-down' enough...

JMcG 10-Feb-2016 21:06 (in response to RickieRich) Check page 4 where I have added the below style declarations specific for printing.

@media print {  
  .tree li a {  
    /*font-size: 15px;*/  
    font-size: 0.8rem;  
    line-height: 1rem;  
    border: 1px solid #000000;  
  }  
  .tree ol, .tree ul {  
    margin: 0;  
  }  
  .tree li::before, .tree li::after {  
    border-top: 1px solid #000000;  
  }  
  .tree li::after {  
    border-left: 1px solid #000000;  
  }  
  .tree li:last-child::before {  
    border-right: 1px solid #000000;  
  }  
}

Thanks, RickieRich

Upvotes: 0

Related Questions