Sign in


Sign up


Icon folder smaller than all other icons

MDB SupportCategory: MDB jQueryIcon folder smaller than all other icons
iliketheinterwebs Pro User asked 1 week ago in MDB pro, version:4

After adding my select dropdown it wasn’t aligned with the rest of the forms and the icon was smaller than the others for some reason.

I found another answer to add some css to fix the alignment of the form but I still can’t figure out how to make the icon the same size as all the other icons (because I used the same code format for all icons).

TIA.

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>
<title>Permitting for PMNM</title>
<!– Font Awesome –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”&gt;
<!– Bootstrap core CSS –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<!– Material Design Bootstrap –>
<link href=”css/mdb.min.css” rel=”stylesheet”>
<!– Your custom styles (optional) –>
<link href=”css/style.css” rel=”stylesheet”>

<style>
.mdb-select {
width: 97%;
padding-left: 4.0rem;
}
.permit-category {
width: 97%;
padding-left: 2.6rem;
}

</style>
</head>

<body>

<!– Start your project here–>
<body class=”fixed-sn mdb-skin”>

<header>
<!–Double navigation inlcude–>
<div id=”nav”>
<?php include(‘includes/nav.php’); ?>
</div>
<!–/.Double navigation include–>
</header>

<!–Main Layout–>
<main>

<!– Card –>
<div class=”card card-cascade wider”>

<!– Card image –>
<div class=”view gradient-card-header peach-gradient”>

<!– Title –>
<h2 class=”card-header-title mb-3″>New Permit Application – Step 1</h2>
<!– Text –>
<p class=”mb-0″>Complete the form to begin a new permit application.</p>
<p class=”mb-0″>Fields marked with “*” are required.</p>

</div>

<!– Card content –>
<div class=”card-body”>

<!– Text –>
<!– Extended material form grid –>
<form>
<!– Grid row –>
<div class=”row”>
<!– Grid column –>
<div class=”col-md-12″>
<!– Material input –>
<div class=”md-form form-group”>
<i class=”fa fa-book prefix grey-text”></i>
<input type=”text” class=”form-control” id=”inputProject”>
<label for=”inputProject”>Project Name</label>
</div>
</div>
<!– Grid column –>
</div>
<!– Grid row –>

<!– Grid row –>
<div class=”form-row”>
<!– Grid column –>
<div class=”col”>
<!– Material input –>
<div class=”md-form form-group”>
<i class=”fa fa-user prefix grey-text”></i>
<input type=”text” class=”form-control” id=”inputFirstName”>
<label for=”inputFirstName”>First Name*</label>
</div>
</div>
<!– Grid column –>

<!– Grid column –>
<div class=”col”>
<!– Material input –>
<div class=”md-form form-group”>
<input type=”text” class=”form-control” id=”inputMiddleInitial”>
<label for=”inputMiddleInitial”>Middle Initial</label>
</div>
</div>
<!– Grid column –>

<!– Grid column –>
<div class=”col”>
<!– Material input –>
<div class=”md-form form-group”>
<input type=”text” class=”form-control” id=”inputLastName”>
<label for=”inputLastName”>Last Name*</label>
</div>
</div>
<!– Grid column –>
</div>
<!– Grid row –>

<!– Grid row –>
<div class=”form-row”>
<!– Grid column –>
<div class=”col”>
<!– Material input –>
<div class=”md-form”>
<i class=”fa fa-calendar prefix grey-text”></i>
<input type=”text” class=”form-control” id=”inputDatePicker” class=”form-control datepicker”>
<label for=”inputDatePicker”>Start Date*</label>
</div>
</div>
<!– Grid column –>

<!– Grid column –>
<div class=”col”>
<!– Material input –>
<div class=”md-form”>
<input type=”text” class=”form-control” id=”inputDatePicker” class=”form-control datepicker”>
<label for=”inputDatePicker”>End Date*</label>
</div>
</div>
<!– Grid column –>
</div>
<!– Grid row –>

