How Can I Define "the Rest Of Width"?

February 26, 2023 Post a Comment

Here is my code: Now I want to set border:none for input and also I need to make its width equal to the rest of div.tags's width. Noted that the number of attached tags isn't con

Solution 1:

You can do that using flexbox by setting display: flex to your container (also flex-direction: row-reverse for the RTL layout), then flex-grow: 1 on your input element.

This way the input element will grow by the width that's free in the container.

Solution 2:

You could try "calc" in css. Make the span-elements inline-block, give them a width, and then use "width: calc(100% - width of spanspx); As fallback, give it a percentage width, like 80%,since e.g. Android 4 isn't supporting calc.

Solution 3:

I have tried like this hope that helps you.

add css

.taginput{
        float: left;
    }

add class in input tag

<input class="taginput" type="text" value="" placeholder="Add a tag" />

$(document).ready(function () {
    width = 0;
    $("#tags span").each(function () {
        width = width + $(this).width() + 38; //38px is margin + padding of a span
    });
    $(".taginput").css("width", $("#tags").width() - width);
    $("#tags input").on({
        focusout: function () {
            width = $("#tags span").first().width()+38;
            $("#tags span").each(function () {
                width = width + $(this).width() + 38;
            });
            $(".taginput").css("width", $("#tags").width() - width);
            var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
            if (txt)
                $("<span/>", {
                    text: txt.toLowerCase(),
                    insertBefore: this
                });
            this.value = "";
        },
        keydown: function (ev) {
            // if: comma|enter (delimit more keyCodes with | pipe)
            if (/(188|13|32)/.test(ev.which)) {
                $(this).focusout();
            } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
                $(this).prev("span").remove();
            } else if (ev.which === 8 && this.value == '') {
                $(this).prev("span").addClass('toRemove'); //<< add class
            } else {
                $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
            }
        }
    });
    $('#tags').on('click', 'span', function () {
        $(this).remove();
    });
});

Solution 4:

See if this helps

$(function() {

  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertAfter: $("#tags > span").last()
      });
      this.value = "";
    },
    keydown: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
        $(this).prev("span").remove();
      } else if (ev.which === 8 && this.value == '') {
        $(this).prev("span").addClass('toRemove'); //<< add class
      } else {
        $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
  });

});

body, html{
  width: 100%;
}

#tags {
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
  direction:rtl;
  height: auto;
  display: inline-block;
  width: 94%
}
#tags > span {
  cursor: pointer;
  display: block;
  float: left;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-left: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-right: 3px;
  font-size: 11px;
}
#tags > input {
  direction: rtl;
  margin: 4px;
  padding: 7px;
  width: auto;
  height: 10px;
  float: left;
  border: none;
  width: 70px;
}
#tags > span.toRemove {
  background-color: red;
}
.autocomplete{
    border:1px solid #aaa;
    border-top: none;
    width: 179px;
    height: 150px;
    margin-left:5px;
    margin-top: -4px;
}
.autocomplete ul{
    margin-top: 0;
    padding-top: 5px;
    padding-left: 0px;
    list-style-type: none;
}
.autocomplete li{
    border-bottom: 1px solid #eee;
    padding:4px 8px;
    font-size:12px;
}
.autocomplete li:hover{
   background-color:#eee;
   cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags">
  <input type="text" value="" placeholder="Add a tag" />
  <span>php</span>
  <span>html</span>
</div>

Solution 5:

$(function() {
var windowwidth=$( window ).width();
    $("#tags input").width(100);
var tagwidth =  $(".tag").width();
  var tagwidth1 =  $(".tag1").width();

  alert(tagwidth);
    alert(tagwidth1);

alert(windowwidth);
  var elementwidth=tagwidth + tagwidth1 + 150;
  alert(elementwidth);
  var inputwidth = windowwidth - elementwidth;
alert(inputwidth);
  $('#tags input').width(inputwidth);
  
  $("#tags input").on({
    focusout: function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // allowed characters
      if (txt) $("<span/>", {
        text: txt.toLowerCase(),
        insertBefore: this
      });
      this.value = "";
    },
    keydown: function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if (/(188|13|32)/.test(ev.which)) {
        $(this).focusout();
      } else if (ev.which === 8 && this.value == '' && $(this).prev("span").hasClass('toRemove')) { //<< check for class
        $(this).prev("span").remove();
      } else if (ev.which === 8 && this.value == '') {
        $(this).prev("span").addClass('toRemove'); //<< add class
      } else {
        $(this).prevAll('.toRemove').removeClass('toRemove'); //<< remove class on keydown
      }
    }
  });
  $('#tags').on('click', 'span', function() {
    $(this).remove();
  });

});

#tags {
  border: 1px solid #ccc;
  padding: 5px;
  font-family: Arial;
  direction:rtl;
}
#tags > span {
  cursor: pointer;
  display: block;
  float: right;
  color: #3e6d8e;
  background: #E1ECF4;
  padding: 5px;
  padding-left: 25px;
  margin: 4px;
}
#tags > span:hover {
  opacity: 0.7;
}
#tags > span:after {
  position: absolute;
  content: "×";
  border: 1px solid;
  padding: 2px 5px;
  margin-right: 3px;
  font-size: 11px;
}
#tags > input {
  direction: rtl;
  margin: 4px;
  padding: 7px;
  width: auto;
  height: 10px;
  border:none;
}
#tags > span.toRemove {
  background-color: red;
}
.autocomplete{
    border:1px solid #aaa;
    border-top: none;
    width: 179px;
    height: 150px;
    margin-left:5px;
    margin-top: -4px;
}
.autocomplete ul{
    margin-top: 0;
    padding-top: 5px;
    padding-left: 0px;
    list-style-type: none;
}
.autocomplete li{
    border-bottom: 1px solid #eee;
    padding:4px 8px;
    font-size:12px;
}
.autocomplete li:hover{
   background-color:#eee;
   cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tags">
  <span class="tag">php</span>
  <span class="tag1">html</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

Html5 Guide