Level 104
Try display: flex instead
1 like
Sep 20, 2022
10
Level 2
css of select type:mutiple
hi I am trying to use select type: multiple although I put display as inline-block it is still not showing in line. it shows like this: https://i.stack.imgur.com/Eqx6o.jpg
Level 2
@tykus I tried this but still not working
Level 104
@alya_alsiyabi still not working means what exactly? We have no markup or CSS to work with here
1 like
Level 2
@include('Layoutfront.header')
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>
.form-control::placeholder{
font-size:small!important;
font-style: normal !important;
}
.slider-height2 {
height: 241px;
}
.font{
margin: 0px 15px 0px;
font-size:8px;
color:red
}
.custom-select1{
display: block !important;
padding: inherit;
padding-bottom: 1rem!important;
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.multiselect-dropdown-list{
height: 86px!important;
}
.nice-select {
display: none!important;
}
.multiselect-dropdown{
padding: 8px 324px 0px 11px;
}
.star{
color:red;
}
.wizard {
margin: 10px auto;
background: #f5f5f5;
padding: 20px;
border-radius: 20px;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.wizard{
background:white;
}
.wizard h3{
font-size: 20px;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
/* .glyphicon-ok:before{
color: #dc222a!important;
} */
.wizard .nav-tabs > li.active > a,
.wizard .nav-tabs > li.active > a:hover,
.wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i {
color: #555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #dc222a;
}
.wizard li.active span.round-tab i {
color: #dc222a;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #760106;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #760106;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
.btn-default{
color:white;
}
@media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
@media all and (min-width:769px) and (max-width: 800px) {
.multiselect-dropdown {
padding: 8px 334px 0px 11px;
}}
@media all and (min-width:912px) and (max-width: 768px) {
.multiselect-dropdown {
padding: 8px 280px 0px 11px;
}}
@media all and (min-width:481px) and (max-width: 568px) {
.multiselect-dropdown {
padding: 8px 332px 0px 11px;
}}
@media all and (min-width:321px) and (max-width: 480px) {
.multiselect-dropdown {
padding: 8px 265px 0px 11px;
}}
@media all and (min-width:280px) and (max-width: 320px) {
.multiselect-dropdown {
padding: 8px 145px 0px 11px;
}}
@media (max-width: 585px) {
.wizard {
width: 90%;
height: auto !important;
}
.optext span{
display: inline !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
</style>
<!-- Hero Area Start-->
<div class="slider-area king ">
<div class="single-slider section-overly slider-height2 d-flex align-items-center" data-background="{{asset('../asset/img/hero/pexels-photo-4101343.jpeg')}}">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="hero-cap text-center">
<h5 class=word> </h5>
<h5 class=text-white >With Aman Portal </h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-12">
<section>
<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>
<li role="presentation" class="disabled col-4">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled col-4">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></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
@if (count($errors) > 0)
<div class="alert alert-danger alert-dismissible fade show">
<strong>Opps!</strong> Something went wrong, please check below errors.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3 class="title pb-4">Personal Information</h3>
<div class=row>
<div class="col-md-3 col-lg-3">
<label class="control-label">First Name<aspan class=star> *</aspan> :</label>
<input class="form-control pb-3 pt-2 mt-1" placeholder="Enter you First name" value="{{ old('first_name')??$con->first_name }}" required maxlength=125 name=first_name type="text" style="padding-top: 4px;padding: inherit;">
</div>
<div class="col-md-3 col-lg-3">
<label class="control-label">Last Name<aspan class=star> *</aspan> :</label>
<input class="form-control mt-1" name="family_name" type="text" placeholder="Enter you Family name" style="padding-top: 4px;" value="{{ old('family_name')??$con->family_name }}">
</div>
<div class="col-md-3 col-lg-3">
<label class="control-label">Linkedin:</label>
<input class="form-control mt-1" name="linkedin" type="url" placeholder="Enter you linkdin account here name" style="padding-top: 4px;" value="{{ old('linkedin')??$con->linkedin }}">
</div>
<div class="col-md-3 col-lg-3">
<label class="control-label">Phone<aspan class=star> *</aspan> :</label>
<input class="form-control mt-1" name="number" placeholder="Enter you phone number here" type="text" style="padding-top: 4px;" value="{{ old('number')??$con->number }}">
</div>
</div>
<div class="row mt-4">
<div class="col-md-3 col-lg-4">
<label class="control-label">Email<aspan class=star> *</aspan> :</label>
<input class="form-control" name="email" type="text" placeholder="Enter you email here" style="padding-top: 4px;" value="{{ old('email') }}">
</div>
<div class="col-md-3 col-lg-4">
<label class="control-label">Country <aspan class=star> *</aspan> :</label>
<select name="country" class="custom-select1"style="overflow:auto;" required>
<option value="">select</option>
@foreach(\App\Models\Location::all() as $locations)
<option value="{{$locations->name}}">{{$locations->name}}</option>
@endforeach
</select>
</div>
<div class="col-md-3 col-lg-4">
<label class="control-label">Languages <aspan class=star> *</aspan> :</label>
<select name="languages[]" class=first id="languages" multiple >
@foreach(\App\Models\Lang::all() as $Lang)
<option value="{{$Lang->name}}">{{$Lang->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>
<div class="tab-pane" role="tabpanel" id="step2">
<h3 class="title pb-4">Educational & Professional Details</h3>
<div class="col-md-4 col-lg-12">
<div class="form-group">
<div class="appending_div"></span>
<div class="row">
<div class="col-md-3 col-lg-4">
<div class="form-group">
<label class="control-label">Education Degree:<aspan class=star> *</aspan> :</label>
<input class="form-control" placeholder="Enter your degree" value="{{ old('otheredu') }}" required maxlength=125 name=otheredu[] type="text">
</div>
</div>
<div class="col-md-1 col-lg-4">
<div class="form-group">
<label class="control-label">Specialization<aspan class=star> *</aspan> :</label>
<input class="form-control" placeholder="Enter you major" value="{{ old('othersp[]') }}" required maxlength=125 name=othersp[] type="text">
</div>
</div>
<div class="col-md-1 col-lg-4">
<div class="form-group">
<label class="control-label">Year:<aspan class=star> *</aspan> :</label>
<input class="form-control" name="othery[]" type="text" placeholder="Enter you here year" required value="{{ old('othery[]') }}">
</div>
</div>
</div>
<label class="control-label"> More Degrees:<span class="fa fa-plus add text-danger"></span></label>
</div>
</div>
<div class=row>
<div class="col-md-1 col-lg-4">
<label class="control-label">Other Qualifications</label>
<input class="form-control" placeholder="e.g:PMP,CBA..ect" value="{{ old('qualifications[]') }}" maxlength=500 name=qualifications type="text">
</div>
<div class="col-md-1 col-lg-4">
<label class="control-label">Years of Experience<aspan class=star> *</aspan> :</label>
<select name="experience" id="experience"class="custom-select1">
<option value="{{ old('experience') }}">Select Experience Years</option>
<option value="1-5">(1-5)</option>
<option value="6-10">(6-10)</option>
<option value="11-15">(11-15)</option>
<option value="16-20">(16-20)</option>
<option value="21+">21+</option>
</select>
</div>
<div class="col-md-1 col-lg-4">
<label class="control-label">Additional Document<aspan class='photo';>(size should be less than 2 MB))</aspan>:</label>
<input type="file" class="form-control"value="{{ old('additiondoucument') }}" name="AdditionDoucument" style=padding-top:4px; >
</div>
</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step1 m-4">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step1 m-4">Continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3 class="title pb-4">Other</h3>
<div class="row">
<div class="col-md-3 col-lg-3">
<div class="form-group">
<label class="control-label">Consultancy Types Services <aspan class=star> *</aspan> :</label>
<select class="custom-select1 dropdown" name="consultantactivities_id" id="consultantactivities_id">
<option value="{{ old('consultantactivities_id') }}" selected="" disabled> Select </option>
@forelse ($consultantactivities_id as $activiry)
<option value="{{ $activiry->id }}">{{ $activiry->name }} </option>
@empty
@endforelse
</select>
</div>
</div>
<div class="col-md-1 col-lg-3">
<div class="form-group">
<label class="control-label">Subcategory<aspan class=star> *</aspan> :</label>
<select class="custom-select1 dropdown" name="framework" id="framework">
<option> Select </option>
</select>
</div>
</div>
<div class="col-md-1 col-lg-3">
<div class="form-group">
<label class="control-label">Day Rate(USD)</label>
<input class="form-control mt-1" name="day_rate" placeholder="Enter you day rate by US.$ " type="text" style="padding-top: 4px;" value="{{ old('day_rate') }}">
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="form-group">
<label class="control-label">Monthly Rate(USD):</label>
<input class="form-control" name="monthly_rate" placeholder="Enter you monthly rate by US.$ " type="text" style="padding-top: 4px;" value="{{ old('monthly_rate') }}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="form-group">
<label class="control-label">Preferred working Duration :</label>
<select name="preworkingdu[]" id="preworkingdu" multiple="multiple" class="">
<option value='[01,02,03,04,05,06,07,08,09,10,11,12]'>--all--</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
</div>
<div class="col-md-3 col-lg-4">
<div class="form-group">
<label class="control-label"> Notice Period: </label>
<select name="notice_period" id="notice_period"class="custom-select1">
<option value="{{ old('notice_period') }}">select</option>
<option value="1 weeks">1 week</option>
<option value="2 weeks">2 weeks</option>
<option value="3 weeks">3 weeks</option>
<option value="4 weeks">4 weeks</option>
<option value="5 weeks">5 weeks</option>
<option value="6 weeks">6 weeks</option>
<option value="7 weeks">7 weeks</option>
<option value="8+ weeks"> 8+ weeks</option>
</select>
</div>
</div>
<div class="col-md-3 col-lg-4">
<div class="form-group">
<label class="control-label">Availability :</label>
<select name="availability[]" id="availability" multiple="multiple">
<option value="Full time">Full time</option>
<option value="Part time">Part time</option>
<option value="Remote ">Remote </option>
<option value="On site">On site</option>
<option value="Long term">Long term</option>
<option value="Short Term">Short Term</option>
</select>
</div>
</div>
<p class=font>Pleae notice if any of required field is missed you won'nt be able to save you data</p>
</div>
<div class=text-right>
<ul class="list-inline pull-right text-right">
<li><button type="button" class="btn btn-default prev-step1 m-4">Previous</button></li>
<li><button type="submit" class="btn btn-primary next-step1 m-4">submit</button></li>
</ul>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
<script>
$(document).ready(function () {
//Initialize tooltips
$(".nav-tabs > li a[title]").tooltip();
//Wizard
$('a[data-toggle="tab"]').on("show.bs.tab", function (e) {
var $target = $(e.target);
if ($target.parent().hasClass("disabled")) {
return false;
}
});
$(".next-step1").click(function (e) {
var $active = $(".wizard .nav-tabs li.active");
$active.next().removeClass("disabled");
nextTab($active);
});
$(".prev-step1").click(function (e) {
var $active = $(".wizard .nav-tabs li.active");
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>
<script>
var words = ['Join to Consultancy hub'],
part,
i = 0,
offset = 0,
len = words.length,
forwards = true,
skip_count = 0,
skip_delay = 15,
speed = 140;
var wordflick = function () {
setInterval(function () {
if (forwards) {
if (offset >= words[i].length) {
++skip_count;
// if (skip_count == skip_delay) {
// forwards = false;
// skip_count = 0;
// }
}
}
else {
if (offset == 0) {
forwards = true;
i++;
offset = 0;
if (i >= len) {
i = 0;
}
}
}
part = words[i].substr(0, offset);
if (skip_count == 0) {
if (forwards) {
offset++;
}
else {
offset--;
}
}
$('.word').text(part);
},speed);
};
$(document).ready(function () {
wordflick();
});
</script>
</script>
<script src="multiselect-dropdown.js" ></script>
<script>
$(document).ready(function() {
var i = 2;
$('.add').on('click', function() {
var field = '<br><div> Other Degree '+i+'<div class=row><div class="col-md-6 col-lg-4"> <label class="control-label">Educational degree:</label> <input placeholder="Enter your degree" class="form-control mt-1" type="text" name="otheredu[]"></div><div class="col-md-6 col-lg-4 "> <label class="control-label">Specialization: </label><input placeholder="Enter your Specialization" class="form-control mt-1" type="text" name="othersp[]"></div><div class="col-md-6 col-lg-4 "> <label class="control-label">Year:</label><input placeholder="Enter here the year" class="form-control mt-1" type="text" name="othery[]"> </div></div> <br><div>';
$('.appending_div').append(field);
i = i+1;
})
})
</script>
<script>
$("#consultantactivities_id").change(function () {
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
});
const langId = $(this).val();
$.ajax({
type: "POST",
url: "frameworks1",
data: {
activity_ids: langId,
},
success: function (result) {
$("#framework").empty();
$("#framework").append(
'<option selected disabled value="">Select</option>'
);
if (result && result?.status === "success") {
result?.data?.map((framework) => {
const frameworks = `<option value='${framework?.id}'> ${framework?.name} </option>`;
$("#framework").append(frameworks);
});
}
},
error: function (result) {
console.log("error", result);
},
});
});
</script>
@include('Layoutfront.footer1')
This is my full code
this is my select
<div class="col-md-3 col-lg-4">
<div class="form-group">
<label class="control-label">Availability :</label>
<select name="availability[]" id="availability" multiple="multiple">
<option value="Full time">Full time</option>
<option value="Part time">Part time</option>
<option value="Remote ">Remote </option>
<option value="On site">On site</option>
<option value="Long term">Long term</option>
<option value="Short Term">Short Term</option>
</select>
</div>
</div>
Level 73
You want them placed beside each other rather than stacked?
You can use grid or flex to achieve that.
The use of inline block can be found here https://www.w3schools.com/css/css_inline-block.asp
1 like
Level 27
Show your actual code (HTML and CSS), otherwise we have no idea what you’re doing wrong.
Level 2
@include('Layoutfront.header')
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>
.form-control::placeholder{
font-size:small!important;
font-style: normal !important;
}
.slider-height2 {
height: 241px;
}
.font{
margin: 0px 15px 0px;
font-size:8px;
color:red
}
.custom-select1{
display: block !important;
padding: inherit;
padding-bottom: 1rem!important;
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.multiselect-dropdown-list{
height: 86px!important;
}
.nice-select {
display: none!important;
}
.multiselect-dropdown{
padding: 8px 324px 0px 11px;
}
.star{
color:red;
}
.wizard {
margin: 10px auto;
background: #f5f5f5;
padding: 20px;
border-radius: 20px;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.wizard{
background:white;
}
.wizard h3{
font-size: 20px;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
/* .glyphicon-ok:before{
color: #dc222a!important;
} */
.wizard .nav-tabs > li.active > a,
.wizard .nav-tabs > li.active > a:hover,
.wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i {
color: #555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #dc222a;
}
.wizard li.active span.round-tab i {
color: #dc222a;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #760106;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #760106;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
.btn-default{
color:white;
}
@media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
@media all and (min-width:769px) and (max-width: 800px) {
.multiselect-dropdown {
padding: 8px 334px 0px 11px;
}}
@media all and (min-width:912px) and (max-width: 768px) {
.multiselect-dropdown {
padding: 8px 280px 0px 11px;
}}
@media all and (min-width:481px) and (max-width: 568px) {
.multiselect-dropdown {
padding: 8px 332px 0px 11px;
}}
@media all and (min-width:321px) and (max-width: 480px) {
.multiselect-dropdown {
padding: 8px 265px 0px 11px;
}}
@media all and (min-width:280px) and (max-width: 320px) {
.multiselect-dropdown {
padding: 8px 145px 0px 11px;
}}
@media (max-width: 585px) {
.wizard {
width: 90%;
height: auto !important;
}
.optext span{
display: inline !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
</style>
<!-- Hero Area Start-->
<div class="slider-area king ">
<div class="single-slider section-overly slider-height2 d-flex align-items-center" data-background="{{asset('../asset/img/hero/pexels-photo-4101343.jpeg')}}">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="hero-cap text-center">
<h5 class=word> </h5>
<h5 class=text-white >With Aman Portal </h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-12">
<section>
<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>
<li role="presentation" class="disabled col-4">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled col-4">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></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
@if (count($errors) > 0)
<div class="alert alert-danger alert-dismissible fade show">
<strong>Opps!</strong> Something went wrong, please check below errors.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
@endif
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3 class="title pb-4">Personal Information</h3>
<div class=row>
<div class="col-md-3 col-lg-3">
<label class="control-label">First Name<aspan class=star> *</aspan> :</label>
<input class="form-control pb-3 pt-2 mt-1" placeholder="Enter you First name" value="{{ old('first_name')??$con->first_name }}" required maxlength=125 name=first_name type="text" style="padding-top: 4px;padding: inherit;">
</div>
<div class="col-md-3 col-lg-3">
<label class="control-label">Last Name<aspan class=star> *</aspan> :</label>
<input class="form-control mt-1" name="family_name" type="text" placeholder="Enter you Family name" style="padding-top: 4px;" value="{{ old('family_name')??$con->family_name }}">
</div>
<div class="col-md-3 col-lg-3">
<label class="control-label">Linkedin:</label>
<input class="form-control mt-1" name="linkedin" type="url" placeholder="Enter you linkdin account here name" style="padding-top: 4px;" value="{{ old('linkedin')??$con->linkedin }}">
</div>
<div class="col-md-3 col-lg-3">
<label class="control-label">Phone<aspan class=star> *</aspan> :</label>
<input class="form-control mt-1" name="number" placeholder="Enter you phone number here" type="text" style="padding-top: 4px;" value="{{ old('number')??$con->number }}">
</div>
</div>
<div class="row mt-4">
<div class="col-md-3 col-lg-4">
<label class="control-label">Email<aspan class=star> *</aspan> :</label>
<input class="form-control" name="email" type="text" placeholder="Enter you email here" style="padding-top: 4px;" value="{{ old('email') }}">
</div>
<div class="col-md-3 col-lg-4">
<label class="control-label">Country <aspan class=star> *</aspan> :</label>
<select name="country" class="custom-select1"style="overflow:auto;" required>
<option value="">select</option>
@foreach(\App\Models\Location::all() as $locations)
<option value="{{$locations->name}}">{{$locations->name}}</option>
@endforeach
</select>
</div>
<div class="col-md-3 col-lg-4">
<label class="control-label">Languages <aspan class=star> *</aspan> :</label>
<select name="languages[]" class=first id="languages" multiple >
@foreach(\App\Models\Lang::all() as $Lang)
<option value="{{$Lang->name}}">{{$Lang->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>
<div class="tab-pane" role="tabpanel" id="step2">
<h3 class="title pb-4">Educational & Professional Details</h3>
<div class="col-md-4 col-lg-12">
<div class="form-group">
<div class="appending_div"></span>
<div class="row">
<div class="col-md-3 col-lg-4">
<div class="form-group">
<label class="control-label">Education Degree:<aspan class=star> *</aspan> :</label>
<input class="form-control" placeholder="Enter your degree" value="{{ old('otheredu') }}" required maxlength=125 name=otheredu[] type="text">
</div>
</div>
<div class="col-md-1 col-lg-4">
<div class="form-group">
<label class="control-label">Specialization<aspan class=star> *</aspan> :</label>
<input class="form-control" placeholder="Enter you major" value="{{ old('othersp[]') }}" required maxlength=125 name=othersp[] type="text">
</div>
</div>
<div class="col-md-1 col-lg-4">
<div class="form-group">
<label class="control-label">Year:<aspan class=star> *</aspan> :</label>
<input class="form-control" name="othery[]" type="text" placeholder="Enter you here year" required value="{{ old('othery[]') }}">
</div>
</div>
</div>
<label class="control-label"> More Degrees:<span class="fa fa-plus add text-danger"></span></label>
</div>
</div>
<div class=row>
<div class="col-md-1 col-lg-4">
<label class="control-label">Other Qualifications</label>
<input class="form-control" placeholder="e.g:PMP,CBA..ect" value="{{ old('qualifications[]') }}" maxlength=500 name=qualifications type="text">
</div>
<div class="col-md-1 col-lg-4">
<label class="control-label">Years of Experience<aspan class=star> *</aspan> :</label>
<select name="experience" id="experience"class="custom-select1">
<option value="{{ old('experience') }}">Select Experience Years</option>
<option value="1-5">(1-5)</option>
<option value="6-10">(6-10)</option>
<option value="11-15">(11-15)</option>
<option value="16-20">(16-20)</option>
<option value="21+">21+</option>
</select>
</div>
<div class="col-md-1 col-lg-4">
<label class="control-label">Additional Document<aspan class='photo';>(size should be less than 2 MB))</aspan>:</label>
<input type="file" class="form-control"value="{{ old('additiondoucument') }}" name="AdditionDoucument" style=padding-top:4px; >
</div>
</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step1 m-4">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step1 m-4">Continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3 class="title pb-4">Other</h3>
<div class="row">
<div class="col-md-3 col-lg-3">
<div class="form-group">
<label class="control-label">Consultancy Types Services <aspan class=star> *</aspan> :</label>
<select class="custom-select1 dropdown" name="consultantactivities_id" id="consultantactivities_id">
<option value="{{ old('consultantactivities_id') }}" selected="" disabled> Select </option>
@forelse ($consultantactivities_id as $activiry)
<option value="{{ $activiry->id }}">{{ $activiry->name }} </option>
@empty
@endforelse
</select>
</div>
</div>
<div class="col-md-1 col-lg-3">
<div class="form-group">
<label class="control-label">Subcategory<aspan class=star> *</aspan> :</label>
<select class="custom-select1 dropdown" name="framework" id="framework">
<option> Select </option>
</select>
</div>
</div>
<div class="col-md-1 col-lg-3">
<div class="form-group">
<label class="control-label">Day Rate(USD)</label>
<input class="form-control mt-1" name="day_rate" placeholder="Enter you day rate by US.$ " type="text" style="padding-top: 4px;" value="{{ old('day_rate') }}">
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="form-group">
<label class="control-label">Monthly Rate(USD):</label>
<input class="form-control" name="monthly_rate" placeholder="Enter you monthly rate by US.$ " type="text" style="padding-top: 4px;" value="{{ old('monthly_rate') }}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="form-group">
<label class="control-label">Preferred working Duration :</label>
<select name="preworkingdu[]" id="preworkingdu" multiple="multiple" class="">
<option value='[01,02,03,04,05,06,07,08,09,10,11,12]'>--all--</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
</div>
<div class="col-md-3 col-lg-4">
<div class="form-group">
<label class="control-label"> Notice Period: </label>
<select name="notice_period" id="notice_period"class="custom-select1">
<option value="{{ old('notice_period') }}">select</option>
<option value="1 weeks">1 week</option>
<option value="2 weeks">2 weeks</option>
<option value="3 weeks">3 weeks</option>
<option value="4 weeks">4 weeks</option>
<option value="5 weeks">5 weeks</option>
<option value="6 weeks">6 weeks</option>
<option value="7 weeks">7 weeks</option>
<option value="8+ weeks"> 8+ weeks</option>
</select>
</div>
</div>
<div class="col-md-3 col-lg-4">
<div class="form-group">
<label class="control-label">Availability :</label>
<select name="availability[]" id="availability" multiple="multiple">
<option value="Full time">Full time</option>
<option value="Part time">Part time</option>
<option value="Remote ">Remote </option>
<option value="On site">On site</option>
<option value="Long term">Long term</option>
<option value="Short Term">Short Term</option>
</select>
</div>
</div>
<p class=font>Pleae notice if any of required field is missed you won'nt be able to save you data</p>
</div>
<div class=text-right>
<ul class="list-inline pull-right text-right">
<li><button type="button" class="btn btn-default prev-step1 m-4">Previous</button></li>
<li><button type="submit" class="btn btn-primary next-step1 m-4">submit</button></li>
</ul>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
<script>
$(document).ready(function () {
//Initialize tooltips
$(".nav-tabs > li a[title]").tooltip();
//Wizard
$('a[data-toggle="tab"]').on("show.bs.tab", function (e) {
var $target = $(e.target);
if ($target.parent().hasClass("disabled")) {
return false;
}
});
$(".next-step1").click(function (e) {
var $active = $(".wizard .nav-tabs li.active");
$active.next().removeClass("disabled");
nextTab($active);
});
$(".prev-step1").click(function (e) {
var $active = $(".wizard .nav-tabs li.active");
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>
<script>
var words = ['Join to Consultancy hub'],
part,
i = 0,
offset = 0,
len = words.length,
forwards = true,
skip_count = 0,
skip_delay = 15,
speed = 140;
var wordflick = function () {
setInterval(function () {
if (forwards) {
if (offset >= words[i].length) {
++skip_count;
// if (skip_count == skip_delay) {
// forwards = false;
// skip_count = 0;
// }
}
}
else {
if (offset == 0) {
forwards = true;
i++;
offset = 0;
if (i >= len) {
i = 0;
}
}
}
part = words[i].substr(0, offset);
if (skip_count == 0) {
if (forwards) {
offset++;
}
else {
offset--;
}
}
$('.word').text(part);
},speed);
};
$(document).ready(function () {
wordflick();
});
</script>
</script>
<script src="multiselect-dropdown.js" ></script>
<script>
$(document).ready(function() {
var i = 2;
$('.add').on('click', function() {
var field = '<br><div> Other Degree '+i+'<div class=row><div class="col-md-6 col-lg-4"> <label class="control-label">Educational degree:</label> <input placeholder="Enter your degree" class="form-control mt-1" type="text" name="otheredu[]"></div><div class="col-md-6 col-lg-4 "> <label class="control-label">Specialization: </label><input placeholder="Enter your Specialization" class="form-control mt-1" type="text" name="othersp[]"></div><div class="col-md-6 col-lg-4 "> <label class="control-label">Year:</label><input placeholder="Enter here the year" class="form-control mt-1" type="text" name="othery[]"> </div></div> <br><div>';
$('.appending_div').append(field);
i = i+1;
})
})
</script>
<script>
$("#consultantactivities_id").change(function () {
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
});
const langId = $(this).val();
$.ajax({
type: "POST",
url: "frameworks1",
data: {
activity_ids: langId,
},
success: function (result) {
$("#framework").empty();
$("#framework").append(
'<option selected disabled value="">Select</option>'
);
if (result && result?.status === "success") {
result?.data?.map((framework) => {
const frameworks = `<option value='${framework?.id}'> ${framework?.name} </option>`;
$("#framework").append(frameworks);
});
}
},
error: function (result) {
console.log("error", result);
},
});
});
</script>
@include('Layoutfront.footer1')
Level 2
<div class="col-md-3 col-lg-4">
<div class="form-group">
<label class="control-label">Availability :</label>
<select name="availability[]" id="availability" multiple="multiple">
<option value="Full time">Full time</option>
<option value="Part time">Part time</option>
<option value="Remote ">Remote </option>
<option value="On site">On site</option>
<option value="Long term">Long term</option>
<option value="Short Term">Short Term</option>
</select>
</div>
</div>
This one
Level 27
@alya_alsiyabi As far as I can tell from the code you’ve posted, you don’t have any CSS at all applied to the select element or the option elements inside it. You have a .multiselect-dropdown-list class, but you haven’t given the actual selector that class, so of course it’s not applied.
Level 2
@kokoshneta it works you are right
Please or to participate in this conversation.