<!– Grid row –>
<div class=”form-row”>

<!– Grid column –>
<div class=”col-md-4″>
<i class=”fa fa-folder prefix grey-text”></i>
<!– Material input –>
<select class=”mdb-select permit-category colorful-select dropdown-warning”>
<option value=”” disabled selected>Select Permit Category*</option>
<option value=”1″>Research</option>
<option value=”2″>Education</option>
<option value=”3″>Conservation and Management</option>
<option value=”4″>Native Hawaiian Practices</option>
<option value=”5″>Special Ocean Use</option>
<option value=”6″>Recreation</option>
</select>
</div>
<!– Grid column –>
</div>
<!– Grid row –>

</form>
<!– Extended material form grid –>
<!– Link –>
<a href=”#!” class=”orange-text d-flex flex-row-reverse p-2″>
<button type=”button” class=”btn blue-gradient btn-lg”>Next</button>
<button type=”button” class=”btn peach-gradient btn-lg”>Cancel</button>
</a>

</div>
<!– Card content –>

</div>
<!– Card –>

</main>
<!–Main Layout–>

<!– /Start your project here–>

<!– SCRIPTS –>
<!– JQuery –>
<script type=”text/javascript” src=”js/jquery-3.2.1.min.js”></script>
<!– Bootstrap tooltips –>
<script type=”text/javascript” src=”js/popper.min.js”></script>
<!– Bootstrap core JavaScript –>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
<!– MDB core JavaScript –>
<script type=”text/javascript” src=”js/mdb.min.js”></script>

<!–Initializations–>
<script>
$(“.button-collapse”).sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector(‘.custom-scrollbar’);
Ps.initialize(sideNavScrollbar);

// Data Picker Initialization
$(‘.datepicker’).pickadate();

// Material Select Initialization
$(document).ready(function() {
$(‘.mdb-select’).material_select();
});

</script>

</body>

</html>
iliketheinterwebs Pro User replied 6 days ago

https://www.flickr.com/photos/157455646@N05/42136354621/in/dateposted-public/

See screenshot at link above. The folder icon is tiny and in a weird place for the select permit category section of the form.

Thank you for your help.

Bartłomiej Malanowski Pro UserPremium replied 7 days ago

Please use any image hosting provider to show us your screenshot

iliketheinterwebs Pro User replied 1 week ago

I don't have the "Add Media" button that it suppose to be on this page. I don't know why I don't have access to this button.  I am using a Chrome (up to date) browser on a Macbook Pro.

Bartłomiej Malanowski Pro UserPremium replied 1 week ago

Could you please share a screenshot with us?

1 Answers
Best Answer
Bartłomiej Malanowski Pro UserPremium answered 6 days ago

I can see where’s the problem 😉 It’s because “.md-form” class is missing. Please replace this code:


    <i class="fa fa-folder prefix grey-text"></i>
    <!-- Material input -->
    <select class="mdb-select permit-category colorful-select dropdown-warning">
        <option value=" disabled selected>Select Permit Category*</option>
        <option value="1">Research</option>
        <option value="2">Education</option>
        <option value="3">Conservation and Management</option>
        <option value="4">Native Hawaiian Practices</option>
        <option value="5">Special Ocean Use</option>
        <option value="6">Recreation</option>
    </select>

With


    <div class="md-form">
        <i class="fa fa-folder prefix grey-text"></i>
        <!-- Material input -->
        <select class="mdb-select permit-category colorful-select dropdown-warning">
            <option value=" disabled selected>Select Permit Category*</option>
            <option value="1">Research</option>
            <option value="2">Education</option>
            <option value="3">Conservation and Management</option>
            <option value="4">Native Hawaiian Practices</option>
            <option value="5">Special Ocean Use</option>
            <option value="6">Recreation</option>
        </select>
    </div>
iliketheinterwebs Pro User replied 5 days ago

You are the best. That fixed it. Yay!