1

Sencha touch 2 でリスト項目の高さを減らす方法は? 単一の単語の名前/値のペアが多数表示されているリスト。各アイテムが余分な高さを取っているため、リストが長くなりすぎています。したがって、各アイテムの高さを正確なコンテンツの高さに減らしたいと思います。このようなcssを使用してみましたが、うまくいきませんでした。何か助けはありますか？

var tabPanel=Ext.create('Ext.TabPanel', {

fullscreen: true,
    tabBarPosition: 'top',
defaults: {
      styleHtmlContent: true
    },

    items: [
    {
        title: 'DETAILS', 
    xtype: 'list',
        cls: 'myList',
        ....
        itemTpl: '<table><tr><td>{fieldName}</td><td>{fieldValue}</td></tr></table>',
    .............



.myList .x-list-item {
       max-height: 30px;
}
4

3 に答える 3

1

各リスト項目の最小高さは 2.6em です。したがって、それを減らしてオーバーフロー プロパティを追加できます。これを使って：

.my-list .x-list-item .x-list-item-label{
     min-height: 0.8em !important;
     overflow : auto;
}

また、内部で Html テーブルを使用することはお勧めできませんitemTpl。-webkit-boxCSS3 プロパティを持つプレーンな DIV 要素を使用します。

于 2012-09-01T09:26:58.633 に答える
0

リストの itemHeight 構成を使用できます。http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List-cfg-itemHeight

それに加えて、次のような CSS を使用してパディングを制御することもできます。

.my-list .x-list-item  .x-list-item-body{
     min-height: 0.5em !important;
     padding-top: 0.3em;
     padding-bottom: 0.3em;
}
于 2012-12-27T06:54:40.027 に答える
0

と呼ばれるプロパティを使用します

itemHeight: [*Height of the item you need*],

すなわち

itemHeight: 40

コンポーネントの JS ファイルから読み取る

于 2014-04-23T08:14:34.673 に答える