Click here to Skip to main content
15,867,838 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
It is possible to take a Dropdownlist and Button inside a Textbox. Actullay i am making a design for search option but i am not able to design as like a www.amazon.com[^] search option.

Please see the website www.amazon.com[^] there is a textbox,button and dropdownlist for search items. I want to design like that.Please help me...
Posted
Updated 16-Jul-12 19:42pm
v3
Comments
jai000 17-Jul-12 1:48am    
You can create your own custom control with same behavior. I guess amazon.com is using CSS (Cascading Style Sheets) for making this kind of look and feel...

hi raju...


It is not possible to take dropdownlist and button inside the textbox. In www.amazon.com they are tacking dropdownlist,textbox,button in one "tr" and each one is seperated bye "td" .

Thanks&Regards
Sandeep
 
Share this answer
 
Comments
Ubaid ur Rahman IT 17-Jul-12 7:07am    
ya, its correct Sandeep
sandeep nagabhairava 17-Jul-12 7:18am    
thank you, Rahman..
textbox in asp.net not a container control so it is not possible that dropdown list inside a textbox.these are separate you see there is all control is in single div.


see below part of code
<div>
         <form>
            action='/s/ref=nb_sb_noss'
            method='get' name='site-search'
            class='nav-searchbar-inner'
          >

            <span id="nav-search-in" class="nav-sprite">
              <span id="nav-search-in-content" data-value="search-alias=aps">
                All
              </span>
              <span class="nav-down-arrow nav-sprite"></span>
              <select name="url" id="searchDropdownBox" class="searchSelect" title="Search in"><option value="search-alias=aps" selected="selected">All Departments</option><option value="search-alias=instant-video">Amazon Instant Video</option><option value="search-alias=appliances">Appliances</option><option value="search-alias=mobile-apps">Apps for Android

</option><option value="search-alias=arts-crafts">Arts, Crafts & Sewing</option><option value="search-alias=automotive">Automotive</option><option value="search-alias=baby-products">Baby</option><option value="search-alias=beauty">Beauty</option><option value="search-alias=stripbooks">Books</option><option value="search-alias=mobile">Cell Phones & Accessories</option><option value="search-alias=apparel">Clothing & Accessories</option><option value="search-alias=collectibles">Collectibles</option><option value="search-alias=computers">Computers</option><option value="search-alias=electronics">Electronics</option><option value="search-alias=gift-cards">Gift Cards</option><option value="search-alias=grocery">Grocery & Gourmet Food</option><option value="search-alias=hpc">Health & Personal Care</option><option value="search-alias=garden">Home & Kitchen</option><option value="search-alias=industrial">Industrial & Scientific</option><option value="search-alias=jewelry">Jewelry</option><option value="search-alias=digital-text">Kindle Store</option><option value="search-alias=magazines">Magazine Subscriptions</option><option value="search-alias=movies-tv">Movies & TV</option><option value="search-alias=digital-music">MP3 Downloads</option><option value="search-alias=popular">Music</option><option value="search-alias=mi">Musical Instruments</option><option value="search-alias=office-products">Office Products</option><option value="search-alias=lawngarden">Patio, Lawn & Garden</option><option value="search-alias=pets">Pet Supplies</option><option value="search-alias=shoes">Shoes</option><option value="search-alias=software">Software</option><option value="search-alias=sporting">Sports & Outdoors</option><option value="search-alias=tools">Tools & Home Improvement</option><option value="search-alias=toys-and-games">Toys & Games</option><option value="search-alias=videogames">Video Games</option><option value="search-alias=watches">Watches</option></select>
            </span>

            <div class="nav-searchfield-outer nav-sprite">
              <div class="nav-searchfield-inner nav-sprite">
                <div class="nav-searchfield-width">
                  <div id="nav-iss-attach">
                    <input type="text" id="twotabsearchtextbox" title="Search For" value="" name="field-keywords" autocomplete="off">
                  </input></div>
                </div>
                <!--[if IE ]><div class='nav-ie-min-width' style='width: 360px'></div><![endif]-->
              </div>
            </div>

            <div class="nav-submit-button nav-sprite">
              <input>
                type='submit'
                value='Go'
                class='nav-submit-input'
                title='Go'
              >
            </input></div>

          </form>
        </div>
 
Share this answer
 
v2
They are not having a dropdown and button in a textbox. They have three separate controls that are made look like one. You can do it using proper design layout and CSS style.
It's more of a Usercontrol. You can achieve the same.

Here is the whole design of how it is rendered:
HTML
<span id='nav-search-in' class='nav-sprite'>
              <span id='nav-search-in-content' data-value="search-alias=aps">
                All
              </span>
              <span class='nav-down-arrow nav-sprite'></span>
              <select name="url" id="searchDropdownBox" class="searchSelect" title="Search in"   ><option value="search-alias=aps" selected="selected">All Departments</option></select>
            </span>

            <div class='nav-searchfield-outer nav-sprite'>
              <div class='nav-searchfield-inner nav-sprite'>
                <div class='nav-searchfield-width'>
                  <div id='nav-iss-attach'>
                    <input type='text' id='twotabsearchtextbox' title='Search For' value='' name='field-keywords' autocomplete='off'>
                  </div>
                </div>
                <!--[if IE ]><div class='nav-ie-min-width' style='width: 360px'></div><![endif]-->
              </div>
            </div>

            <div class='nav-submit-button nav-sprite'>
              <input
                type='submit'
                value='Go'
                class='nav-submit-input'
                title='Go'
              >
            </div>
 
Share this answer
 
Comments
sandeep nagabhairava 17-Jul-12 7:20am    
good job,sandeep...
Hi,
Quote:
It is possible to take a Dropdownlist and Button inside a Textbox.

First of all let me tell you one thing that we cannot have a TextBox, DropDownList and Button inside the TextBox itself.

The link you are referring is quite different from the question you are asking.
What is the need to have a TextBox, DropDownList and Button inside the TextBox?

You can simply have a div tag and you can design according to your wish.
For designing you can use a lot of css classes for better look and feel.

Refer this[^] for css layouts.

--Amit
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900