CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dawood Awan
Dawood Awan

Reputation: 7338

Textbox with Dropdown as Group Addon

I am trying to use the Dropdown as a Group Add-on in bootstrap:

<div class="col-md-5">
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@Html.DropDownListFor(m => m.SelectedCountryCode, new SelectList(Model.ListOfCountries, "PhoneCode", "PhoneCode"), "Select")</div>
      @Html.TextBoxFor(m => Model.Value, new { @class = "form-control" })
    </div>
  </div>
</div>

This is the result I get:

enter image description here

Is there another way to do this so my styles of dropdown are same as the textbox?

I don't want the grey part around the dropdown.

Here is a JSFiddle:

https://jsfiddle.net/mdawood1991/yLygh0v4/

Upvotes: 1

Views: 2191

Answers (4)

Rob Grant
Rob Grant

Reputation: 7358

This is the best way to fix this. Style the dropdown with this:

background: transparent; 
border: 0;

Then it'll look like this:

Dropdown merged into background

And when open:

Open dropdown merged into background

Upvotes: 1

BSMP
BSMP

Reputation: 4807

You can also override the background color for that class:

.input-group-addon {
    background: white;
}

Or just change it in the existing CSS.

Upvotes: 0

John Bupit
John Bupit

Reputation: 10618

You can use an input-group-btn dropdown:

  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
        aria-expanded="false">Select <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">0044</a></li>
      <li><a href="#">0033</a></li>
      <li><a href="#">001</a></li>
    </ul>
  </div><!-- /btn-group -->

Fiddle.

Or, you can remove the padding from the .input-group-addon:

.input-group-addon {
    padding: 0 !important;
    background: transparent;
}

Fiddle.

Upvotes: 1

FlixMa
FlixMa

Reputation: 943

What about styling the select box?

select{
background-color: transparent;
}

It may be that I got your question wrong :)

The area then just vanishes on my phone. I'm using safari on iOS 8.

Upvotes: 0

Related Questions