Jump to content
  • 0

HTML not displaying correctly

Benades

Asked by Benades,

 Share

Question

Benades Apprentice

Benades

Posted
Posted

Hi, I am trying to embed multiple calculated fields in my HTML Block with the website raw HTML code, but it changes the structure and look which is not desirable. Could someone please troubleshoot for me where I'm going wrong?

What it should look like: (This is with individual datapages embedded in each block)

screenshot-www.invest_xbtc_co.za-2021_06.12-10_30_27.thumb.png.e8c4a842a43712174b24e8e064369e95.png

What it comes out as: (When I try to combine all of it in one datapage)

screenshot--2021_06.12-10_32_16.thumb.png.2b3cea7fa86246f1b233e63a97c4891f.png

 

Here is the original HTML: 

<div class="container-fluid">
                    <div class="d-sm-flex justify-content-between align-items-center mb-4">
                        <h3 class="text-dark mb-0">Dashboard</h3><a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Generate Report</a>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-primary py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-primary font-weight-bold text-xs mb-1"><span>Earnings (monthly)</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span>$100,00</span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-calendar fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-success py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-success font-weight-bold text-xs mb-1"><span>Earnings (annual)</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span>$215,000</span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-dollar-sign fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-info py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-info font-weight-bold text-xs mb-1"><span>Tasks</span></div>
                                            <div class="row no-gutters align-items-center">
                                                <div class="col-auto">
                                                    <div class="text-dark font-weight-bold h5 mb-0 mr-3"><span>50%</span></div>
                                                </div>
                                                <div class="col">
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar bg-info" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"><span class="sr-only">50%</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-clipboard-list fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Pending Requests</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span>18</span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-comments fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

 

And here is the HTML in my HTML Block in a Datapage: (HTML Block 2 has 4x </div> to hide the calculated fields) 

<div class="container-fluid">
                    <div class="d-sm-flex justify-content-between align-items-center mb-4">
                        <h3 class="text-dark mb-0">Dashboard</h3>
                    </div>
<div class="row">
<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Trade Growth</span></div>
<div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:1#]%</span></div>
</div>
                                        <div class="col-auto"><i class="fas fa-database fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Average Growth</span></div>
<div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:2#]%</span></div>
</div>
                                        <div class="col-auto"><i class="fas fa-wave-square fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Last 7 days</span></div>
<div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:3#]%</span></div>
</div>
                                        <div class="col-auto"><i class="fas fa-sort-amount-down fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Previous Trade</span></div>
<div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:4#]%</span></div>
</div>
                                        <div class="col-auto"><i class="fas fa-backward fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
<div style="display:none;"><div>

 

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
TellMeWhy Collaborator

TellMeWhy

Posted
Posted
6 hours ago, Benades said:

Hi, I am trying to embed multiple calculated fields in my HTML Block with the website raw HTML code, but it changes the structure and look which is not desirable. Could someone please troubleshoot for me where I'm going wrong?

What it should look like: (This is with individual datapages embedded in each block)

screenshot-www.invest_xbtc_co.za-2021_06.12-10_30_27.thumb.png.e8c4a842a43712174b24e8e064369e95.png

What it comes out as: (When I try to combine all of it in one datapage)

screenshot--2021_06.12-10_32_16.thumb.png.2b3cea7fa86246f1b233e63a97c4891f.png

 

Here is the original HTML: 


<div class="container-fluid">
                    <div class="d-sm-flex justify-content-between align-items-center mb-4">
                        <h3 class="text-dark mb-0">Dashboard</h3><a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Generate Report</a>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-primary py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-primary font-weight-bold text-xs mb-1"><span>Earnings (monthly)</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span>$100,00</span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-calendar fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-success py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-success font-weight-bold text-xs mb-1"><span>Earnings (annual)</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span>$215,000</span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-dollar-sign fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-info py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-info font-weight-bold text-xs mb-1"><span>Tasks</span></div>
                                            <div class="row no-gutters align-items-center">
                                                <div class="col-auto">
                                                    <div class="text-dark font-weight-bold h5 mb-0 mr-3"><span>50%</span></div>
                                                </div>
                                                <div class="col">
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar bg-info" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"><span class="sr-only">50%</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-clipboard-list fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Pending Requests</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span>18</span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-comments fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

 

And here is the HTML in my HTML Block in a Datapage: (HTML Block 2 has 4x </div> to hide the calculated fields) 


<div class="container-fluid">
                    <div class="d-sm-flex justify-content-between align-items-center mb-4">
                        <h3 class="text-dark mb-0">Dashboard</h3>
                    </div>
<div class="row">
<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Trade Growth</span></div>
<div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:1#]%</span></div>
</div>
                                        <div class="col-auto"><i class="fas fa-database fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Average Growth</span></div>
<div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:2#]%</span></div>
</div>
                                        <div class="col-auto"><i class="fas fa-wave-square fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Last 7 days</span></div>
<div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:3#]%</span></div>
</div>
                                        <div class="col-auto"><i class="fas fa-sort-amount-down fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Previous Trade</span></div>
<div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:4#]%</span></div>
</div>
                                        <div class="col-auto"><i class="fas fa-backward fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
<div style="display:none;"><div>

 

The text wraps because it's long which adds height to the container.

 

Try adding this to your DataPage header, check if other things are affected, though, as this class is a BootStrap Class 

<style>

.text-uppercase{
white-space:nowrap;
}

</style>

Without code:

image.thumb.png.2601714a56ca911daae6cd9ef51dd320.png

With the code:

image.png.4bbe15a0f9e4959b6aab496b298d9d8f.png

 

image.png

Link to comment
Share on other sites
  • 0
Benades Apprentice

Benades

Posted
  • Author
Posted

Thanks for the reply @TellMeWhy,

However not working on my side. The blocks should be much longer and not compressed.

Is it because I am removing the classes out of it's environment thus it cannot call the appropriate classes for the correct display? When I only take the HTML that displays the actual number the whole structure of the card is displaying correctly.

Link to comment
Share on other sites
  • 0
TellMeWhy Collaborator

TellMeWhy

Posted
Posted
37 minutes ago, Benades said:

Thanks for the reply @TellMeWhy,

However not working on my side. The blocks should be much longer and not compressed.

Is it because I am removing the classes out of it's environment thus it cannot call the appropriate classes for the correct display? When I only take the HTML that displays the actual number the whole structure of the card is displaying correctly.

No, not really. As long as you have linked the bootstrap css, it should be fine, however, I believe it's because Caspio's Styles that are conflicting with the Bootstrap CSS.

The codes are inserted in an HTML Block, however, those HTML blocks have auto generated CSS that is using grid. Only way is for you to manually edit the CSS to fit your needs.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to question listing
×
×
  • Create New...