Home » Javascript » Incorrect result of offset().left

Incorrect result of offset().left

Posted by: admin June 30, 2018 Leave a comment

Questions:

I made a form consist of different types of inputs as follows.

The one input I want to focus on is the “Type” input. I made it so it shows a selectable dropdown when clicked (with search function and so on).

In the jquery I made a function to detect the offset position of the input and place the dropdown according to the obtained x and y. I want to make the form responsive so I trigger the function on focus and on resize window. The problem is, it seems to work on breakpoint (max-width: 575px) and (max-width: 767px) and (min-width: 576px), but not on larger screen. Also, can I make it so the dropdown can follow the width size of the input using this method?

Any help appreciated! 🙂

$("#popup").click(function() {
  $("#emp-name").val("Stella Kurniawan");
  $("#emp-id").val("001");
});

$(".input-datepicker").datepicker({
    format: "dd M yyyy",
    maxViewMode: 2,
    todayBtn: "linked",
    clearBtn: true,
    orientation: "top right",
    autoclose: true
});

$(document).ready(function() {
  $("#type").select2({
    placeholder: "Select type"
  });
  
  $(".js-example-basic-multiple").select2({
    placeholder: "Select items"
  }).on('change', function(e) {
    if($(this).val() && $(this).val().length) {
      $(this).next('.select2-container').find('li.select2-search--inline input.select2-search__field').attr('placeholder', 'Select items');
    }
  });
  
  dropdownWidthAdjust();
  $(".checkbox-regular-each .checkbox[selected='selected']").addClass("checkbox-checked");
  $(".checkbox-regular-each .checkbox[selected='selected'] i").addClass("symbol-checked");
  $(".radio-regular-each .radio[selected='selected']").addClass("radio-checked");
  $(".radio-regular-each .radio:not(.with-field) span").addClass("radio-btn");
});

$(".form-dropdown").click(function() {
  $(document).find(".select2-search--dropdown .select2-search__field").attr("placeholder", "Search...");
});

$(".select2-results__option").click(function() {
  $(document).find(".select2-search--inline .select2-search__field").attr("placeholder", "Search items");
});

$(function () {
  $("#choices").on("keyup", function () {
    $(".choices-list").show();
    var query = this.value;
    $(".combobox-value").each(function (i, elem) {
      if ($(this).text().toLowerCase().indexOf(query.toLowerCase()) != -1) {
        $(this).show();
        $(this).parent().show();
      } 
      else {
        $(this).hide();
        $(this).parent().hide();
      }
    });
  });
});

$(function() {
  $("#selectable").on("keyup", function () {
    $(".selectable-dropdown").show();
    var query = this.value;
    $(".selectable-dropdown-each").each(function (i, elem) {
      if ($(this).text().toLowerCase().indexOf(query.toLowerCase()) != -1) {
        $(this).show();
      } 
      else {
        $(this).hide();
      }
    });
  });
});

function repositionSelectable() {
  var selectablePosition = $(".form-dropdown").offset();
  var selectablePositionTop = selectablePosition.top + 34;
  console.log(selectablePositionTop);
  console.log(selectablePosition.left);
  $(".selectable-dropdown-wrapper").css({"top": selectablePositionTop + "px"});
  $(".selectable-dropdown-wrapper").css({"left": selectablePosition.left + "px"});
}

$("#selectable").focus(function() {
  repositionSelectable();
  $(".selectable-dropdown").show();
});

$(".selectable-dropdown-each").click(function() {
  var selectedChoice = $(this).text();
  $("#selectable").val(selectedChoice);
  $(".selectable-dropdown-each").removeClass("selectable-selected");
  $(this).addClass("selectable-selected");
  $(".selectable-dropdown").hide();
});

var countChecked = 0;
var allCombo = $(".combobox-each").length;

$(".combobox-select").click(function() {
  countChecked = $(".combobox-each .checkbox-checked").length;
  if (allCombo != countChecked) {
    $(".choices-list .checkbox").addClass("checkbox-checked");
    $(".choices-list .checkbox i").addClass("symbol-checked");
    $(".combobox-label").html("Categorized Choices <span style='font-weight: 400;'>(10/10)</span>");
    $(this).text("Uncheck All");
  }
  else {
    $(".choices-list .checkbox").removeClass("checkbox-checked");
    $(".choices-list .checkbox i").removeClass("symbol-checked");
    $(".combobox-label").html("Categorized Choices <span style='font-weight: 400;'>(0/10)</span>");
    $(this).text("Check All");
  }
});

