Topic: mdb-select => select list not visible completely
Hello, in a "horizontal stepper" form the buttons are not visible completely part is hidden. I try to use z-index but no effect. Do you have a solution? thank you
<div class="z-depth-1 m-2">
<div class="p-4 bg-white">
<ul class="stepper horizontal" style="min-height: 100%;">
<li class="step active">
page 1
</li>
<li class="step">
page 2
<div class="step-title waves-effect waves-dark">Organisation</div>
<div class="step-new-content" style="z-index: 0;">
<div class="row">
<div class="md-form col-12 ml-auto" style="border: 1px solid green">
<div class="card">
<div class="card-header bg-badge-autre white-text">
Organisation
</div>
<div class="card-body" style="border: 1px solid red;">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-6 col-sm-6">
<div class="md-form mb-0">
<select class="mdb-select md-form mdb-select-passup" searchable="Rechercher.." name="tutelle" id="tutelle" >
<option value="" disabled selected>Sélectionner une tutelle </option>
<option value="1">IMT-Atlantique</option>
<option value="2">CNRS</option>
<option value="3">INRIA</option>
<option value="4">UNIVERSITÉ</option>
<option value="5">ARMINE</option>
<option value="6">SOCIÉTÉ EXTERIEUR</option>
</select>
</div>
</div>
<div class="col-6 col-sm-6">
<div class="md-form">
<select class="mdb-select md-form" searchable="Rechercher.." name="service" id="service"style="z-index:10!Important;" >
<option value="" disabled selected>Sélectionner un(e) service, direction, départ. </option>
<option value="1">linck 1</option>
<option value="2">linck 2</option>
<option value="3">linck 3</option>
<option value="4">linck 4</option>
<option value="5">linck 5</option>
<option value="6">linck 6</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
<button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
page 3
<div class="step-title waves-effect waves-dark">Step 3</div>
<div class="step-new-content">
Finish!
<div class="step-actions">
<button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="button">SUBMIT</button>
</div>
</div>
</li>
</ul>
</div>
</div>
Hi,
but what should I see on this screenshot? I don't see any steppers there. Please, provide a demo with code where I will see the problem and I will try to modify the code to help you.
Best, Marta
Hi Marta, I enclose a screen copy of my form. thank you for your help A + kaddour
http://dl.free.fr/getfile.pl?file=/BzUWhO9A
Hi,
would you provide any demo of how your steppers look now? I'm not sure how can I help you and it will be very helpful if you provide any demo or screenshots and you point out the problems.
Best, Marta
Bonjour Marta, Un grand merci d'avoir répondu si rapidement. Apparemment, le problème vient de la hauteur de la balise HTML, <ul class = "horizontal stepper" style = "min-height: 270px;">
je dois ajouter un style ( style = "min-height: 270px;) pour voir mon formulaire complet. Si ma liste déroulante est plus grande que la hauteur, Exemple: ( 270px;"). Le contenu de la liste ne sera pas visible. Merci beaucoup pour votre aide. Kaddour
Bartłomiej Malanowski staff commented 5 years ago
@Kaddour Fellah, please notice that the spoken language here is English. Could you please translate your message into English so we could all understand it?
Kaddour Fellah free commented 5 years ago
Hello Bartłomiej Malanowski, A big thank you for responding so quickly.HTML, .I have to add a style (style = "min-height: 270px;) to see my complete form. If my drop-down list is larger than the tag's height, Example: (270px; ") The excess of the contents of my list will not be visible. Thank you very much to you and to Marta for your help Kaddour
Hi, I'm not sure what you mean. This is normal behavior that buttons show after clicking on a particular stepper, eg. step 2 "Organisation". I modified your code and for me, it works fine now.
Step 1 </li>
<li class="step">
<div class="step-title waves-effect waves-dark">Organisation</div>
<div class="step-new-content">
<div class="row">
<div class="md-form col-12 ml-auto">
<div class="card">
<div class="card-header bg-badge-autre white-text">
Organisation
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-6 col-sm-6">
<div class="md-form mb-0">
<select class="mdb-select md-form mdb-select-passup" searchable="Rechercher.." name="tutelle" id="tutelle" >
<option value="" disabled selected>Sélectionner une tutelle </option>
<option value="1">IMT-Atlantique</option>
<option value="2">CNRS</option>
<option value="3">INRIA</option>
<option value="4">UNIVERSITÉ</option>
<option value="5">ARMINE</option>
<option value="6">SOCIÉTÉ EXTERIEUR</option>
</select>
</div>
</div>
<div class="col-6 col-sm-6">
<div class="md-form">
<select class="mdb-select md-form" searchable="Rechercher.." name="service" id="service"style="z-index:10!Important;" >
<option value="" disabled selected>Sélectionner un(e) service, direction, départ. </option>
<option value="1">linck 1</option>
<option value="2">linck 2</option>
<option value="3">linck 3</option>
<option value="4">linck 4</option>
<option value="5">linck 5</option>
<option value="6">linck 6</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
<button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 3</div>
<div class="step-new-content">
Finish!
<div class="step-actions">
<button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="button">SUBMIT</button>
</div>
</div>
</li>
</ul>
</div>
</div>
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.6.1
- Device: server
- Browser: chrome
- OS: Ubuntu
- Provided sample code: No
- Provided link: No