Custom template - Grid Bootstrap

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
DGarza
User
Posts: 152

Custom template - Grid Bootstrap

Post by DGarza »

Hi everyone

I am using for the first time the CustomTemplate Card, I was testing to put 2 cards with the bootstrap grid (separate the whole row in 2 cards), and everything in order, the problem was when I wanted to put a third one:

<div class=“row”>
     <div class=“col-md-4”>

      </div>
<div class=“col-md-4”>

      </div>
<div class=“col-md-4”>

      </div>
</div>

The first 2 col-md-4 puts it to me correctly, if not when I put the 3 col-md-4, for some reason, phpmaker put it inside 2 strong tag:

<strong>
      <strong>
           <div class=“col-md-4”>

      </div>
       </strong>
</strong>

Why? I don't know, I don't know if I'm using the custom template card wrong or something.

Thanks


arbei
User
Posts: 9787

Post by arbei »

  1. Make sure you use the normal ASCII " or ' (not or ) as the quote characters for HTML attributes.
  2. You may post your complete code and where you put it for discussion.

DGarza
User
Posts: 152

Post by DGarza »

arbei wrote:

  1. Make sure you use ASCII " or ' (not or ) as the quote characters for HTML attributes.

Mmmm Yes, I mean, normal HTML code no?

  1. You may post your complete code and where you put it for discussion.

This is my entire code:

<div class="row">
        <!-- Datos del Usuario -->
        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header">
                    <i class="fa-solid fa-user d-flex align-items-baseline"><h4>&nbsp;Datos del Usuario</h4></i>
                </div>
                <div class="text-center">
                    {{{FotoLogin}}}
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <h6 class="card-title">{{{Nombre}}}</h6>
                        <p class="card-text">{{{FKDepartamento}}}</p>
                    </div>
                    <br>
    
                    <!-- ID -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption ID}}}:</strong></h6>
                        <p>{{{ID}}}</p>
                    </div>
                    <hr>
                    <!-- Fecha de FechaNacimiento -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption FechaNacimiento}}}:</strong></h6>
                        <p>{{{FechaNacimiento}}}</p>
                    </div>
                    <hr>   
                </div>
            </div>
        </div>
    
        <!-- Configuración de Usuario -->
        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header">
                    <i class="fa-solid fa-user-gear d-flex align-items-baseline"><h4>&nbsp;Configuración del Usuario</h4></i>
                </div>
                <div class="card-body">
                    <!-- Usuario -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption Usuario}}}:</strong></h6>
                        <p>{{{Usuario}}}</p>
                    </div>
                    <hr>
    
                    <!-- UserLevel -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption _UserLevel}}}:</strong></h6>
                        <p>{{{_UserLevel}}}</p>
                    </div>
                    <hr>
    
                    <!-- Activated -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption Activated}}}:</strong></h6>
                        {{{Activated}}}
                    </div>
                    <hr>
    
                    <!-- Fecha de Baja -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption Exp_date}}}:<strong></h6>
                        <span class="text-danger">{{{Exp_date}}}</span>
                    </div>
                    <hr>
                </div>
            </div>
        </div>
        <!-- Configuración de Usuario2 -->
        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header">
                    <i class="fa-solid fa-user-gear d-flex align-items-baseline"><h4>&nbsp;Configuración del Usuario2</h4></i>
                </div>
                <div class="card-body">
                    <!-- Usuario -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption Usuario2}}}:</strong></h6>
                        <p>{{{Usuario2}}}</p>
                    </div>
                    <hr>
    
                    <!-- UserLevel -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption _UserLevel2}}}:</strong></h6>
                        <p>{{{_UserLevel2}}}</p>
                    </div>
                    <hr>
    
                    <!-- Activated -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption Activated2}}}:</strong></h6>
                        {{{Activated2}}}
                    </div>
                    <hr>
    
                    <!-- Fecha de Baja -->
                    <div class="d-flex justify-content-between">
                        <h6><strong>{{{caption Exp_date2}}}:<strong></h6>
                        <span class="text-danger">{{{Exp_date2}}}</span>
                    </div>
                    <hr>
                </div>
                {{{list_options_2}}}
            </div>
        </div>
    </div>

arbei
User
Posts: 9787

Post by arbei »

You have wrong code and hence the problem:

<h6><strong>{{{caption Exp_date}}}:<strong></h6>

<h6><strong>{{{caption Exp_date2}}}:<strong></h6>


DGarza
User
Posts: 152

Post by DGarza »

You're right, that fix the problem.


Post Reply