oTree Forum >

How to cancel the margin of the upper html element in oTree

#1 by RudyDW 

Dear all,

I have an html document (see attachment) including its own styles. hen I display this html page, there is no left margin but, unfortunately, when I display this page in the oTree environment, there is a margin appearing on the left.
I guess it is due due to a HTML element defined by oTree at a higher level but I don't see how to neutralize this.

I tried to use the development tools but I am not able to observe the upper elements (only the elements I use in my html document are available).

Is someone able to help me?

Thanks,
Rudy

#2 by BonnEconLab 

Adding

.container {
    margin-left: 0;
    padding-left: 0;
}

to your CSS instructions helps. This reduces the left margin.

#3 by BonnEconLab 

If you want the left margin to be gone entirely (that is, even inside your <div class="container-fluid">), then also include

.container-fluid {
    padding-left: 0;
}

#4 by BonnEconLab 

PS: You can do without the

<head>...</head>
<body>...</body>
</html>

stuff in your template. The following suffices for the content block:

{{ block content }}

<div class="container-fluid">
    <!-- Page Title -->
    <div class="pageTitle">
        <div class="col-sm-6">
            <h2 style="text-align: center">Trading session ends in <span id="time">13:02</span> minutes!</h2>
        </div>
    </div>
    <div class="grid-container">
        <div class="chart-side">Cadre 1 <br><br><br> {% next_button %} </div>
        <div class="lob-side">Cadre 2</div>
        <div class="player-side">
            <div class="ptf-box"> My Portfolio</div>
            <div class="pending-box"> My Pending Orders</div>
            <div class="alert-box"> </div>
            <div class="submission-box"> Order Submission</div>
        </div>
    </div>
</div>

{{ endblock }}

oTree inserts

<meta name="viewport" content="width=device-width, initial-scale=1.0">

anyway. And the redundant <body> tag is removed, as you can see when you look at the rendered page’s source code in your browser (“View Page Source”).

#5 by RudyDW 

Thank you very much for your answers. They help.
In addition to this, I also had a conflict with the following reference:
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
 
Every works fine now. Thank you.
Rudy

#6 by BonnEconLab 

oTree includes Bootstrap (v5.0.1 if you use oTree 5.10.4).

Hence, unless you desire to use newer Bootstrap classes, there should be no need to load https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css.

Write a reply

Set forum username