Sign in


Sign up


2 icons overlap in MDB-select (also want one icon to be much smaller than other icon)

MDB SupportCategory: MDB jQuery2 icons overlap in MDB-select (also want one icon to be much smaller than other icon)
iliketheinterwebs Pro User asked 3 months ago in MDB pro, version:4

Hi,

I have two icons next to each other to the left of the mdb-select box.

The first icon describes is a visual for what you put in that box.

The second icon (next to it) is a question mark….I want to use this in conjunction with a PopOver (for additional info).

Problem 1: The icons overlap right on top of each other.

Problem 2: Awesome Fonts has done an overhaul on their code and really changed things up.  Because of this – syntax I used to apply to make icons smaller does not work.  I want the second questionmark icon to be smaller than the first icon.

Here is a snippet of my code (TIA for your help):

Start your code here

<!–First row–>
<div class=”row”>
<!–First column–>
<div class=”col-md-12″>
<div class=”md-form”>
<i class=”fa fa-book prefix grey-text”></i><i class=”fa fa-question-circle prefix grey-text” aria-hidden=”true”></i>
<input type=”text” id=”form76″ class=”form-control validate”>
<label for=”form76″ data-error=”wrong” data-success=”right”>Type your project name</label>
</div>
</div>

</div>
<!–/.First row–>

12 Answers
Marta Szymanska answered 3 months ago

Hi,

I’m not sure how it should look, so would you provide any picture showing this input with two icons?

Best,

Marta

iliketheinterwebs Pro User answered 3 months ago

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

The link above is to the screenshot of the page. (Is there a way to post the picture directly in this box?)

The first row you can see that the question mark icon is overlapping on top of the book icon.  I want the question mark icon to go to the right of the book icon and be a little smaller (since it is an icon for getting more info through a Popover).

 

Thank you so much for your help.

Marta Szymanska answered 3 months ago

Hi,

you can post the picture directly here, above comment box you have a button “Add Media” and you can use that.

I see the bug and tell me, please, where the second smaller icon should be placed? Above the big one or below or at the end of input because I don’t know that.

Best,

Marta

iliketheinterwebs Pro User replied 2 months ago

Hi Marta,

Thank you.

I don’t have an “Add Media button above my comment box. I am using Google Chrome.

Second, smaller icon should be placed to the right of the first icon, but aligned towards the top of the row.

Thanks so much.

Marta Szymanska answered 2 months ago

Hi,

don’t you have the “Add media” button like on the attached screen?


For the input try this code:

<i class=”fa fa-question-circle prefix grey-text” aria-hidden=”true” style=”
padding-left: 2rem;
margin-top: -1rem;
font-size: 1.1rem;
“></i>

CSS:

