phpcsslaravellaravel-snappy

Laravel Snappy PDF rotation nowrap text issue


Here is the css style

<style>
#rotatetext {
      float:center;
      text-align:center;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      vertical-align: middle;
}
<style>

here is the code in the blade file

@foreach ( $subj_list as $subj_code )
<th id="rotatetext" style="text-align: center; text-wrap: nowrap;">Q{{ $q_key }} {{ $subj_code }}</th>
@endforeach

This is the output my problem is text-wrap wont work, I want todo is a 1 line for every subject code to remove the extra spaces. [1]: https://i.sstatic.net/SPOM6.png


Solution

  • I already fixed my problem here the updated css code is here.

    #rotatetext {
          float: center;
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          transform: rotate(-90deg);
          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
          vertical-align: middle;
          white-space: nowrap !important;
          position: relative; 
          bottom: -50;
    }
    

    I used the white-space: nowrap; so the text will never be wrap, and I also used the position to match the height of the text in the table header. here is the image of the solved issue. https://i.sstatic.net/rAmIX.png