[Bug] Overflow bug, items overlap (snippet provided)

Topic: [Bug] Overflow bug, items overlap (snippet provided)

VIS free asked 2 years ago

When I use col-x classes the items inside a container overflow to the right. the left side is okay but the right side has problems. a screen shot and a snippet is provided:

Snippet:

https://mdbootstrap.com/snippets/standard/itvis-org-au/4236542

Screenshot enter image description here

Add comment

Mateusz Lazaru staff answered 2 years ago

0 0 Best answer

<p>The problem occures when you add margin-x to the <code>.col-6</code> container. You can avoid this by changing this:</p>

<pre class="prettyprint"><code>        <div class="me-3 col-6">
          <div class="form-outline datepicker" data-mdb-inline="true">
            <div class="form-outline datetimepicker">
              <input type="text" class="form-control" value="22/12/2020, 14:12:56" id="date_1" />
              <label for="date_1" class="form-label">Select Date and Time</label>
            </div>
          </div>
        </div>
</code></pre>

<pre class="prettyprint"><code>        <div class="col-6">
          <div class="form-outline datepicker me-3" data-mdb-inline="true">
              <input type="text" class="form-control" value="22/12/2020, 14:12:56" id="date_1" />
              <label for="date_1" class="form-label">Select Date and Time</label>
            </div>
        </div>
</code></pre>

<p>There is one more bug fixed - there was datepicker initialized twice, because you added <code>'.datepicker'</code> class to two different divs.</p>

<p>Check out my snippet :)</p>

<p><a href="https://mdbootstrap.com/snippets/standard/mlazaru/4237191#html-tab-view" target="_blank">https://mdbootstrap.com/snippets/standard/mlazaru/4237191#html-tab-view</a></p>

Please insert min. 20 characters.

Hi,

The problem occures when you add margin-x to the .col-6 container. You can avoid this by changing this:

        <div class="me-3 col-6">
          <div class="form-outline datepicker" data-mdb-inline="true">
            <div class="form-outline datetimepicker">
              <input type="text" class="form-control" value="22/12/2020, 14:12:56" id="date_1" />
              <label for="date_1" class="form-label">Select Date and Time</label>
            </div>
          </div>
        </div>

into this:

        <div class="col-6">
          <div class="form-outline datepicker me-3" data-mdb-inline="true">
              <input type="text" class="form-control" value="22/12/2020, 14:12:56" id="date_1" />
              <label for="date_1" class="form-label">Select Date and Time</label>
            </div>
        </div>

There is one more bug fixed - there was datepicker initialized twice, because you added '.datepicker' class to two different divs.

Check out my snippet :)

https://mdbootstrap.com/snippets/standard/mlazaru/4237191#html-tab-view

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Standard
MDB Version: MDB5 4.4.0
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

VIS

0Support score
7Questions 2Answers 3Snippets