Floating labels in FW7

Feature Request
#1

Two items requested as related to floating labels and fw7.

  1. Add tick box for floating labels on inputs.

  2. When an input value is received from another element, set the appropriate classes on the input and parent so the label floats…as it is today, the value is not recognized if put in programatically.

For example given this standard fw7 input. Let’s say its value comes from a data store element. The data store element’s value is added via the success of another action, and therefore the input now has a value (and does display correctly already.)

<li>
  <div class="item-content item-input">
    <div class="item-inner">
      <div class="item-title item-label">Name</div>
      <div class="item-input-wrap">
          <input type="text" name="name">
      </div>
    </div>
  </div>
</li>

However, the class item-with-input-value should be added to the outer div, and input-with-value should be added to the input.

#2

@George @patrick

Is there a workaround for #2? I can’t make the floating labels work when using AC data. It is feeling more like a bug than a feature request. :slight_smile:

#3

bump…

#4

I’ve added the following for the next update:

  • Added input title properties to specify label type: Stacked or Floating
  • Toggle properties for Forum Input to make outline input and input with info
  • Toggle for the List element to use Inline Labels

As for #2 if you need dynamic classes, you can just use the toggle class dynamic attribute

2 Likes
#5

Thanks George!

#6

One note…

When dealing with this setup

<li>
	<div class="item-content item-input" dmx-class:item-input-with-value="inp_login_email.value">
		<div class="item-media"><a href="#" dmx-on:click="email.setValue('ken@uniqueideas.com')"><i class="fal fa-2x fa-envelope text-color-white"></i></a></div>
		<div class="item-inner">
			<div class="item-title item-floating-label">Email</div>
			<div class="item-input-wrap">
				<input id="inp_login_email" type="email" name="email" required="" data-rule-email="" dmx-class:input-with-value="value">
			</div>
		</div>
	</div>
</li>

The GUI only allows for toggling the actual input (and the Title), but not the item-content div that comes directly after the li tag. Works in the code, just not in the GUI.

#7

yes … well in the Framework7 properties UI - we tried to group things as much as possible.
So to not clutter things too much we left away the dynamic attributes and events for simple sub elements that you usually don’t style separately anyway.

Maybe we should rethink this approach - ideas are welcome.

We do have a more generic idea of improving the dynamic attributes and events groups: to move them to top of the property inspector as tabs, but that won’t work still for all the f7 elements with such nested inspectors.

#8

Implemented in Wappler 2.6.4

#9
#10