File Input Forms Broken

Please insert min. 5 and max. 120 characters.

Specify your issue

This field is required.

Add tags

input-fields

file-input

css

Write

<h3>Expected behavior</h3>

<p>For file input forms to look <a href="https://mdbootstrap.com/docs/jquery/forms/file-input" target="_blank">like they do in the documentation</a>.</p>

<h3>Actual behavior</h3>

<p>The file input forms <a href="https://codepen.io/spencerthayer/pen/BEgLzq" target="_blank" rel="nofollow">look broken</a>.</p>

<h3>Your working environment and MDB version information</h3>

<ul>
<li><a href="https://codepen.io/spencerthayer/pen/BEgLzq" target="_blank" rel="nofollow">CodePen</a></li>
<li><a href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" target="_blank" rel="nofollow">twitter bootstrap css 4.3.1</a></li>
<li><a href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.7/css/mdb.min.css" target="_blank" rel="nofollow">mdbootstrap css 4.7.7</a></li>
<li><a href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" target="_blank" rel="nofollow">fontawesome css 5.8.1</a></li>
<li><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" target="_blank" rel="nofollow">jquery js 3.3.1</a></li>
<li><a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js" target="_blank" rel="nofollow">popper js 1.14.4</a></li>
<li><a href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" target="_blank" rel="nofollow">twitter bootstrap js 4.3.1</a></li>
<li><a href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.7/js/mdb.min.js" target="_blank" rel="nofollow">mdbootstrap js 4.7.7</a></li>
</ul>

<h3>Resources (screenshots, code snippets etc.)</h3>

<p>Everything is at <a href="https://codepen.io/spencerthayer/pen/BEgLzq" target="_blank" rel="nofollow">CodePen</a>.</p>

<h3>Crossposted</h3>

<ul>
<li><a href="https://github.com/mdbootstrap/bootstrap-material-design/issues/233" target="_blank" rel="nofollow">GitHub</a></li>
<li><a href="https://mdbootstrap.com/support-ask-question/?id=97441" target="_blank">MD Bootstrap Support</a></li>
</ul>

Expected behavior

For file input forms to look like they do in the documentation.

Actual behavior

The file input forms look broken.

Your working environment and MDB version information

Resources (screenshots, code snippets etc.)

Everything is at CodePen.

Crossposted

Please insert min. 20 characters.

Post

Quality of your question:

Bad0% question quality

The higher quality the better and faster answer you'll get.

User: Free Become Pro
Premium support: - Get premium support
Technology: No
MDB Version: No
Device: No
OS: No
Browser: No
Provided sample code: No
Provided link: No
Tags: No