.md-form .prefix~input, .md-form .prefix~textarea {
margin-left4rem;
width-webkit-calc(100% – 2.5rem);
widthcalc(100% – 4rem);
.md-form .prefix~label {
margin-left4rem;
The result:

Tell me, if this is what you want to achieve.

Best,
Marta

iliketheinterwebs Pro User replied 2 months ago

Hi Marta,

Yes, I do not have that button “Add Media” like you do in the attached image. Which makes me relieved because I was starting to feel really dumb. Lol. 🙂

I’m not sure why that button does not show up for me. I am on a Mac and using Chrome browser Version 64.0.3282.186 (Official Build) (64-bit).

And yes, that is exactly what I am trying to achieve with both icons next to the form box/line. I am going to try your code.

Thank you so much for all of your help. I really really appreciate it.

iliketheinterwebs Pro User answered 2 months ago

I added the code (I may have done it wrong) and it didn’t work.

In my code editor: fa-question-cirlce prefix grey-text is orange when it should be green like all of the the other icons in my other i classes.
In the css section I noticed the .prefix~label is white when the other ones (.prefix~input and .prefix~textarea) are orange and red in my code editor.

It also pushed the alignment of the bottom row (Select Permit Category) to the left.

Since I don’t have the Add Media button I’m adding a link to my screenshots.

Screenshots:
Page after applying code:
https://www.flickr.com/photos/157455646@N05/38902251940/in/dateposted-public/
No Add Media Buton:
https://www.flickr.com/photos/157455646@N05/?

 

Start your code here

<!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>New Application – Step 1</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) –>
<style>
.mdb-select {
width: 97%;
padding-left: 2.8rem;
}
.permit-category-label {
width: 97%;
padding-left: 1.8rem;
}
/* MOVES button to right side BUT wanted to use classes instead
.next-button, .cancel-button{
float: right;
}
*/
.md-form .prefix~input, .md-form .prefix~textarea {
margin-left: 4rem;
width: -webkit-calc(100% – 2.5rem);
width: calc(100% – 4rem);
.md-form .prefix~label {
margin-left: 4rem;
}
</style>

</head>

<body class=”fixed-sn mdb-skin”>

<!– Start your project here–>

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

<!–Main Layout–>
<main>
<!–Card–>
<div class=”d-flex card card-cascade”>

<!–Card image–>
<div class=”view gradient-card-header blue-gradient”>
<h2 class=”h2-responsive”>Create New Permit Application – Step 1</h2>
<p>Complete the form to begin a new permit application. Fields marked with “*” are required.</p>
</div>
<!–/Card image–>

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

<p class=”card-text”></p>
<form>
<!–First row–>
<div class=”row”>
<!–First column–>
<div class=”col-md-12″>
<div class=”md-form”>
<i class=”fa fa-book prefix grey-text”></i>
<i class=”fa fa-question-circle prefix grey-text” aria-hidden=”true” style=”
padding-left: 2rem;
margin-top: -1rem;
font-size: 1.1rem;
“></i>
<!–TRYING TO ADD Q MARK ICON <i class=”fa fa-question-circle prefix grey-text” aria-hidden=”true”></i>–>
<input type=”text” id=”form76″ class=”form-control validate”>
<label for=”form76″ data-error=”wrong” data-success=”right”>Type your project name</label>
</div>
</div>

</div>
<!–/.First row–>

 

Thank you so much for your help. 🙂

Marta Szymanska answered 2 months ago

Hi,

tell me what is the exact version of MDB you have? You can find that in README.txt file in your package.

Best,

Marta

iliketheinterwebs Pro User replied 2 months ago

Thanks Ollie. Is there a tutorial on how to upgrade easily and safely?

Ollie Vincent Pro User replied 2 months ago

The latest version of mdb is 4.5 and the syntax has changed throughout the framework to provide better performance. If you are copying from the mdb site then you may find issues with the code

iliketheinterwebs Pro User replied 2 months ago

Hi Marta,

It says 4.4.1

Do I need to upgrade to a newer version? How can I merge the content I have in my MDB files with an upgraded version?

Thank you so much for your help.

Marta Szymanska answered 2 months ago

Hi,

We don’t have such a tutorial but first, please, read our changelog https://mdbootstrap.com/changelog/ carefully before updating your MDB package. I think it can help you.

Best,
Marta

iliketheinterwebs Pro User replied 2 months ago

Thank you Marta for that resource. I read the changelog and saw “If you want to use newest version 4.5.0 in existing projects – it will require a migration.” I have never done a migration before but I want to be on the most recent version. Do you have resources to point me to for migrating the code correctly? 🙂

Marta Szymanska answered 2 months ago

Hi,

migrating files are quite easy – download new MDB 4.5.0 package and copy CSS and JS files to your existing project and if you use, copy also SCSS files. Replace old files with the new ones. A lot of your components might be destroyed in this process because we’ve changed the syntax of some of them. All you need to do is to look for current code for your components which have been destroyed and replace the old ones with the new ones. You need to fix component by component. If you don’t want to fix old things you can create the new project in the new downloaded MDB 4.5.0 package. All necessary information you will find in our changelog and documentation. If you will have more problems, don’t hesitate to write me.

Best,

Marta

iliketheinterwebs Pro User replied 1 week ago

I use Atom.

Bartłomiej Malanowski Pro User replied 1 week ago

what’s the editor you use?

iliketheinterwebs Pro User replied 1 week ago

When I add this code to my editor it doesn’t like the style class part. It turns everything after the style class green including the and comments and code after that. How can I fix this?


Marta Szymanska replied 2 months ago

You’re welcome.

iliketheinterwebs Pro User replied 2 months ago

Thank you Marta! Okay I will work on this today and tomorrow and see which route I want to take. I appreciate all of your help. 🙂

Marta Szymanska answered 7 days ago

Hi iliketheinterwebs,

this is your code with a small change here: .md-form .prefix~input, .md-form .prefix~label in my editor. Do you see the same thing? If yes, tell me what is wrong with this because I can’t reproduce the problem.


<style>
.mdb-select {
width: 97%;
padding-left: 2.8rem;
}

.permit-category-label {
width: 97%;
padding-left: 1.8rem;
}
/* MOVES button to right side BUT wanted to use classes instead
.next-button, .cancel-button{
float: right;
}
*/

.md-form .prefix~input,
.md-form .prefix~textarea {
margin-left: 4rem;
width: -webkit-calc(100% – 4rem);
width: calc(100% – 4rem);
}

.md-form .prefix~label {
margin-left: 4rem;
}
</style>
</head>

<body class=”fixed-sn mdb-skin”>
<!– Start your project here–>
<header>
<!– Double navbar–>
<div id=”nav”>
<?php include(‘includes/nav.php”); ?>
</div>
<!–/. Double navbar–>
</header>
<!–Main Layout–>
<main>
<!–Card–>
<div class=”d-flex card card-cascade”>
<!–Card image–>
<div class=”view gradient-card-header blue-gradient”>
<h2 class=”h2-responsive”>Create New Permit Application – Step 1</h2>
<p>Complete the form to begin a new permit application. Fields marked with “*” are required.</p>
</div>
<!–/Card image–>
<!–Card content–>
<div class=”card-body”>
<p class=”card-text”></p>
<form>
<!–First row–>
<div class=”row”>
<!–First column–>
<div class=”col-md-12″>
<div class=”md-form”>
<i class=”fa fa-book prefix grey-text”></i>
<i class=”fa fa-question-circle prefix grey-text” aria-hidden=”true” style=”
padding-left: 2rem;
margin-top: -1rem;
font-size: 1.1rem;
“></i>
<!–TRYING TO ADD Q MARK ICON <i class=”fa fa-question-circle prefix grey-text” aria-hidden=”true”></i>–>
<input type=”text” id=”form76″ class=”form-control validate”>
<label for=”form76″ data-error=”wrong” data-success=”right”>Type your project name</label>
</div>
</div>
</div>
<!–/.First row–>

 

Best,
Marta

iliketheinterwebs Pro User replied 6 days ago

Hi Marta,

I’m adding screenshots through flickr so you can see how it looks in my editor and also how it looks in the browser.

Atom : for some reason the closing i tag is green and the second .md-form is a darker grey than all the other classes.
https://www.flickr.com/photos/157455646@N05/42136354811/in/dateposted-public/

Atom : the comma after input is pink in my editor (which doesn’t look right)
https://www.flickr.com/photos/157455646@N05/42089830522/in/dateposted-public/

Browser tiny question mark icon not showing up and lines for the text areas got merged together and look off (after making the code changes).
https://www.flickr.com/photos/157455646@N05/42136354621/in/dateposted-public/

Thank you for your help with this.

Marta Szymanska answered 6 days ago

Hi,

you have different quotations marks in your file. Change all ones to the same type.

Also, your CSS code is not correct, use this:

 

.md-form .prefix~input,
.md-form .prefix~textarea {
margin-left: 4rem;
width: -webkit-calc(100% – 4rem);
width: calc(100% – 4rem);
}

.md-form .prefix~label {
margin-left: 4rem;
}

After changing these things, tell me if it is ok now.

Best,

Marta

iliketheinterwebs Pro User replied 5 days ago

Hi Marta,

Thank you so much for your patience with me. My editor has been acting crazy – thank you for catching that. I decided to manually type in the code and the icon is now showing up but in the bottom right corner.
https://www.flickr.com/photos/157455646@N05/27278600027/in/dateposted-public/

I want to get the icon to show up in the top right corner area – like the previous examples you showed. How do I do that? I tried messing with adding margin-top and it was making everything messed up.

Thank you so much.

MY CODE:

Permitting for PMNM

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

.md-form .prefix~input,
.md-form .prefix~textarea {
margin-left: 4rem;
width: -webkit-calc(100% – 4rem);
width: calc(100% -4rem);
}

.md-form .prefix~label {
margin-left: 4rem;
}


New Permit Application – Step 1

Complete the form to begin a new permit application.
Fields marked with “*” are required.



Project Name

First Name*

Middle Initial

Last Name*

Start Date*

End Date*


Select Permit Category*
Research
Education
Conservation and Management
Native Hawaiian Practices
Special Ocean Use
Recreation




Next
Cancel


$(“.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();
});

Marta Szymanska answered 5 days ago

Hi,

this code below doesn’t work for you? Because when I check this, I see a question mark icon in the top right corner. But if you don’t see the same thing, please paste here your whole code of the form from the screenshot and tell me what version of MDB you have now.

<!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">
<!-- 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/landing.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<style>
.mdb-select {
width: 97%;
padding-left: 2.8rem;
}

.permit-category-label {
width: 97%;
padding-left: 1.8rem;
}
/* MOVES button to right side BUT wanted to use classes instead
.next-button, .cancel-button{
float: right;
}
*/

.md-form .prefix~input,
.md-form .prefix~textarea {
margin-left: 4rem;
width: -webkit-calc(100% – 4rem);
width: calc(100% – 4rem);
}

.md-form .prefix~label {
margin-left: 4rem;
}
</style>
</head>

<body class="fixed-sn mdb-skin">
<!-- Start your project here-->
<header>
<!-- Double navbar-->
<div id="nav">
<?php include(‘includes/nav.php"); ?>
</div>
<!--/. Double navbar-->
</header>
<!--Main Layout-->
<main>
<!--Card-->
<div class="d-flex card card-cascade">
<!--Card image-->
<div class="view gradient-card-header blue-gradient">
<h2 class="h2-responsive">Create New Permit Application – Step 1</h2>
<p>Complete the form to begin a new permit application. Fields marked with "*" are required.</p>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-body">
<p class="card-text"></p>
<form>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-md-12">
<div class="md-form">
<i class="fa fa-book prefix grey-text"></i>
<i class="fa fa-question-circle prefix grey-text" aria-hidden="true" style="
padding-left: 2rem;
margin-top: -1rem;
font-size: 1.1rem;
"></i>
<!--TRYING TO ADD Q MARK ICON <i class="fa fa-question-circle prefix grey-text" aria-hidden="true"></i>-->
<input type="text" id="form76" class="form-control validate">
<label for="form76" data-error="wrong" data-success="right">Type your project name</label>
</div>
</div>
</div>
<!--/.First row-->
<!--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>
</body>

</html>

Best,
Marta

iliketheinterwebs Pro User replied 4 days ago

Hi Marta,

The question mark does show up now but not in the top right corner. Version MDB Pro version 4.5.0

Screenshots of full html Code:
https://www.flickr.com/photos/157455646@N05/42128107982/in/dateposted-public/
https://www.flickr.com/photos/157455646@N05/41453442084/in/dateposted-public/
https://www.flickr.com/photos/157455646@N05/42128107862/in/dateposted-public/
https://www.flickr.com/photos/157455646@N05/41453442014/in/dateposted-public/
https://www.flickr.com/photos/157455646@N05/42128107792/in/dateposted-public/

With that code above this is what page looks like:
https://www.flickr.com/photos/157455646@N05/42128107722/in/dateposted-public/

CSS updated to be exactly like your code example above:
https://www.flickr.com/photos/157455646@N05/41453441934/in/dateposted-public/

When I make the CSS exactly like your code above this is what the page looks like (makes the select permit category line correct spacing away from icon):
https://www.flickr.com/photos/157455646@N05/41453441874/in/dateposted-public/

Thank you so much for your help. 🙂

Marta Szymanska answered 4 days ago

Hi,

thank you for a lot of screenshots, but it will be easier for me to check your code if you paste here your whole code or the better idea is if you send me this HTML file to m.szymanska@mdbootstrap.com. I think it will be a faster way to help you. I’m waiting for a message from you.

Best,

Marta