set label that value has already taken.

Topic: set label that value has already taken.

Paul Kim (Little Tiger) pro priority vip early access premium asked 7 years ago

http://prntscr.com/igmc2y so. as screenshot show. what if there is a value already in the input how can I set a label to activated mode?

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

Hi There Paul, Thanks for reaching out! In general, clicking on inputs (the focus event) grands label the .active state. Of course, you can ensure it happens by itself! The best solution seems to be dependent on the way you currently fill up the inputs, as this way does not include said focus-isng. Please elaborate or, better, provide your code on Codepen or JSfiddle so we can collaborate, figure the issue out together. With Best Regards, Kuba

Paul Kim (Little Tiger) pro priority vip early access premium commented 7 years ago

there is not much difficult code in there just same as input statement with value in it. like this <pre>Start your code here</pre> <input class="form-control" type="text" name="business_name" id="id_business_name" maxlength="128" required="" value="R&J Construction"> <label for="id_business_name">Business name</label>

Jakub Strebeyko staff commented 7 years ago

Hi Paul, The reason why I did ask for your code is that copying the above snippet (within the <code><form class="md-form">...</code> wrapper) into a MDB-embedded project does render correctly, at least on Chrome Version 64.0.3282.140 (Official Build). What makes the label "retreat" back is MDB JS file - can you ensure that it is included in your HTML file correctly? With Best Regards, Kuba

Add comment

Paul Kim (Little Tiger) pro priority vip early access premium answered 7 years ago

0 0 Best answer

<div class="modal-body">
<div class="row">
<input type="hidden" name="user" id="id_user" value="1">
<div class=" md-form col-4">
<div class="file-field">
<div class="btn btn-default btn-sm">
<span>Choose file</span>
<input type="file" name="picture" id="id_picture" accept="image/*" value="employee/sg11-q8-Matches-burning.jpg">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload employee's image" id="id_picture" accept="image/*" value="employee/sg11-q8-Matches-burning.jpg">
</div>

</div>
</div>
<div class="md-form col-4">
<svg class="svg-inline--fa fa-building fa-w-14 prefix grey-text" aria-hidden="true" data-prefix="fa" data-icon="building" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M436 480h-20V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v456H12c-6.627 0-12 5.373-12 12v20h448v-20c0-6.627-5.373-12-12-12zM128 76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76zm0 96c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40zm52 148h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12zm76 160h-64v-84c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v84zm64-172c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40zm0-96c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12V76c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40z"></path></svg>
<input class="form-control" type="text" name="first_name" id="id_first_name" maxlength="32" required="" value="Elsa5">
<label for="id_first_name" class="active">First name</label>

</div>
<div class="md-form col-4">
<input class="form-control" type="text" name="last_name" id="id_last_name" maxlength="32" required="" value="Lone6">
<label for="id_last_name">Last name</label>

</div>
</div>
<div class="md-form">
<div class="select-wrapper mdb-select"><span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-5e9f9104-2523-4486-850e-d6fec24b57b5" value="Worker"><ul id="select-options-5e9f9104-2523-4486-850e-d6fec24b57b5" class="dropdown-content select-dropdown "><li class="disabled "><span class="filtrable">-</span></li><li class=""><span class="filtrable">Owner</span></li><li class=""><span class="filtrable">Manager</span></li><li class=""><span class="filtrable">Worker</span></li></ul><select class="mdb-select initialized" name="role" id="id_role">
<option value="" selected="" disabled="">-</option>

<option value="OW">Owner</option>

<option value="MA">Manager</option>

<option value="WO" selected="">Worker</option>

</select></div>
<label for="id_role">Role</label>
</div>
<div class="row">
<div class="md-form col-8">
<svg class="svg-inline--fa fa-phone fa-w-16 prefix grey-text" aria-hidden="true" data-prefix="fa" data-icon="phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M493.397 24.615l-104-23.997c-11.314-2.611-22.879 3.252-27.456 13.931l-48 111.997a24 24 0 0 0 6.862 28.029l60.617 49.596c-35.973 76.675-98.938 140.508-177.249 177.248l-49.596-60.616a24 24 0 0 0-28.029-6.862l-111.997 48C3.873 366.516-1.994 378.08.618 389.397l23.997 104C27.109 504.204 36.748 512 48 512c256.087 0 464-207.532 464-464 0-11.176-7.714-20.873-18.603-23.385z"></path></svg>
<input class="form-control" type="text" name="mobile_number" id="id_mobile_number" required="" value="(542)115-4487">
<label for="id_mobile_number">Mobile number</label>

</div>
<div class="md-form col-4">
<svg class="svg-inline--fa fa-dollar-sign fa-w-10 prefix grey-text" aria-hidden="true" data-prefix="fa" data-icon="dollar-sign" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M113.411 169.375c0-23.337 21.536-38.417 54.865-38.417 26.726 0 54.116 12.263 76.461 28.333 5.88 4.229 14.13 2.354 17.575-4.017l23.552-43.549c2.649-4.898 1.596-10.991-2.575-14.68-24.281-21.477-59.135-34.09-91.289-37.806V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v49.832c-58.627 13.29-97.299 55.917-97.299 108.639 0 123.533 184.765 110.81 184.765 169.414 0 19.823-16.311 41.158-52.124 41.158-30.751 0-62.932-15.88-87.848-35.887-5.31-4.264-13.082-3.315-17.159 2.14l-30.389 40.667c-3.627 4.854-3.075 11.657 1.302 15.847 24.049 23.02 59.249 41.255 98.751 47.973V500c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-47.438c65.72-10.215 106.176-59.186 106.176-116.516.001-119.688-184.764-103.707-184.764-166.671z"></path></svg>
<input class="form-control" type="number" step="0.01" name="wage" id="id_wage" required="" value="52.00">
<label for="id_wage">Wage</label>

</div>
</div>

</div>

Jakub Strebeyko staff commented 7 years ago

Hi there, Let me repeat: what makes the label "retreat" back is MDB JS file – can you ensure that it is included in your HTML file correctly? Best, Kuba

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

User: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Paul Kim (Little Tiger)

Pro User Premium support

70Support score
8Questions 5Answers

0Snippets likes 3Snippets