Как я могу уменьшить высоту списка элементов?

Question

Я создаю приложение, используя Onsen UI. Я хотел бы уменьшить высоту поля имени.

Я попытался изменить значение следующего стиля, но она не может быть сужена более, чем сейчас.

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

Как я могу изменить его высоту?

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;  
}  

Answer 1

<ons-list-item> задает свойство min-height, что вам нужно перезаписать. Так что-то вроде этого должно работать:

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