Question 184005 in Html Question posted in
Some basic documentation can be found here.

Html – div element is not visible on print page

I have a table. Above the table, I create a horizontal line. When I click on the print button, the whole page is showing except the lines. The lines are generated as follows:

$attachLinesTo = $('#dataset-wrap')

function createLine(x1, y1, l, colorClass) {
  return $('<div>')
    .appendTo($attachLinesTo)
    .addClass('line ' + colorClass)
    .css({
      position: 'absolute',
    })
    .width(l)
    .offset({
      left: x1,
      top: y1
    });
}

In the normal view (without printing) the page is showing everything correct. Only on the print page, the lines are missing.

I want to show the lines in the print view.

Here the css:

.line {
  transform-origin: 0 100%;
  height: 1px;
  border: 0;
}

.black {
  background-color: black;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I changed know the div as follow:

    <div class="line black" style="position: absolute; width: 238.828px; top: 218.618px; left: 821.484px;"></div>

    css is know:

            .line {
        transform-origin: 0 100%;
    }

    .black {
        border-bottom:1px solid #000;
    }

    it is visible on the page but not on printing.


  2. 0

    By default, your browser doesn’t print background colors.

    You have to either enable background printing in your browser, or just use a border-top (or border-bottom) that is 1px and that should work.

    .line {
  transform-origin: 0 100%;
}

.black {
  border-top:1px solid #000;
}
    <div class="line black"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search