How to decrease input box for Input List Item

Setup, Configuration and Use Items & Sitemaps
1

I would like to reduce the width of an input box for an Input List Item. The screen copy below shows that the input boxes are too wide and I haven’t figured out how to reduce the width. Could this be done in the YAML code?

Näyttökuva 2024-03-18 063410
Näyttökuva 2024-03-18 063410658×405 7.31 KB

2

Yes, this can be done. The first step you will need to do, is to either look at the source vue file for the input list item or use your browser developer options to view the rendered list itself. This will allow you to understand the structure of the component which you will need to be able to target the input element with CSS. Then, the second step will be to use the stylesheet component property to add the relevant CSS to the list item you want to change. You can find many examples at this point of the use of the stylesheet property on posts here in the forum.

3

OK, thanks for the info.

4

I’m coming back to my old issue now.

I have looked at the oh-input-card.vue file and noticed input-card-content variable:

<style lang="stylus">
.input-card-content
  width calc(100% - 2*var(--f7-card-content-padding)) !important
  .input-field
    font-size 1.2rem
</style>

I tried to add this variable in the yaml code for my input list item:

component: oh-input-item
config:
  title: Latauksen aikajakso (3/6/12/24h)
  type: number
  inputmode: text
  sendButton: true
  outline: true
  validate: true
  item: Ouflex_AXL_RK_Reg874
  stylesheet: |
    .input-card-content {
     width: 50% 
     }

This didn’t have any effect, though.

I then tried the following code:

component: oh-input-item
config:
  title: Latauksen aikajakso (3/6/12/24h)
  type: number
  inputmode: text
  sendButton: true
  outline: true
  validate: true
  item: Ouflex_AXL_RK_Reg874
  style:
    width: 50%
    margin-left: 0px

This decreases the width but the problem is that it cuts the title text when looking at the page on my phone. So, how to decrease the width of the input card only?

5

An oh-input-item is not an oh-input-card, so the class input-card-content won’t apply to any part of the input item. You’d have to look into the oh-input-item.vue file. That file, however, can be a little harder to follow. So, the html is probably easier to understand.

If you look at the html that is produced by your oh-input-itme yaml, it looks like this:

<li class="input-listitem media-item" type="number" inputmode="text" sendbutton="true" outline="true" validate="true" item="Ouflex_AXL_RK_Reg874" style="">
  <div class="item-content">
    <div class="item-inner">
      <div class="item-title-row">
        <div class="item-title">Latauksen aikajakso (3/6/12/24h)</div>
      </div>
      <div class="item-footer">
        <div>
          <div class="oh-input row no-gap" style="">
            <div class="input-field input input-outline" change="function () { [native code] }" title="Latauksen aikajakso (3/6/12/24h)" sendbutton="true" item="Ouflex_AXL_RK_Reg874" style="width: 100%;">
              <input type="number" inputmode="text" step="any" data-validate="true" class="">
            </div>
            <a href="#" class="send-button col-10 button">
              <i class="icon material-icons color-gray">done</i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>

In this case, the container for the input and a (send button) tags is a likely place to apply your change, and that has a class of just oh-input. so you want your stylesheet to be:

  stylesheet: >
    .oh-input {
      width: 50%;
    }
6

@JustinG, great, many thanks for your help. That did the trick.