1. There could be a wrong z-index for a PopupBox taht has list of suggestions for a SuggestBox.
- In InputListWidget class create instance of DefaultSuggestionDisplay, set its default GWT style (e.g. all styles related to gwt-SuggestBoxPopup) and add proper z-index attribut to it.
- Then use another constructor for a SuggestBox that has additional parameter for DefaultSuggestionDisplay and pass to it the styled instance of DefaultSuggestionDisplay you have just created.
Example:
DefaultSuggestionDisplay defaultSuggestionDisplay = new DefaultSuggestionDisplay();
defaultSuggestionDisplay.setPopupStyleName("gwt-SuggestBoxPopup");
final SuggestBox box = new SuggestBox(getSuggestions(), itemBox, defaultSuggestionDisplay);
Example of CSS with styles for InputListWidget including gwt-SuggestBoxPopup:
.token-input-list-facebook {
list-style-type: none;
}
ul.token-input-list-facebook {
overflow: hidden;
height: auto !important;
height: 1%;
width: 400px;
border: 1px solid #8496ba;
cursor: text;
font-size: 12px;
font-family: Verdana, sans-serif;
min-height: 1px;
z-index: 999;
margin: 0;
padding: 0;
background-color: #fff;
list-style-type: none;
clear: left;
}
ul.token-input-list-facebook li input {
border: 0;
width: 100px;
padding: 3px 8px;
background-color: white;
margin: 2px 0;
-webkit-appearance: caret;
}
li.token-input-token-facebook {
overflow: hidden;
height: auto !important;
height: 15px;
margin: 3px;
padding: 1px 3px;
background-color: #eff2f7;
color: #000;
cursor: default;
border: 1px solid #ccd5e4;
font-size: 11px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
white-space: nowrap;
}
li.token-input-token-facebook p {
display: inline;
padding: 0;
margin: 0;
}
li.token-input-token-facebook span {
color: #a6b3cf;
margin-left: 5px;
font-weight: bold;
cursor: pointer;
}
li.token-input-selected-token-facebook {
background-color: #5670a6;
border: 1px solid #3b5998;
color: #fff;
}
li.token-input-input-token-facebook {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
.gwt-SuggestBoxPopup {
border: thin 1px solid green;
width: 200px;
z-index: 999999 !important;
}
.gwt-SuggestBoxPopup.item {
color: red;
}
.gwt-SuggestBoxPopup .item-selected {
color: gray;
}
.gwt-SuggestBoxPopup .suggestPopupTopLeft {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopLeftInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopCenter {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopCenterInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopRight {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupTopRightInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleLeft {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleLeftInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleCenter {
border: thin 1px solid green; width:200px;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleCenterInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleRight {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupMiddleRightInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomLeft {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomLeftInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomCenter {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomCenterInner {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomRight {
border: thin 1px solid green;
}
.gwt-SuggestBoxPopup .suggestPopupBottomRightInner {
border: thin 1px solid green;
}
2. The fix above will correct only style of PopupBox and its z-index, but there could be a wrong styling for other InputListWidget components as well if your project does not inherit any GWT skins.
- So be sure to use proper inheritance of it in your *.gwt.xml file e.g.:
<inherits name='com.google.gwt.user.theme.standard.Standard' /> - Or add related missed styles to your CSS along with gwt-SuggestBoxPopup styles.
