Smart-select with invalid option / error message possible?

Questions
1

Dear all,

is it possible to show an error message / indcate the selected value as invalid like in for a input field? Validation is done by JS, no need to do it automatically

How would the HTML structure look like?

If so, it would be great to extend the doc / examples as well.

Many thanks in advance!

Andreas

2

Dear all,

I tried

<div class="item-content">
   <div class="item-inner">
      <div class="item-title">Title</div>
      <div class="item-after">selected value</div>
      <div class="item-input-error-message">errormsg</div>
   </div>
</div>`

Unfortunately in this case the and the appear in the same line. Any ideas how the css styling must be that the errormsg moves in the next line (clear both does not work).

In case I add a wrapper around

   <div class="item-content">
      <div class="item-inner">
          <div class="item-title">title</div>
          <div class="item-select-wrapper">
             <div class="item-after">selected value</div>
             <div class="item-input-error-message">errormsg</div>
          </div>
       </div>
    </div>

From the formating perspective, this would work - seems also be aligned with the general FW7 appraoche. But:

  • item-after must be a direct child of the item-inner div, otherwise the selected value is not insert
  • as a consequence, FW7 inserts an additional item-after div before the wrapper.

Any ideas?

Best regards
Andreas

3

It is not supported by default, i can recommend you the following, having the following layout with setting error message as absolute position:

<div class="item-content">
   <div class="item-inner item-inner-with-custom-error">
      <div class="item-title">Title</div>
      <div class="item-after">selected value</div>
      <div class="item-input-error-message">errormsg</div>
   </div>
</div>

And tweak it with custom styles:

.item-inner-with-custom-error {
  padding-bottom: 20px;
}
.item-inner-with-custom-error .item-input-error-message {
  position: absolute;
  left: 16px; /* tweak it */
  right: 16px; /* tweak it */
  width: 100%;
  height: ... 
}
4

Thanks, but unfortunately it seems to look different. Since some tweaks are required anyway, I prefer the folloing approach:

MAYBE PART OF A FUTURE VERSION?

   <div class="item-content">
      <div class="item-inner">
          <div class="item-title">title</div>
          <div class="item-select-wrapper">
             <div class="item-after">selected value</div>
             <div class="item-input-error-message">errormsg</div>
          </div>
       </div>
    </div>

Issue with FW7: The item-after div is not recognized since it is not a direct_child (proposal to change FW7 to accept any item-after). As a result, a new item-after is insert

My Tweak: manipulate the $valueEl variable of the smart select: set it to the item-after within the wrapper.

  • add some simple css styling

Done…

What do you think - would it make sense to add this in a future version?

Regards
Andreas

5

I’ll add it to roadmap