Wednesday, September 24, 2014

How to change the Size of the ListBox of the datePicker in GWT?

I am building a mobile website and thus I have a need to many all GWT Gui to become bigger.

For example, my css in my gwt mobile app is like this:

.myNormalMobileFont{      font-size: 500%;  }    .myNormalLargeFont{      font-size: 700%;   }  

And Here is Css code of DateBox and DatePicker

.gwt-DateBox {    padding: 15px 16px;    border: 3px solid #ccc;    border-top: 3px solid #999;    font-size: 500%;  }  .gwt-DateBox input {    width: 8em;  }  .dateBoxFormatError {    background: #ffcccc;  }  .dateBoxPopup {  }    .gwt-DatePicker {    border: 3px solid #ccc;    border-top:3px solid #999;    cursor: default;  }  .gwt-DatePicker td,  .datePickerMonthSelector td:focus {    outline: none;  }  .datePickerDays {    width: 100%;    background: white;  }  .datePickerDay,  .datePickerWeekdayLabel,  .datePickerWeekendLabel {    font-size: 255%;    text-align: center;    padding: 12px;    outline: none;    font-weight:bold;    color:#333;    border-right: 3px solid #EDEDED;    border-bottom: 3px solid #EDEDED;  }  .datePickerWeekdayLabel,  .datePickerWeekendLabel {    background: #fff;    padding: 0px 12px 6px;    cursor: default;    color:#666;    font-size:210%;    font-weight:normal;  }  .datePickerDay {    padding: 12px 21px;    cursor: hand;    cursor: pointer;  }  .datePickerDayIsWeekend {    background: #f7f7f7;  }  .datePickerDayIsFiller {    color: #999;    font-weight:normal;  }  .datePickerDayIsValue {    background: #d7dfe8;  }  .datePickerDayIsDisabled {    color: #AAAAAA;    font-style: italic;  }  .datePickerDayIsHighlighted {    background: #F0E68C;  }  .datePickerDayIsValueAndHighlighted {    background: #d7dfe8;  }  .datePickerDayIsToday {    padding: 3px;    color: #fff;    background: url(images/hborder.png) repeat-x 0px -2607px;  }    .datePickerMonthSelector {    width: 100%;    padding: 3px 0 15px 0;    background: #fff;  }  td.datePickerMonth {    text-align: center;    vertical-align: middle;    white-space: nowrap;    font-size: 300%;    font-weight: bold;    color: #333;  }  .datePickerPreviousButton,  .datePickerNextButton {    font-size: 360%;    line-height: 1em;    color: #3a6aad;    cursor: hand;    cursor: pointer;    font-weight: bold;    padding: 0px 12px;    outline: none;  }  

After that, the GuiLookLike this enter image description here

Ass u can see the Text inside the Year and Month listbox is very small, so how to style them to make them bigger?, probally using font-size.

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To post to this group, send email to
Visit this group at
For more options, visit

No comments:

Post a Comment