$(".combobox-each").click(function() {
  $(this).find(".checkbox").toggleClass("checkbox-checked");
  $(this).find(".checkbox i").toggleClass("symbol-checked");
  countChecked = $(".combobox-each .checkbox-checked").length;
  $(".combobox-label").html("Categorized Choices <span style='font-weight: 400;'>(" + countChecked + "/" + allCombo + ")</span>");
  if (countChecked == allCombo) {
    $(".combobox-select").text("Uncheck All");
  }
  else {
    $(".combobox-select").text("Check All");
  }
});

$(".checkbox-regular-each").click(function() {
  $(this).find(".checkbox").toggleClass("checkbox-checked");
  $(this).find(".checkbox i").toggleClass("symbol-checked");
});

$(window).resize(function() {
  dropdownWidthAdjust();
  repositionSelectable();
});

function dropdownWidthAdjust() {
  var dropdownWidth = $(".input-text").width();
  $(".select2-dropdown").css({"width" : dropdownWidth + "px"});
  $(".select2-selection").css({"width" : dropdownWidth + "px"});
}

$(".radio").click(function() {
  if (!$(this).is("[disabled=disabled]")) {
    $(".radio:not([disabled=disabled])").removeClass("radio-checked");
    $(".radio:not([disabled=disabled]) span").removeClass("radio-btn");
    if($(this).hasClass("with-field")) {
      $(this).next().next().removeClass("input-disabled");
      $(this).next().next().prop("disabled", false);
    }
    else {
      $(document).find("#radio-field").addClass("input-disabled");
      $(document).find("#radio-field").prop("disabled", true);
    }
    if (!$(this).attr("disabled")) {
      $(this).addClass("radio-checked");
      $(this).find("span").addClass("radio-btn");
    } 
  }
});

