4

ボタンとボタンの下にアップロードされた画像のみを表示しようとしてaddいますが、CSSで何をしても問題ありません.によって生成されるテーブルrichfacesは常に同じです:

これは私のフォームrichfacesです：

<ui:define name="content">
        <h:form>
            <h:panelGrid>
                <rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp"  ontyperejected="alert('Just JPG, GIF, PNG and BMP are allowed');" maxFilesQuantity="12" immediateUpload="true" >
                    <a4j:ajax event="uploadcomplete" execute="@none" render="info" />
                </rich:fileUpload>

                <h:panelGroup id="info">
                    <h:outputText value="Add picture" rendered="#{fileUploadBean.size==0}" />
                    <rich:dataGrid columns="4" value="#{fileUploadBean.files}" var="file" rowKeyVar="row">
                        <a4j:mediaOutput element="img" mimeType="image/jpeg" createContent="#{fileUploadBean.paint}" value="#{row}" style="width:100px; height:100px;" cacheable="false" />
                    </rich:dataGrid>

                    <br />
                    <a4j:commandButton action="#{fileUploadBean.clearUploadData}" render="info, upload" value="Clear Uploaded Data" rendered="#{fileUploadBean.size>0}" />
                </h:panelGroup>
            </h:panelGrid>
        </h:form>
    </ui:define>

そして、これはどのように生成されるかです:

形

jQuery slider別の瞬間にプラグインを使用するので、もっとシンプルなものが必要です。しかし、私は によって生成されたこのテーブルで消えることはできませんrichfaces。はい、私のリッチフェイス構成ではスキンが無効になっています:

更新 提案に従って、CSS は次のようになります。

    <style>
    div div.rf-fu { border: 0px; width: 85px; }
    div div.rf-fu-hdr { border: 0px; }
    span span.rf-fu-btn-clr { border: 0px; }
    span.rf-fu-btns-lft{ width: 85px; }
    span.rf-fu-btns-rgh{ display: none; }
    div div.rf-fu-lst { display:none; }
    </style>

そして今、私のadd..ファイルボタンは次のようになります:

ここに画像の説明を入力

これらの投稿も非常に役に立ちました。

「border: none」または「border: 0」を使用する必要がありますか?
内側の div には境界線があります - 外側の div のクラスでオーバーライドする方法は?

4

2 に答える 2

5

エイドリアンの回答を使用してリッチフェイス CSS をオーバーライドできますが、リッチフェイス CSS をオーバーライドするために使用する必要はありません!important。セレクターの特異性を使用して、リッチフェイスによって適用される css をオーバーライドするだけです。

たとえば、を使用している場合はimportant、css を次のように適用します。

div div.rf-fu-lst { display:none }そしてそれはあなたのために働くでしょう。

于 2013-04-17T12:17:48.193 に答える
2

私は現在、私のプロジェクトのためにこれを行っています。次のように、スタイルシートで richfaces css をオーバーライドする必要があります。

.rf-fu, .rf-fu-hdr {
    float: left;
    width: auto;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

.rf-fu-btn-cnt-add {
    paddin-left: 0;
    cursor: pointer;
}

.rf-fu-btn-add {
    margin: 0;
}

.rf-fu-btns-rgh, .rf-fu-lst {
    display: none;
}

.rf-fu-btns-lft {
    width: 100%;
}
于 2013-04-17T09:32:05.960 に答える