PrimeFaces 3.0 - Как мне предотвратитьот отображения границы и / или полосы прокрутки? - PullRequest
Новая
       20

PrimeFaces 3.0 - Как мне предотвратитьот отображения границы и / или полосы прокрутки?

6 голосов
/ 17 июня 2011

Я использую PrimeFaces 3.0 и хочу добавить <p:layout> на свои страницы. Компонент макета в режиме 'fullPage' делает хорошую работу по разделению страницы, но у меня есть некоторые проблемы с внешним видом. Вот как выглядит моя тестовая страница:

enter image description here

Посмотрите конкретно на нижний / южный макет Есть две вещи, которые я хочу изменить.

  1. Как я могу остановить отображение этого модуля макета с рамкой вокруг него?
  2. Как я могу остановить отображение полосы прокрутки, когда содержимое слишком велико для размещения? Я просто хочу, чтобы оно обрезало содержимое.

Я только что купил руководство по PrimeFaces 2.2 (руководства по 3.0 пока нет), но оно не говорит об изменениях такого рода. Нужно ли выполнять магию CSS-стилей?

Ответы [ 6 ]

7 голосов
/ 17 июня 2011

Двумя основными типами браузеров, которые используются в моей целевой среде, являются IE 6 и IE 7. К сожалению, мне удалось решить проблему № 1 только для этих браузеров.CSS для остановки отображения границы: 

.ui-layout-pane-south {
    border: 0;
}

Если бы я хотел, чтобы ВСЕ поля блока макета перестали отображать границу, это было бы: 

.ui-layout-pane {
    border: 0;
}

Я следовалпредложение BalusC попробовать использовать Firefox / Firebug для проверки HTML и поиграться со стилями CSS.Похоже, что ключевые стили CSS на основе темы здесь: .ui-layout-pane-south, .ui-layout-unit-content, .ui-layout-south.

Я пытался связываться со всеми из них, но не могу получить IE 7 (версия IE на моей рабочей станции), чтобы перестать показывать полосу прокрутки переполнения.Firefox 4 никогда не показывал полосу прокрутки.

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

3 голосов
/ 28 декабря 2014

Я решил проблему 2 следующим образом: 

<p:layoutUnit position="north" styleClass="noScrolllayoutUnit">
        <ui:include src="/templates/header.xhtml" />
</p:layoutUnit>

и в CSS 

.noScrolllayoutUnit .ui-layout-unit-content{
    overflow: hidden;
}
3 голосов
/ 06 декабря 2012

положить: 

<head>
    <style type="text/css">
        .ui-layout-unit{
             border: none;
        }
    </style>
</head>
1 голос
/ 22 февраля 2015

Просто добавьте границу: 0;в p: layoutUnit style: отлично работает. 

<p:layoutUnit position="north" size="50" style="border: 0;">
	        <h:panelGrid id="loginPanelGrid"  bgcolor="#E1F5A9"  width="99%" columns="2" style="height:30px;">
	          <h:form id="homeHeaderForm">
	            <h:outputText value="Hello #{loginBean.userDetails.employee.name}" style="color:red;font-size: 15px;margin-left: 75%"/>
	            <p:commandButton style="background: #3498db;width:80px;height:25px;font-family: Arial;color: #ffffff;font-size: 13px;margin-left: 5%;" 
                              action="#{loginBean.logOut}" value="Log Out" ajax="false">
                </p:commandButton>
              </h:form>  
	        </h:panelGrid>
 </p:layoutUnit>
0 голосов
/ 01 февраля 2016

Чтобы избавиться от полосы прокрутки во ВСЕХ панелях макета, вы должны переопределить свойство css "overflow" на "hidden" в классе ui-layout-unit.По умолчанию это «авто».Чтобы избавиться от полосы прокрутки в одной или нескольких определенных панелях макета, установка свойства в классе ui-layout- {position} не будет работать так, как можно было бы ожидать.Установка свойства для содержащегося элемента будет работать.Так что в вашем случае вам нужно было бы установить style="overflow: hidden" для элемента <h:outputText> или что-то еще, что приводит к тексту "южное содержимое ...".

0 голосов
/ 10 июля 2014

@ Мухаммед Если вы хотите применить его к одному элементу, вы можете сделать следующее: 

<p:layoutUnit styleClass="ui-layout-unit">
     ...
</p:layoutUnit>

Также вам нужно определить пользовательский css где-нибудь, как в ответе пользователя user1852036: 

<style type="text/css">
    .ui-layout-unit{
        border: none;
    }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...