Input label size

Questions
1

Hi all and happy holidays!

Just a quick question regarding label vs input size on an f7-list-input component with F7v5.
I have the the following inputs:

 <f7-list-input
          label="TestLongerLabel"
          type="Number"
          @input="update(Number($event.target.value))"
        >
          <font-awesome-icon
            slot="media"
            :icon="['fas', 'ruler-horizontal']"
            size="2x"
          />
 </f7-list-input>

And it renders to the following:
Screenshot 2021-04-05 at 07.51.18

In my use case, I only need little space for the value but would prefer the label to be displayed fully. So is it possible to define how much horizontal space the label should span with ratio to the input? Perhaps something like width=80 on label and width=20 on input?

Thanks in advance!

2

Just inspect it with dev tools and check what class (CSS rule needs to be overridden), something like:

.inline-labels .item-label {
  width: 80%;
}
1 Like
3

That’s what I ended up doing but was wondering if there is some F7 specific way of doing it.
Thanks @nolimits4web!