Выпуск Цикл по серии карточек в PDF, сгенерированном DOMDF в Laravel - PullRequest
Новая
       25

Выпуск Цикл по серии карточек в PDF, сгенерированном DOMDF в Laravel

0 голосов
/ 01 мая 2019

Я работаю над сборкой приложения, используя Laravel.Я сгенерировал PDF-файл, используя DOMPDF и показывая серию карточек. 1-я карта статична, в то время как последующая карта / 2-я карта динамична (я использую цикл для многократного отображения в зависимости от динамических данных из бэкэнда) .

Работает нормально, за исключением стиля, динамические карты переполняются из документа PDF с правой стороны .Я хочу, чтобы они отображались в табличном формате (по 2 на строку), потому что у меня всего 6 карт (включая статическую карту) ...

Код CSS 

.row1{
    display: table;
}

.registerph1{
    float: left;
    clear: left;
    position: absolute;
    margin-left: 2px;
    top: 63px;
}

.registerph4{
    float: left;
    clear: left;
    top: 180px;
    position: absolute;
    z-index: 5;
    margin-top: -4px;
    margin-left: 2px;
}

.phonecard6 {
    position: relative;
    background: #ba0c2f;
    width: 290px;
    height: 200px;
    margin-right: 10px;
    padding: 20px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius: 15px;
    overflow: hidden; 
    float: left;
}

.btm-right1{
    position: absolute;
    background: #000;
    z-index: -3;
    width: 690px;
    height: 710px;
    left: -260px;
    top: -330px;
    border-radius: 0 0 700px 0;
    transform: rotate(21deg);
}

Код разметки 

 <!-- Row 1-->
    <div class="row1">

    <!-- Card 1-->
    <!-- Static card-->
    <div class="phonecard6">
        <div class="innerDiv6">
            <div>
                <img src="assets/images/logo.svg" alt="logo" class="cardLogo3" height="50" width="70">
                <img class="QR6" src="assets/images/qr.png" height="43" width="43">
            </div>

            <div class="registerph1">
                <label class="fm-input6"> Full Names </label> 
                <span class="fm-input6"> :  jhhjhsdjsdhsd </span>
            </div>  <br>

            <!-- Member No-->
            <div class="row registerph4">
                    <label class="fm-input6"> Effective Date</label> 
                    <span class="fm-input6"> :  ........... </span> <br>
                    <label class="fm-input6"> Expiry Date</label> 
                    <span class="fm-input6"> :   ........  </span>
                </div>
            <!-- END-->

        </div>
        <div class="btm-right1">
        </div>
    </div>
    <!-- End Card 1-->

     <!-- Card 2-->
     <!-- Displaying them dynamically-->
     @foreach($dpd as $d)
     <div class="phonecard6">
        <div class="innerDiv6">
            <div>
                <img src="assets/images/logo.svg" alt="logo" class="cardLogo3" height="50" width="70">
                <img class="QR6" src="assets/images/qr.png" height="43" width="43">
            </div>

            <div class="registerph1">
                <label class="fm-input6"> Full Names </label> 
                <span class="fm-input6"> :  jhhjhsdjsdhsd </span>
            </div>  <br>

            <!-- Member No-->
            <div class="row registerph4">
                    <label class="fm-input6"> Effective Date</label> 
                    <span class="fm-input6"> :  ........ </span> <br>
                    <label class="fm-input6"> Expiry Date</label> 
                    <span class="fm-input6"> :   .......... </span>
                </div>
            <!-- END-->
        </div>
        <div class="btm-right1">
        </div>
    </div>
    @endforeach
    <!-- End dependents-->
    </div>
    <!-- END Card 2-->

Изображение карточек в браузере Cards Image displayed horizontally

...