Title: Responsive Width for Results (Based on Input width)
Last modified: August 22, 2016

---

# Responsive Width for Results (Based on Input width)

 *  [jwmann](https://wordpress.org/support/users/jwmann/)
 * (@jwmann)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/responsive-width-for-results-based-on-input-width/)
 * Hi there,
 * I realize that the results are being shown through an absolutely positioned element
   which are appended to the body. The problem with appending it to the body is 
   that it completely removes the possibility for inheriting the width of the search
   input through css (thus no responsive widths unless based on results text).
 * It would be really awesome if the element could inherit the width of the search
   input that calls it (or at least have an option for it). This can easily be done
   through javascript with just 1 line of code on your current javascript without
   changing where it appends to.
 * You could also go the route of appending as a sibling to the input that called
   it. (similar to the way typeahead.js does it)
 * I’ve added a comment above the line where it could be added.
 *     ```
       LiveSearch.positionResults = function() {
       	var topOffset;
       	var searchBox = jQuery('input:focus').first();
       	var resultsElement = jQuery('#dwls_search_results');
       	if(resultsElement && searchBox.size() > 0) {
       		// Position the ul right under the search box
       		var searchBoxPosition = searchBox.offset();
       		searchBoxPosition.left += parseInt(DavesWordPressLiveSearchConfig.xOffset, 10);
       		searchBoxPosition.top  += parseInt(DavesWordPressLiveSearchConfig.yOffset, 10);
       		resultsElement.css('left', searchBoxPosition.left);
       		resultsElement.css('top', searchBoxPosition.top);
   
       // >>>>>>>>>>>>>>
   
                       // Set the width based on the inherited element's width
                       resultsElement.css('width', searchBox.outerWidth());
   
       // <<<<<<<<<<<<<<
   
       		resultsElement.css('display', 'block');
                       switch(DavesWordPressLiveSearchConfig.resultsDirection)
       		{
       			case 'up':
       				topOffset = searchBoxPosition.top - resultsElement.height();
       				break;
       			case 'down':
       				topOffset = searchBoxPosition.top + LiveSearch.searchBoxes.outerHeight();
       				break;
       			default:
       				topOffset = searchBoxPosition.top + LiveSearch.searchBoxes.outerHeight();
       		}
       		resultsElement.css('top', topOffset + 'px');
       	}
       };
       ```
   
 * This is what the results would look like with this one line added – [http://d.pr/i/WRFG/4n2VLX3c](http://d.pr/i/WRFG/4n2VLX3c)
   
   Let me know what you think.
 * [https://wordpress.org/plugins/daves-wordpress-live-search/](https://wordpress.org/plugins/daves-wordpress-live-search/)

Viewing 1 replies (of 1 total)

 *  Thread Starter [jwmann](https://wordpress.org/support/users/jwmann/)
 * (@jwmann)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/responsive-width-for-results-based-on-input-width/#post-5371047)
 * Another advantage of appending the results close to the element is to allow for
   results styling that are specific to the location of the search.
 * For example, if you have 2 search fields. One is part of the navigation and therefore
   has a lot of space and one is part of a sidebar and doesn’t have a lot of space.
   I would want to be capable of styling the one with more space to take images 
   and have nice padding. Whereas the sidebar I’d like to hide the images and display
   less padding to conserve space.
 * Now I’m stuck with this situation where I can’t style them individually.
    🙁 –
   [http://d.pr/i/10CaS/3Bf5dZHF](http://d.pr/i/10CaS/3Bf5dZHF) 🙂 – [http://d.pr/i/BdxQ/5INuxNFQ](http://d.pr/i/BdxQ/5INuxNFQ)

Viewing 1 replies (of 1 total)

The topic ‘Responsive Width for Results (Based on Input width)’ is closed to new
replies.

 * ![](https://s.w.org/plugins/geopattern-icon/daves-wordpress-live-search_daad6f.
   svg)
 * [Dave's WordPress Live Search](https://wordpress.org/plugins/daves-wordpress-live-search/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/daves-wordpress-live-search/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/daves-wordpress-live-search/)
 * [Active Topics](https://wordpress.org/support/plugin/daves-wordpress-live-search/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/daves-wordpress-live-search/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/daves-wordpress-live-search/reviews/)

## Tags

 * [append](https://wordpress.org/support/topic-tag/append/)
 * [body](https://wordpress.org/support/topic-tag/body/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [inherit](https://wordpress.org/support/topic-tag/inherit/)
 * [input](https://wordpress.org/support/topic-tag/input/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * 1 reply
 * 1 participant
 * Last reply from: [jwmann](https://wordpress.org/support/users/jwmann/)
 * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/responsive-width-for-results-based-on-input-width/#post-5371047)
 * Status: not resolved