Primefaces-Ext TimePicker Style Issue

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
ckirbas
Posts: 12
Joined: 16 Mar 2012, 12:49

10 Nov 2017, 13:43

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?

ckirbas
Posts: 12
Joined: 16 Mar 2012, 12:49

16 Nov 2017, 09:02

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;
}

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

23 Nov 2017, 14:24

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;
}

Post Reply

Return to “Avalon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests