topic Re: Search Widget does not appear to be responsive to different screen sizes in ArcGIS JavaScript Maps SDK Questions

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

RachelAlbritton — Sat, 11 Dec 2021 16:46:19 GMT

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

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

RickeyFight — Thu, 20 Oct 2016 20:14:25 GMT

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

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

RachelAlbritton — Thu, 20 Oct 2016 22:23:30 GMT

Rickey - I edited the original post to include this information

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

RobertScheitlin__GISP — Thu, 20 Oct 2016 23:56:10 GMT

Rachel,

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

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

RachelAlbritton — Sat, 11 Dec 2021 16:46:23 GMT

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

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

RobertScheitlin__GISP — Fri, 21 Oct 2016 14:29:26 GMT

Rachel,

Is th parent container for the search dijit a TitlePane?

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

RachelAlbritton — Fri, 21 Oct 2016 15:05:15 GMT

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

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

RobertScheitlin__GISP — Fri, 21 Oct 2016 15:34:56 GMT

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?

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

RachelAlbritton — Fri, 21 Oct 2016 21:26:38 GMT

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.