如何在GWT中更改datePicker的ListBox的大小?

时间:2014-09-24 11:05:04

标签: css gwt

我正在建立一个移动网站,因此我需要许多所有GWT Gui变得更大。

例如,我的gwt移动应用程序中的css是这样的:

.myNormalMobileFont{
    font-size: 500%;
}

.myNormalLargeFont{
    font-size: 700%;
 }

这是DateBox和DatePicker的Css代码

.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;
}
之后,GuiLook就像这样 enter image description here

你可以看到年份和月份列表框中的文字非常小,所以如何设置它们以使它们更大?,可能使用字体大小。

1 个答案:

答案 0 :(得分:1)

这应该做:

.gwt-DatePicker .gwt-ListBox {
    font-size: 200%;
}

如果我将其应用于GWT Showcase

,则可以使用

enter image description here