*

Vlad7

  • ****
  • 244 posts
Displaying multiple phone numbers
« on: January 24, 2022, 01:45:14 PM »
hello, some users add 2-3 phone numbers to the ad. because of this, the appearance of the ad is not displayed beautifully. Is it possible to tidy up the page design, correctly display the numbers. Or make on the page for publishing an ad, a form for only one phone number, for example, +38 (xxx) xxx-xxx-xx

*

MB Themes

Re: Displaying multiple phone numbers
« Reply #1 on: January 24, 2022, 02:30:40 PM »
@Vlad7
It is misuse of this field.
Anyway you can try CSS like this:
Code: [Select]
.sold-by .sright .btn span { max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

Vlad7

  • ****
  • 244 posts
Re: Displaying multiple phone numbers
« Reply #2 on: January 26, 2022, 07:41:01 AM »
@Vlad7
It is misuse of this field.
Anyway you can try CSS like this:
Code: [Select]
.sold-by .sright .btn span { max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



It would be very good to convert this field to a standard so that a numeric value is specifically given. For instance: https://webkab.ru/demo/phone/


<form>
  <label for="online_phone">Телефон:</label>
  <input id="online_phone" name="phone" type="tel" maxlength="50"
         autofocus="autofocus" required="required"
         value="+7(___)___-__-__"
         pattern="\+7\s?[\(]{0,1}9[0-9]{2}[\)]{0,1}\s?\d{3}[-]{0,1}\d{2}[-]{0,1}\d{2}"
         placeholder="+7(___)___-__-__">
</form>
<script type="text/javascript">
  function setCursorPosition(pos, e) {
    e.focus();
    if (e.setSelectionRange) e.setSelectionRange(pos, pos);
    else if (e.createTextRange) {
      var range = e.createTextRange();
      range.collapse(true);
      range.moveEnd("character", pos);
      range.moveStart("character", pos);
      range.select()
    }
  }

  function mask(e) {
    //console.log('mask',e);
    var matrix = this.placeholder,// .defaultValue
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = this.value.replace(/\D/g, "");
    def.length >= val.length && (val = def);
    matrix = matrix.replace(/[_\d]/g, function(a) {
      return val.charAt(i++) || "_"
    });
    this.value = matrix;
    i = matrix.lastIndexOf(val.substr(-1));
    i < matrix.length && matrix != this.placeholder ? i++ : i = matrix.indexOf("_");
    setCursorPosition(i, this)
  }
  window.addEventListener("DOMContentLoaded", function() {
    var input = document.querySelector("#online_phone");
    input.addEventListener("input", mask, false);
    input.focus();
    setCursorPosition(3, input);
  });
</script>

This code solves the problem, brings all phone numbers to the standard.