Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET
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 16-Jul-12 19:29pm
Edited 16-Jul-12 19:42pm
v3
Comments
jai000 at 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...
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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
  Permalink  
Comments
Ubaid ur Rahman IT at 17-Jul-12 7:07am
   
ya, its correct Sandeep
sandeep nagabhairava at 17-Jul-12 7:18am
   
thank you, Rahman..
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

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>
  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

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:
<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>
  Permalink  
Comments
sandeep nagabhairava at 17-Jul-12 7:20am
   
good job,sandeep...
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

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
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 620
1 Maciej Los 610
2 CPallini 255
3 RyanDev 161
4 Peter Leow 125
0 OriginalGriff 5,784
1 Sergey Alexandrovich Kryukov 4,838
2 Peter Leow 3,009
3 Maciej Los 2,894
4 DamithSL 2,465


Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 17 Jul 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100