Search Widget does not appear to be responsive to different screen sizes

RachelAlbritton · ‎10-20-2016

I've created a search widget using JS 3.17

Our app is wrapped up in bootstrap

I'm using chrome dev tools to test the look and functionality in various mobile formats and I've noticed that the input text box does not seem to be responsive. I changed the CSS width of the classes .arcgisSearch .searchGroup .searchInput from pixels to a percentage thinking that would help but the size of the search input box remains fixed. Am I missing something? Has anyone found a work around to this?

View in iphone 6 (how it should look)

View representing iphone 5 - the search button gets pushed down

View in responsive mode: here you can see that the text box stays fixed

CSS

.arcgisSearch .searchGroup .searchInput {
  position: relative;
  z-index: 2;
  margin: 0;
  float: left;
  display: block;
  height: 20px;
  width: 100%;
  padding: 6px 24px 6px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #4C4C4C;
  background-color: #fff;
  border: 1px solid #57585A;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  -webkit-transition: width .175s ease-in;
  -moz-transition: width .175s ease-in;
  -ms-transition: width .175s ease-in;
  -o-transition: width .175s ease-in;
  transition: width .175s ease-in;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

RickeyFight · ‎10-20-2016

Can you some of your code or images so we can see what you are dealing with?

RachelAlbritton · ‎10-20-2016

Rickey - I edited the original post to include this information

RobertScheitlin__GISP · ‎10-20-2016

Rachel,

What does your css or inline style look like for the actual search dijit and it's parent container?

RachelAlbritton · ‎10-21-2016

Robert,

Here is the CSS for the Search Widget and containers:

Modal Body (the search widget is contained within):

.modal-body {

position: relative;

padding: 20px;

}

Div ID assigned to the Widget = #SearchNode

#SeachNode
  width: auto

Search Widget:

.arcgisSearch .searchGroup {
  position: relative;
  color: #4C4C4C;
  font-family: Arial, Helvetica, sans-serif;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.arcgisSearch .searchInputGroup {
  float: left;
  position: relative;
}

.dj_rtl .arcgisSearch .searchInputGroup {
  float: right;
}

.arcgisSearch .searchInputGroup form {
  margin: 0;
  padding: 0;
}

.arcgisSearch .searchBtn {
  display: block;
  float: right;
  padding: 6px 12px;
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
  height: 20px;
  width: 20px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #57585A;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  background-color: #fff;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.dj_rtl .arcgisSearch .searchBtn {
  float: right;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

.arcgisSearch .searchBtn:hover,
.arcgisSearch .searchBtn:focus {
  text-decoration: none;
  background-color: #eee;
}

.arcgisSearch .searchBtn:active {
  background-color: #ddd;
}

.arcgisSearch .searchButtonText {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.arcgisSearch .searchGroup .searchInput {
  position: relative;
  z-index: 2;
  margin: 0;
  float: left;
  display: block;
  height: 20px;
  width: 100%;
  padding: 6px 24px 6px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #4C4C4C;
  background-color: #fff;
  border: 1px solid #57585A;
  border-right: 0;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
  -webkit-transition: width .175s ease-in;
  -moz-transition: width .175s ease-in;
  -ms-transition: width .175s ease-in;
  -o-transition: width .175s ease-in;
  transition: width .175s ease-in;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.dj_rtl .arcgisSearch .searchGroup .searchInput {
  float: right;
  padding: 6px 12px 6px 24px;
  width: 100%;
  border: 1px solid #57585A;
  border-left: 0;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}

.arcgisSearch .searchGroup .searchInput::-ms-clear {
  display: none;
}

.arcgisSearch .searchInput::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.arcgisSearch .searchInput:-ms-input-placeholder {
  color: #999;
}

.arcgisSearch .searchInput::-webkit-input-placeholder {
  color: #999;
}

.arcgisSearch .searchClear {
  display: none;
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 2;
  height: 30px;
  width: 24px;
  text-align: center;
  background-color: #fff;
  cursor: pointer;
}

.dj_rtl .arcgisSearch .searchClear {
  right: auto;
  left: 0;
}

.arcgisSearch .sourceName {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.dj_rtl .arcgisSearch .sourceName {
  text-align: right;
}

.arcgisSearch .hasValue .searchClear {
  display: block;
}

.arcgisSearch .searchIcon {
  font-size: 16px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
}

.arcgisSearch .searchClose,
.arcgisSearch .searchSpinner {
  line-height: 30px;
  width: 24px;
  height: 30px;
}

.arcgisSearch .searchLoading .searchClose {
  display: none;
}

.arcgisSearch .searchSpinner {
  display: none;
}

.arcgisSearch .searchLoading .searchSpinner {
  display: block;
}

.arcgisSearch .searchMenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 16px;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #57585A;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  overflow: auto;
  max-height: 300px;
}

.dj_rtl .arcgisSearch .searchMenu {
  left: auto;
  right: 0;
  float: right;
}

.arcgisSearch .searchMenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.arcgisSearch .searchMenu li {
  padding: 6px 12px;
  cursor: pointer;
}

.arcgisSearch .searchMenu li:hover,
.arcgisSearch .searchMenu li:focus {
  background-color: #eee;
}

.arcgisSearch .searchMenu li:active {
  background-color: #ddd;
}

.arcgisSearch .searchMenu li.active {
  background-color: #4C4C4C;
  color: #fff;
  cursor: default;
}

.arcgisSearch .searchMenu .menuHeader {
  padding: 6px 12px;
  background: #4C4C4C;
  color: #fff;
}

.arcgisSearch .showSuggestions .suggestionsMenu {
  display: block;
  width: 100%;
}

.arcgisSearch .showSources .sourcesMenu {
  display: block;
  width: 70%;
}

.arcgisSearch .searchToggle {
  display: none;
  -webkit-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}

.dj_rtl .arcgisSearch .searchToggle {
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}

.arcgisSearch .hasMultipleSources .searchToggle {
  display: block;
}

.arcgisSearch .hasMultipleSources .searchInput {
  border-left: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.dj_rtl .arcgisSearch .hasMultipleSources .searchInput {
  border-right: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.arcgisSearch .searchLatLongHeader {
  font-weight: bold;
  margin-bottom: 2px;
}

.arcgisSearch .moreResults .moreHeader {
  font-weight: bold;
  margin-bottom: 2px;
}

.arcgisSearch .moreResults .moreItem {
  margin-bottom: 10px;
}

.arcgisSearch .moreResults .resultsList {
  display: none;
}

.arcgisSearch .moreResults .resultsList ul {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
}

.arcgisSearch .moreResults .resultsList li {
  padding: 2px 0;
}

.arcgisSearch .moreResults .resultsList .popupHeader {
  font-weight: bold;
}

.arcgisSearch .showMoreResults .resultsList {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}

.arcgisSearch .noResultsMenu {
  display: none;
  width: 100%;
}

.arcgisSearch .noResultsBody {
  padding: 12px;
}

.arcgisSearch .noResultsHeader {
  font-weight: bold;
  margin-bottom: 5px;
}

.arcgisSearch .showNoResults .noResultsMenu {
  display: block;
}

.arcgisSearch .noValueIcon {
  font-size: 16px;
  line-height: 16px;
  margin: 0 5px 0 0;
  vertical-align: text-bottom;
}

.dj_rtl .arcgisSearch .noValueIcon {
  margin: 0 0 0 5px;
}

.arcgisSearch .searchExpandContainer {
  float: left;
}

.dj_rtl .arcgisSearch .searchExpandContainer {
  float: right;
}

.arcgisSearch .hasButtonMode .searchExpandContainer {
  -webkit-transition: width .175s ease-in;
  -moz-transition: width .175s ease-in;
  -ms-transition: width .175s ease-in;
  -o-transition: width .175s ease-in;
  transition: width .175s ease-in;
  overflow: hidden;
  height: 34px;
}

.arcgisSearch .hasButtonMode.showSuggestions .searchExpandContainer {
  overflow: inherit;
}

.arcgisSearch .hasButtonMode.searchCollapsed .searchExpandContainer {
  width: 0px;
}

.arcgisSearch .hasButtonMode.searchExpanded .searchExpandContainer,
.arcgisSearch .hasButtonMode .searchAnimate {
  width: 237px;
}

.arcgisSearch .hasButtonMode.searchExpanded.hasMultipleSources .searchExpandContainer,
.arcgisSearch .hasButtonMode.hasMultipleSources .searchAnimate {
  width: 282px;
}

.arcgisSearch .searchCollapsed .searchSubmit {
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.arcgisSearch .searchClearFloat {
  clear: both;
}

@-webkit-keyframes anim-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes anim-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.arcgisSearch .searchSpinner {
  -webkit-animation: anim-rotate 1.25s infinite linear;
  animation: anim-rotate 1.25s infinite linear;
}

RobertScheitlin__GISP · ‎10-21-2016

Rachel,

Is th parent container for the search dijit a TitlePane?

RachelAlbritton · ‎10-21-2016

No, the search widget sits in a dojo bootstrap modal. I've included screenshots using the chrome dev tools along with the associated CSS

.modal {

overflow: auto;

overflow-y-scroll;

position: fixed;

top: 0;

right: 0;

left: 0;

z-index: 1050 }

.modal-dialog {

postion: relative;

width: auto;

margin: 1-px ;

padding-top: 60px;

}

.modal-title {

margin: 0;

line-height: 1.4285;

}

.h4 {

display: block

}

.modal-body {

position: relative;

padding: 20px;

}

Finally the actual input box. The CSS defaults to the .arcgisSearch .searchGroup .searchInput CSS group included in the original post

RobertScheitlin__GISP · ‎10-21-2016

Rachel,

I am not seeing this issue with the search dijit. I must have something to do with the bootstrap modal dialog. Can you par down your code to the bare minimum and post it for some testing?

RachelAlbritton · ‎10-21-2016

Robert -

Thank you for your time. I figured out how to work around this. I changed the css for the .arcgisSearch .searchGroup .searchInput group to not show any borders or outlines. Removed the search icon and the close search icon and placed a border around the .arcgisSearch .searchGroup. This appears to be working on all simulated in phones in the Chrome tools emulator including the iphone4. Anything smaller then that then there may be issues but I think that would be a small percentage of people.