MDB Select Style

Topic: MDB Select Style

ashleyww93 free asked 6 years ago

Hi, Could someone tell me how I can get the MDB Select Style (just the unopened control) without calling the initialization?There are way too many issues with the MDB Select not aligning, or not updating when a new option is added or selected via Javascript for it to be usable.I am using this in a Cordova mobile application, so the <options> do not need to be styled.Thanks

Add comment

sherin shaju free answered 5 years ago

0 0 Best answer

txz babe.that is grate

Add comment

ashleyww93 free answered 6 years ago

0 0 Best answer

Thanks for your help, but I figure out the icon issue myself. The correct css would be:

.md-form .prefix ~ select {
 margin-left: 3rem;
 width: 92%;
 width: -webkit-calc(100% - 3rem);
 width: calc(100% - 3rem);
}

Marta Wierzbicka staff commented 6 years ago

OK, great.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi,
Now, I can only provide you this select without JS:
CSS:
<pre>.md-select {
 background-color: transparent;
 border: none;
 border-bottom: 1px solid #bdbdbd;
 border-radius: 0;
 outline: 0;
 height: 2.1rem;
 width: 100%;
 font-size: 1rem;
 -webkit-box-shadow: none;
 box-shadow: none;
 -webkit-box-sizing: content-box;
 box-sizing: content-box;
 -webkit-transition: all .3s;
 transition: all .3s;
 }
 .md-select:active {
 border-bottom: 1px solid #4285F4;
 -webkit-box-shadow: 0 1px 0 0 #4285F4;
 box-shadow: 0 1px 0 0 #4285F4;
 }</pre>
HTML:
<pre><div class="md-form mt-5">
 <select name="options" id="select" class="browser-default md-select form-control">
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
 <option value="4">Option 4</option>
 <option value="5">Option 5</option>
 </select>
 <label class="active" for="form6">Choose your option</label>
 </div></pre>
Also, this our pretty material select needs javascript code and we can't recreate it in 100% pure CSS now.
Best, 
Marta

Please insert min. 20 characters.

Hi,

Now, I can only provide you this select without JS:

CSS:

.md-select {
 background-color: transparent;
 border: none;
 border-bottom: 1px solid #bdbdbd;
 border-radius: 0;
 outline: 0;
 height: 2.1rem;
 width: 100%;
 font-size: 1rem;
 -webkit-box-shadow: none;
 box-shadow: none;
 -webkit-box-sizing: content-box;
 box-sizing: content-box;
 -webkit-transition: all .3s;
 transition: all .3s;
 }
 .md-select:active {
 border-bottom: 1px solid #4285F4;
 -webkit-box-shadow: 0 1px 0 0 #4285F4;
 box-shadow: 0 1px 0 0 #4285F4;
 }

HTML:

<div class="md-form mt-5">
 <select name="options" id="select" class="browser-default md-select form-control">
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
 <option value="4">Option 4</option>
 <option value="5">Option 5</option>
 </select>
 <label class="active" for="form6">Choose your option</label>
 </div>

Also, this our pretty material select needs javascript code and we can't recreate it in 100% pure CSS now.

Best,
Marta

ashleyww93 free commented 6 years ago

This is very close to perfect! Thank you. As you can see in this screenshot: https://imgur.com/a/VdR44 The label isn't positioned correctly, and the doesn't respect the prefix icon. Please advise.

ashleyww93 free commented 6 years ago

Actually, in my case, the label isn't needed. I just need the icon space to be respected.

Marta Wierzbicka staff commented 6 years ago

Paste here or send to my e-mail (m.szymanska@mdbootstrap.com) the code of this form that you have taken a screenshot of.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, could you provide any demo of your project with the material select? I'd like to see what is exactly wrong with this. Best, Marta

ashleyww93 free commented 6 years ago

I can't right now as I don't have access to the source however, I can tell you this: If you do $("myMDBSelect").selectedIndex = 1; it does NOT update, this is a critical feature for me, and because I am using this in a tablet application that will change the selected indexes many times per minute, destroying and reinitialising the MDB select is not an option for me. Therefore all I want is the CSS used to make the Material Design Select, and use it without overriding the default properties of the HTML 5 select control. I don't need any of the additional features, just the design. For clarification, you can see it done here: https://codepen.io/jonnitto/details/OVmvPB with pure CSS (No javascript) this is exactly what I want but with the MDB style, not some other package. I hope this helps you fix my issue.

Please insert min. 15 characters.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi, is the ozcanarslan solution fine for you? Best, Marta

ashleyww93 free commented 6 years ago

Hi. Unfortunately not, I need a touchscreen friendly design (its why I purchased pro to support you), however when I do "$('.mdb-select').material_select();" many things like updating the selected option via javascript no longer work (They DO work with identical code with browser-default enabled). All I want is the Material Style without breaking standard HTML 5. Also, im hoping that this will fix my other issue of having the Select next to a prefix icon like so " " that also doesn't work correctly.

Add comment

Ozcan Arslan pro answered 6 years ago

1 0 Best answer

I think you want this;
<pre class="code-toolbar language-markup"><code class=" language-markup">
<label>Default Select</label>
<select class="browser-default">
 <option value="" disabled selected>Choose your option</option>
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
</select>

</code><a href="https://mdbootstrap.com/javascript/material-select/#default">https://mdbootstrap.com/javascript/material-select/#default</a></pre>

Please insert min. 20 characters.

I think you want this;


<label>Default Select</label>
<select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

https://mdbootstrap.com/javascript/material-select/#default

ashleyww93 free commented 6 years ago

No, this gives you the browser default. I want the Material Design without css style without it changing how the control works.

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 jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ashleyww93

47Support score
7Questions 9Answers 0Snippets