$(".checkbox.with-field").click(function() {
  $(this).next().next().toggleClass("input-disabled");
  $(this).next().next().prop("disabled", function(i, v) { return !v; });
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="form">
<div class="form-row">
<div class="form-unit form-divided form-divided-left">
<label for="code" class="form-input-label">Default</label>
<input id="code" class="input-text" type="text" placeholder="Add code">
</div>
<div class="form-unit form-divided">
<label for="code" class="form-input-label">Error</label>
<input id="code" class="input-text error-input" type="text" placeholder="Add code">
<div class="error-input-message">This field is required</div>
</div>
</div>
<div class="form-row">
<div class="form-unit form-divided form-divided-left">
<label for="emp-name" class="form-input-label">Select From Table</label>
<input id="emp-name" class="input-text input-disabled" disabled="disabled" type="text" placeholder="Select employee name">
<a class="input-select-btn on-disabled-btn" id="popup"><i class="fas fa-user"></i></a>
</div>
<div class="form-unit form-divided">
<label for="emp-id" class="form-input-label">Disable, Auto-Fill</label>
<input id="emp-id" class="input-text input-disabled" disabled="disabled" type="text" value="">
</div>
</div>
<div class="form-row">
<div class="form-unit form-divided form-divided-left">
<label for="date" class="form-input-label">Date</label>
<input type="text" class="input-text input-datepicker" id="date" placeholder="Select date">
<a class="input-select-btn" id="datepicker-btn"><i class="fas fa-calendar-alt"></i></a>
</div>
<div class="form-unit form-divided form-dropdown">
<label for="selectable" class="form-input-label">Type</label>
<input id="selectable" class="input-text" type="text" placeholder="Select type">
<a class="input-select-btn"><i class="fas fa-sort-down dropdown-icon"></i></a>
</div>
</div>
<div class="form-row">
<div class="form-unit form-divided form-divided-left">
<div class="combobox-label-row">
<label for="choices" class="form-input-label combobox-label">Categorized Checkboxes <span style="font-weight: 400;">(0/10)</span></label>
<a class="combobox-select">Check All</a>
</div>
<input id="choices" class="input-text" type="text" placeholder="Search choices">
<a class="input-select-btn" id="datepicker-btn"><i class="fas fa-search"></i></a>
<ul class="choices-list">
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-1" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-1">Choice ABC</label>
</li>
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-2" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-2">Choice BCD</label>
</li>
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-3" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-3">Choice DEF</label>
</li>
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-4" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-4">Choice GHI</label>
</li>
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-5" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-5">Choice IJK</label>
</li>
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-6" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-6">Choice UVW</label>
</li>
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-7" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-7">Choice XYZ</label>
</li>
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-8" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-8">Choice 123</label>
</li>
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-9" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-9">Choice 345</label>
</li>
<li class="combobox-each">
<input type="checkbox" class="checkbox-input" id="choice-10" checked><span class="checkbox"><i class="fas fa-check"></i></span>
<label class="combobox-value" for="choice-10">Choice 789</label>
</li>
</ul>
</div>
<div class="form-unit form-divided">
<label for="checkbox-regular" class="form-input-label">Checkboxes</label>
<ul class="checkbox-regular-list">
<li class="checkbox-regular-each">
<input type="checkbox" class="checkbox-input" id="reg-choice-1" checked><span class="checkbox" disabled="disabled"><i class="fas fa-check disabled-check"></i></span>
<label class="checkbox-regular-value" for="reg-choice-1">Choice 1</label>
</li>
<li class="checkbox-regular-each">
<input type="checkbox" class="checkbox-input" id="reg-choice-2" checked><span class="checkbox" disabled="disabled"></span>
<label class="checkbox-regular-value" for="reg-choice-2">Choice 2</label>
</li>
<li class="checkbox-regular-each">
<input type="checkbox" class="checkbox-input" id="reg-choice-3" checked><span class="checkbox" selected="selected"><i class="fas fa-check"></i></span>
<label class="checkbox-regular-value" for="reg-choice-3">Choice 3</label>
</li>
<li class="checkbox-regular-each">
<input type="checkbox" class="checkbox-input" id="reg-choice-4" checked><span class="checkbox with-field"><i class="fas fa-check"></i></span>
<label class="checkbox-regular-value" for="reg-choice-4">Other</label>
<input id="checkbox-field" class="input-text input-disabled" disabled="disabled" type="text" placeholder="Add other choice">
</li>
</ul>
</div>
<div class="form-row">
<div class="form-unit form-divided form-divided-left">
<label class="form-input-label">Labeled, Numeric, Multi Entries</label>
<div class="labeled-row">
<div class="labeled-label">
Percentage
</div>
<div class="labeled-input">
<input id="emp-name" class="input-text" type="text" placeholder="Add percentage">
<a class="input-select-btn on-disabled-btn" id="popup">%</a>
</div>
</div>
<div class="labeled-row">
<div class="labeled-label">
Percentage
</div>
<div class="labeled-input">
<input id="emp-name" class="input-text" type="text" placeholder="Add percentage">
<a class="input-select-btn on-disabled-btn" id="popup">%</a>
</div>
</div>
</div>
<div class="form-unit form-divided">
<label for="radio-regular" class="form-input-label">Radio Buttons</label>
<ul class="radio-regular-list">
<li class="radio-regular-each">
<input type="radio" class="radio-input" id="reg-radio-1" checked><span class="radio" disabled="disabled"><span class="radio-selected disabled-radio"></span></span>
<label class="radio-regular-value" for="reg-radio-1">Choice 1</label>
</li>
<li class="radio-regular-each">
<input type="radio" class="radio-input" id="reg-radio-2" checked><span class="radio" disabled="disabled"></span>
<label class="radio-regular-value" for="reg-radio-2">Choice 2</label>
</li>
<li class="radio-regular-each">
<input type="radio" class="radio-input" id="reg-radio-3" checked><span class="radio" selected="selected"><span class="radio-selected"></span></span>
<label class="radio-regular-value" for="reg-radio-3">Choice 3</label>
</li>
<li class="radio-regular-each">
<input type="radio" class="radio-input" id="reg-radio-4" checked><span class="radio with-field"><span class="radio-selected"></span></span>
<label class="radio-regular-value" for="reg-radio-4">Other</label>
<input id="radio-field" class="input-text input-disabled" disabled="disabled" type="text" placeholder="Add other choice">
</li>
</ul>
</div>
</div>
</div>
<div class="selectable-dropdown-wrapper">
<ul class="selectable-dropdown">
<li class="selectable-dropdown-each">Choice ABC</li>
<li class="selectable-dropdown-each">Choice BCD</li>
<li class="selectable-dropdown-each">Choice DEF</li>
<li class="selectable-dropdown-each">Choice GHI</li>
<li class="selectable-dropdown-each">Choice IJK</li>
<li class="selectable-dropdown-each">Choice UVW</li>
<li class="selectable-dropdown-each">Choice XYZ</li>
<li class="selectable-dropdown-each">Choice 123</li>
<li class="selectable-dropdown-each">Choice 345</li>
<li class="selectable-dropdown-each">Choice 789</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
Answers: