Hi,
I'm facing a problem in Avalon theme. Timepicker of Primefaces extension is not shown as expected.
<a href="https://imgbb.com/"><img src="https://image.ibb.co/fYpCYG/Ekran_Al_nt_s.png" alt="Ekran_Al_nt_s" border="0"></a>
I tried this solution but it didnt work.
viewtopic.php?f=14&t=42572
Is there a way to overcome this problem?
Primefaces-Ext TimePicker Style Issue
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
I could fix this. Check the following css code
Code: Select all
.ui-timepicker-table table.ui-timepicker {
padding-top: 2px !important;
}
.ui-timepicker-table {
background-color: #fbfcfd !important;
border: 1px solid #c0c5c7 !important;
padding: 2px !important;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3) !important;
}
.ui-timepicker-table table {
border-collapse: inherit !important;
font-size: 0.9em !important;
}
.ui-timepicker-table:focus {
border: 1px solid #27aae1;
}
.ui-timepicker-table td {
padding: 0.5em !important;
}
.ui-timepicker-table td a {
width: 100% !important;
}
.pe-timepicker-input {
width: 75px !important;
}
.pe-timepicker-button {
height: 70% !important;
}
.ui-timepicker-table tbody tr td.ui-timepicker-hours td.ui-timepicker-hour-cell a.ui-state-active,
.ui-timepicker-table tbody tr td.ui-timepicker-minutes td.ui-timepicker-minute-cell a.ui-state-active {
border: 1px solid #c0c5c7;
color: #FFF;
}
.ui-timepicker-table tbody tr td.ui-timepicker-hours td.ui-timepicker-hour-cell a:hover,
.ui-timepicker-table tbody tr td.ui-timepicker-minutes td.ui-timepicker-minute-cell a:hover {
color: #292B2C;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
border: 1px solid #c0c5c7;
}
.ui-timepicker-table tbody tr td.ui-timepicker-hours td.ui-timepicker-hour-cell a,
.ui-timepicker-table tbody tr td.ui-timepicker-minutes td.ui-timepicker-minute-cell a {
border: 1px solid #e5ebf0;
border-radius: 3px;
cursor: default;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding: 0.5em;
color: #93a8b0;
}
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try the following css;
Code: Select all
body .pe-timepicker .pe-timepicker-input{
width: 62px;
}
body .ui-timepicker .ui-timepicker-minutes {
padding-left: .4em;
}
body .ui-timepicker table td a {
min-width: 28px;
min-height: 28px;
display: inline-block;
text-align: center;
color: #292B2C;
padding: 5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
body .ui-timepicker table td a.ui-state-hover{
background-color: #f5f5f5;
}
body .ui-timepicker table td a.ui-state-active {
color: #ffffff;
background-color: #337ab7;
}
body .ui-timepicker .ui-timepicker-buttonpane .ui-timepicker-deselect,
body .ui-timepicker .ui-timepicker-buttonpane .ui-timepicker-close {
color: #ffffff;
border: 1px solid transparent;
padding: .35em .7em .4em .7em;
font-size: 14px;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
body .ui-timepicker-buttonpane .ui-timepicker-deselect {
background-color: #d9534f;
border-color: #d43f3a;
}
body .ui-timepicker-buttonpane .ui-timepicker-deselect:hover {
background-color: #c9302c;
border-color: #ac2925;
}
body .ui-timepicker-buttonpane .ui-timepicker-close {
background-color: #5cb85c;
border-color: #4cae4c;
}
body .ui-timepicker-buttonpane .ui-timepicker-close:hover {
background-color: #449d44;
border-color: #398439;
}
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 20 guests