CODEWITHSUNDEEP
csshtmlonsen-ui
yuzu
yuzu

Reputation: 43

How can I reduce ons-list-item height?

I am creating an app using Onsen UI. I would like to reduce the height of of the name field.

I tried to change the value of the following style, but it could not be narrowed to more than it is now.

<ons-list-item style="height:50%;" >

How can I change the height of it ?

HTML

<ons-page>
  <ons-toolbar>
    <div class="right"><ons-toolbar-button>Cancel</ons-toolbar-button></div>
    <div class="center">New Message</div>
  </ons-toolbar>

  <ons-list modifier="inset" style="margin-top: 10px">
    <ons-list-item class="to-wrapper">
      <ons-row>
        <ons-col width="52px">
          <ons-icon icon="fa-user"></ons-icon>
        </ons-col>
        <ons-col>
          <div class="to-name">Graham</div>
          <div class="to-email">@graham</div>
        </ons-col>
      </ons-row>
    </ons-list-item>
    <ons-list-item style="height:50%;" >
      <input type="text" class="text-input text-input--transparent" placeholder="Name (I'd like to change this height.)" style="width: 100%">
    </ons-list-item>
    <ons-list-item>
      <textarea class="textarea textarea--transparent" placeholder="Message" style="width: 100%; height: 100px;"></textarea>
    </ons-list-item>
</ons-page>

CSS

.to-wrapper {
  line-height: 1;
  height: 62px;
  padding: 10px;
}

.to-image {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}

.to-name {
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 4px;
}

.to-email {
  font-size: 14px;
  opacity: 0.4;
}

.text-input {
  margin-top: 4px;
}

.textarea {
  margin-top: 4px;
}
.fa-user{
  font-size: 30px;     
}

Upvotes: 2

Views: 1123

Answers (1)

Patrick Klitzke
Patrick Klitzke

Reputation: 1559

<ons-list-item> sets a property min-height, which you need to overwrite. So something like that should work:

<ons-list-item style="height:20px; min-height: 20px" >

Upvotes: 3

Related Questions