I have following bootstrap datepicker. When I added a span (“spanAstreisk”) to display an asterisk indicating a required field, the height of icons is increased and it no longer looks like aligned with the textbox. How to fix this?
Fiddle2: https://jsfiddle.net/ezvzvvqg/15/
Fiddle1: https://jsfiddle.net/ezvzvvqg/10/
HTML
<table class="table table-user-information" style="font-size:12px;"> <tbody> <tr> <td class="tdPopupTextDescription">Effective Date:</td> <td id="tdEffectiveDate"> <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true"> <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;"><label for="txtEffectiveDate" generated="true" class="error">This field is required.</label> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> <span class="glyphicon glyphicon-asterisk requiredAsterisk"></span> </div> </td> </tr> </tbody> </table> 8 Answers
Answers 1
Here's the new code
<table> <tr> <td class="tdPopupTextDescription">Effective Date: </td> <td id="tdEffectiveDate"> <div class="input-group date" data-provide="datepicker" data-date-show-on-focus="true"> <input type="text" class="form-control required" id="txtEffectiveDate" maxlength="10" style="display:inline;"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> <div class="input-group-addon"> <span id="test" class="glyphicon glyphicon-asterisk requiredAsterisk"></span> </div> <div class="input-group-addon spanAstreisk"> <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span> </div> </div> </td> </tr> </table> CSS
.spanAstreisk{ background:none; border:0 } Look at this solution: jsfiddle.net/SeniorFront/z24cc91a
Answers 2
Working example
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style type="text/css"> </style> </head> <body> <table> <tr> <td class="tdPopupTextDescription">Effective Date: </td> <td id="tdEffectiveDate"> <div class="input-group date" data-provide="datepicker" data-date-show-on-focus="true"> <input type="text" class="form-control required" id="txtEffectiveDate" maxlength="" style="display:inline;"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> <div class="input-group-addon"> <span id="test" class="glyphicon glyphicon-asterisk requiredAsterisk"></span> </div> <div class="input-group" style="height: 20px;"> <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk" style="position: absolute;top:10px;"></span> </div> </div> </td> </tr> </table> </body> </html> If you need only one asterix you can achieve it like this
One asterix example
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style type="text/css"> </style> </head> <body> <table> <tr> <td class="tdPopupTextDescription">Effective Date: </td> <td id="tdEffectiveDate"> <div class="input-group date" data-provide="datepicker" data-date-show-on-focus="true"> <input type="text" class="form-control required" id="txtEffectiveDate" maxlength="" style="display:inline;"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> <div class="input-group" style="height: 20px;"> <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk" style="position: absolute;top:10px;"></span> </div> </div> </td> </tr> </table> </body> </html> Hope this helps!
Answers 3
It looks like the problem is that you put a <label> inside the input-group but only input-group-addon, input-group-btn and form-control should be inside the input-group. That <label> is forcing the icons to stretch to accommodate the label. So I removed the <label> and put it outside the input-group. After I did that, the asterisk addon worked fine.
Here is a fiddle with my changes: https://jsfiddle.net/ezvzvvqg/18/
Here it is in Stack Snippet form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/> <table class="table table-user-information" style="font-size:12px;"> <tbody> <tr> <td class="tdPopupTextDescription">Effective Date:</td> <td id="tdEffectiveDate"> <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true"> <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> <span class="input-group-addon" id="sizing-addon1"><span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span></span> </div> <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label> </td> </tr> </tbody> </table>Update: I noticed that you had one other asterisk without input-group-addon. If you want the asterisk without the style of an input-group-addon, then you can use a span and then apply styles that will make it act like a input-group-addon. The style declarations that you need are: display:table-cell, vertical-align-middle (these two styles make the asterisk vertically-centered) and width:1% (to make it take the least amount of space). Plus padding:6px 12px to give it the same spacing as the addons. Here is a demo:
#spanAstreisk { display:table-cell; width:1%; vertical-align:middle; padding:6px 12px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/> <table class="table table-user-information" style="font-size:12px;"> <tbody> <tr> <td class="tdPopupTextDescription">Effective Date:</td> <td id="tdEffectiveDate"> <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true"> <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span> </div> <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label> </td> </tr> </tbody> </table>Answers 4
You just need a bit of positioning:
#spanAstreisk{ position: absolute; top: 0; } Answers 5
I add some css, working with position and here is the result
https://jsfiddle.net/e1sue1ym/
`.input-group.date { padding-right: 20px; margin-bottom: 20px; } .input-group.date label.error { position: absolute; bottom: -23px; left: 0; } .input-group .requiredAsterisk { position: absolute; right: 0px; }` Is that what do you want to achieve?
Answers 6
<table class="table table-user-information" style="font-size:12px;"> <tbody> <tr> <td class="tdPopupTextDescription">Effective Date:</td> <td id="tdEffectiveDate"> <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true"> <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> <span class="input-group-addon" id="sizing-addon1"><span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span></span> </div> <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label> </td> </tr> </tbody> </table> And for your stylesheet
----- Stylesheet ----
#sizing-addon1{ background-color: transparent; border:none; font-size: 9px; font-weight: normal; padding:2px 5px; color:#C00 } Answers 7
You have a lot of correct answers here so a different approach would be to put the asterisk inside the input field to indicate that the field is mandatory.
$("#txtEffectiveDate").on("focus",function(){ $( "#spanAstreisk" ).animate({ opacity: 1 },600); $("#spanAstreisk").css("opacity",1); }).on("blur",function(){ $( "#spanAstreisk" ).animate({ opacity: 0.25 },600); });#spanAstreisk { position:absolute; top:1rem; right:4.5rem; opacity:.25; z-index:9999; color:red; }<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script> <table> <tr> <td class="tdPopupTextDescription">Effective Date: </td> <td id="tdEffectiveDate"> <div class="input-group date" data-provide="datepicker" data-date-show-on-focus="true"> <input type="text" class="form-control required" id="txtEffectiveDate" maxlength="10" style="display:inline;"> <span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> </div> </td> </tr> </table>Answers 8
One more way is to add the following style to the astrisk span:
#spanAstreisk { display: table-cell; vertical-align: middle; } Here is your updated fiddle: Fiddle
0 comments:
Post a Comment