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

RachelAlbritton

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

RachelAlbritton

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