jQuery Slide from left to right distorts CSS

Question

I have a textbox and a button . On clicking the button, if textbox value is blank, then textbox will be highlighted with red borders. On putting focus on the textbox , a validation message will be displayed (slide in from left to right) , something like this:

But after putting the code for sliding in from left to right the validation message is shown as below:

Below is the snippet for the same.

 $(document).ready(function(){ $.fn.textWidth = function (text, font) { if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); return $.fn.textWidth.fakeEl.width(); }; $('#btnSave').click(function(){ if (!$('#txtName').val()) { $('#txtName').addClass('validationInput'); $('#txtName').closest('div').addClass('wrap'); } else alert("Success"); }); $('#txtName').on('blur', function () { if ($(this).val() != "" && $(this).val() != null) { $(this).removeClass("validationInput"); $(this).closest('div').removeClass("wrap"); } $(this).parent().parent().siblings().html(""); $(this).parent().parent().siblings().css("display", "none"); }); $('#txtName').on('focus', function () { if ($(this).hasClass('validationInput')) { var w = $.fn.textWidth("Please enter name", '12px arial') + 50; $(this).parent().parent().siblings().html("Please enter name"); //$(this).parent().parent().siblings().css({ "display": "inline-block", "width": w }); $(this).parent().parent().siblings().css({ "width": w }).show('slide', {direction: 'left'}, 1000); } }); }); 

 .wrapTextboxDiv { height: 25px; } .col-lg-3 { width: 25%; } .wrap span:first-child { display: flex; overflow: hidden; position: relative; width: 100%; } .wrap span:first-child .input-holder::after { border-color: red; border-style: solid; border-width: 5px; box-shadow: 0 0 0 1px #ffffe0; content: ""; height: 0; position: absolute; right: -5px; top: -5px; transform: rotate(45deg); width: 0; } input.vtooltips[type="text"] { display: inline; height: 20px; position: relative; } .vspan { background: #dc000c none repeat scroll 0 0; border: 1px solid #6d6d6d; border-radius: 4px; box-shadow: 2px 2px 0 #afb1b1; color: #fff; display: none; font-family: Arial; font-size: 12px; height: 20px; line-height: 15px; margin-left: 101%; opacity: 1; padding-left: 5px; padding-right: 5px; position: relative; text-align: center; top: -23px; z-index: 1000; } .validationInput, .validationInput:focus, .validationInput:hover { background-color: #ffffe0 !important; border: 1px solid red !important; height: 20px; } .mandatoryText { background-color: #fafad2 !important; } .textbox { border: 1.5px solid #f2ca8c; border-radius: 4px !important; height: 23px !important; width:90%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <div class="col-lg-3 wrapTextboxDiv"> <span> <span class="input-holder"> <input type="text" class="mandatoryText vtooltips form-control textbox" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" id="txtName" name="tname"> </span> </span> <span class="vspan"></span> </div> <br/> <br/> <input type="button" id="btnSave" value="Save"/> 

What am I doing wrong? Any help will be appreciated.

Answer 1

Remove margin-left and add left:100% in .vspan class.

 $(document).ready(function(){ $.fn.textWidth = function (text, font) { if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); return $.fn.textWidth.fakeEl.width(); }; $('#btnSave').click(function(){ if (!$('#txtName').val()) { $('#txtName').addClass('validationInput'); $('#txtName').closest('div').addClass('wrap'); } else alert("Success"); }); $('#txtName').on('blur', function () { if ($(this).val() != "" && $(this).val() != null) { $(this).removeClass("validationInput"); $(this).closest('div').removeClass("wrap"); } $(this).parent().parent().siblings().html(""); $(this).parent().parent().siblings().css("display", "none"); }); $('#txtName').on('focus', function () { if ($(this).hasClass('validationInput')) { var w = $.fn.textWidth("Please enter name", '12px arial') + 50; $(this).parent().parent().siblings().html("Please enter name"); //$(this).parent().parent().siblings().css({ "display": "inline-block", "width": w }); $(this).parent().parent().siblings().css({ "width": w }).show('slide', {direction: 'left'}, 1000); } }); }); 

 .wrapTextboxDiv { height: 25px; } .col-lg-3 { width: 25%; } .wrap span:first-child { display: flex; overflow: hidden; position: relative; width: 100%; } .wrap span:first-child .input-holder::after { border-color: red; border-style: solid; border-width: 5px; box-shadow: 0 0 0 1px #ffffe0; content: ""; height: 0; position: absolute; right: -5px; top: -5px; transform: rotate(45deg); width: 0; } input.vtooltips[type="text"] { display: inline; height: 20px; position: relative; } .vspan { background: #dc000c none repeat scroll 0 0; border: 1px solid #6d6d6d; border-radius: 4px; box-shadow: 2px 2px 0 #afb1b1; color: #fff; display: none; font-family: Arial; font-size: 12px; height: 20px; line-height: 15px; /* margin-left: 101%;*/ /* Remove this*/ opacity: 1; padding-left: 5px; padding-right: 5px; position: relative; text-align: center; top: -23px; z-index: 1000; left:100%; } .validationInput, .validationInput:focus, .validationInput:hover { background-color: #ffffe0 !important; border: 1px solid red !important; height: 20px; } .mandatoryText { background-color: #fafad2 !important; } .textbox { border: 1.5px solid #f2ca8c; border-radius: 4px !important; height: 23px !important; width:90%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <div class="col-lg-3 wrapTextboxDiv"> <span> <span class="input-holder"> <input type="text" class="mandatoryText vtooltips form-control textbox" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" id="txtName" name="tname"> </span> </span> <span class="vspan"></span> </div> <br/> <br/> <input type="button" id="btnSave" value="Save"/> 

Answer 2

Simply do this with float:left property , add float to this class .vspan , just try with this snippet

 $(document).ready(function(){ $.fn.textWidth = function (text, font) { if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); return $.fn.textWidth.fakeEl.width(); }; $('#btnSave').click(function(){ if (!$('#txtName').val()) { $('#txtName').addClass('validationInput'); $('#txtName').closest('div').addClass('wrap'); } else alert("Success"); }); $('#txtName').on('blur', function () { if ($(this).val() != "" && $(this).val() != null) { $(this).removeClass("validationInput"); $(this).closest('div').removeClass("wrap"); } $(this).parent().parent().siblings().html(""); $(this).parent().parent().siblings().css("display", "none"); }); $('#txtName').on('focus', function () { if ($(this).hasClass('validationInput')) { var w = $.fn.textWidth("Please enter name", '12px arial') + 50; $(this).parent().parent().siblings().html("Please enter name"); //$(this).parent().parent().siblings().css({ "display": "inline-block", "width": w }); $(this).parent().parent().siblings().css({ "width": w }).show('slide', {direction: 'left'}, 1000); } }); }); 

 .wrapTextboxDiv { height: 25px; } .col-lg-3 { width: 25%; } .wrap span:first-child { display: flex; overflow: hidden; position: relative; width: 100%; } .wrap span:first-child .input-holder::after { border-color: red; border-style: solid; border-width: 5px; box-shadow: 0 0 0 1px #ffffe0; content: ""; height: 0; position: absolute; right: -5px; top: -5px; transform: rotate(45deg); width: 0; } input.vtooltips[type="text"] { display: inline; height: 20px; position: relative; } .vspan { background: #dc000c none repeat scroll 0 0; border: 1px solid #6d6d6d; border-radius: 4px; box-shadow: 2px 2px 0 #afb1b1; color: #fff; display: none; font-family: Arial; font-size: 12px; height: 20px; line-height: 15px; left: 100%; opacity: 1; padding-left: 5px; padding-right: 5px; position: relative; text-align: center; top: -23px; z-index: 1000; float:left; } .validationInput, .validationInput:focus, .validationInput:hover { background-color: #ffffe0 !important; border: 1px solid red !important; height: 20px; } .mandatoryText { background-color: #fafad2 !important; } .textbox { border: 1.5px solid #f2ca8c; border-radius: 4px !important; height: 23px !important; width:90%; } 

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> </head> <body> <div class="col-lg-3 wrapTextboxDiv"> <span> <span class="input-holder"> <input type="text" class="mandatoryText vtooltips form-control textbox" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" id="txtName" name="tname"> </span> </span> <span class="vspan"></span> </div> <br/> <br/> <input type="button" id="btnSave" value="Save"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </body> </html>