Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

ashleyww93 free asked 7 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

sherin shaju free answered 5 years ago


txz babe.that is grate


ashleyww93 free answered 7 years ago


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 7 years ago

OK, great.

Marta Wierzbicka staff answered 7 years ago


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 7 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 7 years ago

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

Marta Wierzbicka staff commented 7 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.

Marta Wierzbicka staff answered 7 years ago


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 7 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.

Marta Wierzbicka staff answered 7 years ago


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

ashleyww93 free commented 7 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.

Ozcan Arslan pro answered 7 years ago


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 7 years ago

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


Please insert min. 20 characters.

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
Tags