Additional info input

[Simone4e]

Is your feature request related to a problem? Please describe. The current system allows us to insert a string, but this system has two major limitations:

• The first limitation is the formatting, in fact if you were to use a <br> the layout breaks
• The second limitation is the number of visible characters, in fact in smaller devices most of the text is obscured (which instead must be there because it describes how the input must be used)

Describe the solution you'd like The nicest solution would be to be able to put more than one piece of information which is then created into a single string with a popup example:

<div class="list">
<ul>
  <!-- additional "item-input-with-info" class on item -->
  <li class="item-content item-input item-input-with-info">
    <div class="item-media">... icon/image here ...</div>
    <div class="item-inner">
      <div class="item-title item-label">Name</div>
      <div class="item-input-wrap">
        <input type="text" name="name" />
        <span class="input-clear-button"></span>
        <!-- element with additional information -->
        <div class="item-input-info-title">Click me for more info!</div>
        <div class="item-input-info">Some information about input field</div>
        <div class="item-input-info">Another information</div>
      </div>
    </div>
  </li>
  ...
</ul>
</div>

Clicking item-input-info-title displays a popup with a list of information.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

At the moment I opted to create a link to the popup and a function that splits the string and creates the list, example:

<div class="list">
  <ul>
    ...
    <!-- additional "item-input-with-info" class on item -->
    <li class="item-content item-input item-input-with-info">
      <div class="item-media">... icon/image here ...</div>
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" name="name" />
          <span class="input-clear-button"></span>
          <!-- element with additional information -->
          <div class="item-input-info-title"><a href="#" data-info="Info 1||Info 2||Info 3">Click me for more info!</a></div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

In js.

$on('pageInit', (e, page) => {
            currentPage = page.$el[0];
            currentPage.querySelector('[data-info]').addEventListener('click', (e) => {
                //$f7.displayInfo($f7, e.target.dataset.info);  <- what i call, code below
                const textArr = textList.split('||');
                f7.popup.create({
                    content: `
                            <div class="popup">
                                <div class="page">
                                    <div class="page-content">
                                        <div class="block">
                                            <div class="block-title">Useful information</div>
                                            <div class="list list-outline list-dividers media-list">                                    
                                                <ul>
                                                    ${textArr.map(el => `<li>
                                                    <div class="item-content">
                                                        <div class="item-inner">
                                                            <div class="item-text">${el}</div>
                                                        </div>
                                                    </div>
                                                </li>`).join('')}
                                                    <li class="margin-top"><a class="link button button-fill" href="#" data-fatto>Confirm</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                             </div>
                             `            
          }).open();
            });
});