Note that your workaround will have a side effect impact on the autocomplete component and some others.
ui-helper-hidden {
display: none !important;
}
(edited)For information, I have tried many approach (remove aui class, adding !important attribute to primefaces styles, etc.) but my last approach gives better results. It consists in removing style related to inputs.
1. To fix most of primefaces input widgets, in _forms.scss, put into .form class the following input related styles for Primefaces (they need to be rewritten because aui css rules are more specific):
.form {
// Shared size and type resets
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
display: inline-block;
height: $baseLineHeight;
padding: 4px 6px;
margin-bottom: $baseLineHeight / 2;;
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $gray;
@include border-radius($inputBorderRadius);
vertical-align: middle;
}
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
textarea,
.uneditable-input {
width: 206px; // plus 12px padding and 2px border
}
// Reset height since textareas have rows
textarea {
height: auto;
}
// Everything else
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: $inputBackground;
border: 1px solid $inputBorder;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@include transition(border linear .2s, box-shadow linear .2s);
// Focus state
&:focus {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
}
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 4px 0 0;
*margin-top: 0; /* IE7 */
margin-top: 1px \9; /* IE8-9 */
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
line-height: $inputHeight;
}
// Make select elements obey height by applying a border
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
border: 1px solid $inputBorder;
background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for select, file, radio, and checkbox
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
@include tab-focus();
}
}
2. In custom_common.css : idem for each input rule
3. For margin/padding in widgets, add in custom_common.css:
.ui-widget ul, .aui ol {
padding: 0;
margin: 0 ;
}
5. In most of themes, links should be (by default) in black instead of liferay blue style :
.ui-panel a {
color:black;}
6. line height
.ui-panel h1, .ui-panel h2, .ui-panel h3 {
line-height: 1.3;
}
Please, if you try give some feedback on possible side effects. I will try to enhance this css mod (but I must stop on this topic now).
