diff --git a/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx b/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx
index f1403d551..6f6d60f0b 100644
--- a/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx
+++ b/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx
@@ -23,6 +23,7 @@ import SuggestionsList from './SuggestionsList';
 
 class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
   private autoCompleteRef: React.RefObject<ITextField>;
+  private element: HTMLDivElement | null | undefined;
 
   constructor(props: IAutoCompleteProps) {
     super(props);
@@ -36,7 +37,8 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
       showSuggestions: false,
       userInput: this.props.sampleQuery.sampleUrl,
       queryUrl: this.props.sampleQuery.sampleUrl,
-      compare: ''
+      compare: '',
+      multiline: false
     };
   }
 
@@ -57,13 +59,34 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
     this.props.contentChanged(userInput);
   };
 
+  public isOverflowing = (input: string) => {
+
+    function getTextWidth(text: string) {
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+
+      if (context === null) {
+        return 0;
+      }
+
+      context.font = getComputedStyle(document.body).font;
+      return context.measureText(text).width + 5;
+
+    }
+
+    return !!this.element
+      && getTextWidth(input) > this.element.scrollWidth;
+
+  }
+
   public onChange = (e: any) => {
     const { suggestions, showSuggestions, userInput: previousUserInput, compare } = this.state;
     const userInput = e.target.value;
 
     this.setState({
       userInput,
-      queryUrl: userInput
+      queryUrl: userInput,
+      multiline: this.isOverflowing(userInput)
     });
 
     if (showSuggestions && suggestions.length) {
@@ -247,7 +270,8 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
       if (newUrl !== this.state.queryUrl) {
         this.setState({
           queryUrl: newUrl,
-          userInput: newUrl
+          userInput: newUrl,
+          multiline: this.isOverflowing(newUrl)
         });
       }
     }
@@ -323,6 +347,7 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
       userInput: selectedSuggestion,
       compare: '',
       queryUrl: selectedSuggestion,
+      multiline: this.isOverflowing(selectedSuggestion)
     });
     this.props.contentChanged(selectedSuggestion);
     this.setFocus();
@@ -378,7 +403,8 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
       filteredSuggestions,
       showSuggestions,
       userInput,
-      queryUrl
+      queryUrl,
+      multiline
     } = this.state;
 
     const currentTheme = getTheme();
@@ -388,20 +414,25 @@ class AutoComplete extends Component<IAutoCompleteProps, IAutoCompleteState> {
 
     return (
       <div onBlur={this.closeSuggestionDialog}>
-        <TextField
-          className={autoInput}
-          type='text'
-          autoComplete='off'
-          onChange={this.onChange}
-          onBlur={this.updateUrlContent}
-          onKeyDown={this.onKeyDown}
-          value={queryUrl}
-          componentRef={this.autoCompleteRef}
-          onRenderSuffix={(this.renderSuffix()) ? this.renderSuffix : undefined}
-          ariaLabel={translateMessage('Query Sample Input')}
-          role='textbox'
-          errorMessage={!queryUrl ? translateMessage('Missing url') : ''}
-        />
+        <div ref={(el) => { this.element = el }}>
+          <TextField
+            className={autoInput}
+            multiline={multiline}
+            autoAdjustHeight
+            resizable={false}
+            type='text'
+            autoComplete='off'
+            onChange={this.onChange}
+            onBlur={this.updateUrlContent}
+            onKeyDown={this.onKeyDown}
+            value={queryUrl}
+            componentRef={this.autoCompleteRef}
+            onRenderSuffix={(this.renderSuffix()) ? this.renderSuffix : undefined}
+            ariaLabel={translateMessage('Query Sample Input')}
+            role='textbox'
+            errorMessage={!queryUrl ? translateMessage('Missing url') : ''}
+          />
+        </div>
         {showSuggestions && userInput && filteredSuggestions.length > 0 &&
           <SuggestionsList
             filteredSuggestions={filteredSuggestions}
diff --git a/src/app/views/query-runner/query-input/auto-complete/auto-complete.styles.ts b/src/app/views/query-runner/query-input/auto-complete/auto-complete.styles.ts
index 0f38fcdae..61825f809 100644
--- a/src/app/views/query-runner/query-input/auto-complete/auto-complete.styles.ts
+++ b/src/app/views/query-runner/query-input/auto-complete/auto-complete.styles.ts
@@ -44,7 +44,7 @@ export const autoCompleteStyles = (theme: ITheme) => {
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: theme.palette.neutralLight,
-      overflow: 'hidden',
+      overflow: 'hidden'
     },
     suggestionActive: {
       display: 'block',
@@ -61,6 +61,7 @@ export const autoCompleteStyles = (theme: ITheme) => {
       borderWidth: '1px',
       borderStyle: 'solid',
       overflow: 'hidden',
+      wordWrap: "normal",
       backgroundColor: theme.palette.neutralLight
     },
     suggestionTitle: {
diff --git a/src/types/auto-complete.ts b/src/types/auto-complete.ts
index b55e806be..2fd7b9481 100644
--- a/src/types/auto-complete.ts
+++ b/src/types/auto-complete.ts
@@ -26,6 +26,7 @@ export interface IAutoCompleteState {
   userInput: string;
   compare: string;
   queryUrl: string;
+  multiline: boolean;
 }
 
 export interface ISuggestionsList {