html - Adjust the width of an element based on the width of another element -
please check solution here:
https://stackoverflow.com/a/41686102/4180447
the above solution can used implement editable dropdown (select) element in angular. however, width of element assumed fixed. now, implementing responsive design, , need way adjust width of element based on width of element.
basically, implementation uses 2 elements , places them on top of each other. 1 element select element id ends _sel , , other text element id ends _disp. text element must narrower drop-down element drop-down arrow visible.
the width of text element must 18px less width of select element.
is there way adjust height of text input 18px less size of select element?
see snapshot below , related code clarify situation:
html:
<div class="select-editable stop-wrap" style="width: 265px; border:none"> <select type="text" id="exterior_finish_sel" editable-dropdown="exterior_finish" name="exterior_finish_sel" ng-model="exterior_finish_sel" ng-options="o o o in ddloptions.exterior_finish track o" maxlength="80" class="ng-valid ng-valid-maxlength ng-not-empty ng-dirty ng-valid-parse ng-touched" style=""> </select> <input type="text" id="exterior_finish_disp" name="exterior_finish_disp" ng-model="exterior_finish_disp" style="width: 247px;"/> <input type="text" id="exterior_finish" name="exterior_finish" ng-model="exterior_finish" ng-hide="true"/> </div> css:
.stop-wrap { display: inline-block; } .select-editable { position:relative; background-color:white; border:solid grey 1px; width:120px; height:25px; vertical-align: middle; margin-bottom: 5px; } .select-editable select { position:absolute; top:0px; left:0px; border:none; width:118px; margin:0; } .select-editable input { position:absolute; top:0px; left:0px; width:100px; padding:1px; border:none; } .select-editable select:focus, .select-editable input:focus { outline:none; }
i found answer based on solution here:
https://stackoverflow.com/a/18743145/4180447
the jquery plugin monitor changes on width/position:
jquery.fn.onpositionchanged = function (trigger, millis) { if (millis == null) millis = 100; var o = $(this[0]); // our jquery object if (o.length < 1) return o; var lastpos = null; var lastoff = null; var lastwidth = null; var lastoffwidth = null; setinterval(function () { if (o == null || o.length < 1) return o; // abort if element non existend eny more if (lastpos == null) lastpos = o.position(); if (lastoff == null) lastoff = o.offset(); if (lastwidth == null) lastwidth = o.width(); if (lastoffwidth == null) lastoffwidth = o[0].offsetwidth; var newpos = o.position(); var newoff = o.offset(); var newwidth = o.width(); var newoffwidth = o[0].offsetwidth; if (lastpos.top != newpos.top || lastpos.left != newpos.left) { $(this).trigger('onpositionchanged', { lastpos: lastpos, newpos: newpos }); if (typeof (trigger) == "function") trigger(lastpos, newpos); lastpos = o.position(); } if (lastoff.top != newoff.top || lastoff.left != newoff.left) { $(this).trigger('onpositionchanged', { lastoff: lastoff, newoff: newoff}); if (typeof (trigger) == "function") trigger(lastoff, newoff); lastoff= o.offset(); } if (lastwidth != newwidth) { $(this).trigger('onpositionchanged', { lastwidth: lastwidth, newwidth: newwidth}); if (typeof (trigger) == "function") trigger(lastwidth, newwidth); lastwidth= o.width(); } if (lastoffwidth != newoffwidth) { $(this).trigger('onpositionchanged', { lastoffwidth: lastoffwidth, newoffwidth: newoffwidth}); if (typeof (trigger) == "function") trigger(lastoffwidth, newoffwidth); lastwidth= o.width(); } }, millis); return o; }; the editable-dropdown directive below:
app.directive('editabledropdown', function ($timeout){ return { link: function (scope, elemsel, attrs) { //this hidden input, , used data binding var inpelemid = attrs.editabledropdown; var inpelem; //this display element , used showing selected value var inpelemdispid = inpelemid + "_disp"; var inpelemdisp; //the parameter 'elemsel' select field function initinpelem() { //get reference hidden , displayed text field if ($(elemsel).is("select")) { inpelem = $('#' + inpelemid); //hidden field inpelemdisp = $('#' + inpelemdispid); //displayed field } else { //this in case dropdown based on datalist not yet implemented //in case, input element same dropdown field using datalist inpelem = elemsel; } } initinpelem(); function updateeditable(elm) { initinpelem(); //copy value select element input element //use ngmodelcontroller copy value in order trigger validation 'inpelem' var selectedvalue = $(elm).children("option").filter(":selected").text(); //update hidden text field used save value db angular.element(inpelem).controller('ngmodel').$setviewvalue(elm.val()); angular.element(inpelem).controller('ngmodel').$render(); //update display text field based on selection (text value) angular.element(inpelemdisp).controller('ngmodel').$setviewvalue($(elm).find('option:selected').text()); angular.element(inpelemdisp).controller('ngmodel').$render(); makeeditable(elm); } function makeeditable(selelm) { //allow edit text field if "other" selected initinpelem(); if ($(selelm).is("select")) { //jira: ne-2995 - of option seletec starte "other" activate editable option if (selelm.val().tolowercase().startswith("other")) { //make display field editable $(inpelemdisp).prop("readonly", false); } else { //make display field read-only $(inpelemdisp).prop("readonly", true); } } else { if (elm.value != "other" && !$(elm).attr("keypressoff")) { $(elm).keypress(function(event) { console.log("keypress preventd") event.preventdefault(); }) } else { $(elm).off("keypress"); $(elm).attr("keypressoff", true); console.log("keypress event removed") } } } function resizeelem() { angular.element(document).ready(function() { initinpelem(); $(inpelemdisp).width($(elemsel).outerwidth()-20); }) } angular.element(document).ready(function(){ initinpelem(); //when display value changes, update hidden text field inpelemdisp.change(function(){ angular.element(inpelem).controller('ngmodel').$setviewvalue(inpelemdisp.val()); angular.element(inpelem).controller('ngmodel').$render(); }); makeeditable(elemsel); }); //when field values initialized, ensure drop-down list , other fields synchronized scope.$on('event:force-model-update', function() { initinpelem(); //use value of hidden field saved in db update values of other fields var selectedvalue = $(elemsel).find('option[value="' + inpelem.val() + '"]').val(); var selectedtext; if (angular.isundefined(selectedvalue)) { selectedtext = inpelem.val(); } else { //update selected value if (angular.element(elemsel).controller('ngmodel')) { angular.element(elemsel).controller('ngmodel').$setviewvalue(selectedvalue); angular.element(elemsel).controller('ngmodel').$render(); } $(elemsel).find('option[value="' + inpelem.val() + '"]').attr('selected', 'selected'); selectedtext = $(elemsel).find('option:selected').text() } //update display value angular.element(inpelemdisp).controller('ngmodel').$setviewvalue(selectedtext); angular.element(inpelemdisp).controller('ngmodel').$render(); }); $(elemsel).change(function () { //everytime selected value update, change display , hidden value updateeditable(elemsel); }); $(elemsel).onpositionchanged(function() { resizeelem(); }) } } }); the above code needs improvement monitor changes width. in next sprint.
tarek
Comments
Post a Comment