alya_alsiyabi's avatar

multiple select list goes behind the class

I have multiple select list of languages, the problem when I increase the height it goes behind the wizard class. I tried to increase the z-index to very high number but the problem still there I don't know why it goes behind: https://i.stack.imgur.com/Pkocr.jpg

can anybody tell me what might be the reason?

This is my code:

			<div class="wizard">
				<div class="wizard-inner">
						<div class="connecting-line"></div>
									<ul class="nav nav-tabs" role="tablist">
										<li role="presentation" class="active  col-4">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab"><i class="glyphicon glyphicon-folder-open"></i></span></a>
										</li>
									</ul>
						</div>
			<form   method="POST" action="{{route('consultancy.update')}}"  id=cv enctype=multipart/form-data  style="overflow: hidden;" id=cv>
												@csrf
													<div class="tab-content">
														<div class="tab-pane active" role="tabpanel" id="step1">
														<h3 class="title pb-4">Personal Information</h3>
															<div class="col-md-3 col-lg-4">
																<div class="row">
																	<div class="col-6">
														<label class="control-label">Languages <aspan class=star> *</aspan> :</label>
																	</div>
																</div>
														<select name="languages[]"  class=first id="languages" multiple >
															<?php
														$selected = explode(",", $con->languages);?>
														@foreach($languages as $lang)
														<option value="{{ $lang->id }}" {{ (in_array($lang->id,$selected )) ? 'selected' : '' }}>{{ $lang->name}}</option>
														@endforeach               
														@foreach($languages as $languages)
														<option  value="{{$languages->id}}">{{$languages->name}}</option>
														@endforeach
														</select>
															</div>
														</div>
																<ul class="list-inline pull-right  m-4">
																	<li><button type="button" class="btn btn-primary next-step1">Continue</button></li>
																</ul>
													</div>
												</form>  
											</div> 
											</div>
0 likes
3 replies
Sinnbeck's avatar

Could be due to z-index. Try setting a high z-index on the select container

Sinnbeck's avatar

@alya_alsiyabi can you share a link to the page or make a simple reproduction on something like jsfiddle or codesandbox

Please or to participate in this conversation.