Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Usage within Bootstrap inline form #830

@istibekesi

Description

@istibekesi

I'm facing multiple issues while using ui-select within a bootsrap inline form:
http://plnkr.co/edit/tAlsDona9LS8D6KUQziS?p=preview

  1. Within form-group, label and ui-select are not inline, even if there are plenty place for it.
  2. Caret and text are overlapping.
  3. Long content overflows:
    capture
  4. Short content displays strange background:
    capture2

Please, fork and correct my plunkr if I'm doing something wrong...

Activity

upmauro

upmauro commented on Apr 9, 2015

@upmauro
Contributor

Sorry if i wrong, but when i open your plunker i see this:

image

istibekesi

istibekesi commented on Apr 9, 2015

@istibekesi
Author

Please, enlarge your window size: either by resizing the plunker preview area using the vertical slider, or launch the preview in separate window. Just make sure, your width is bigger than 768px.

But anyway, try to select a longer value, like "Los Angeles International Airport, 1 World Way, Los Angeles, CA 90045, USA", and see what happens: text overflows.

wolfg1969

wolfg1969 commented on Apr 9, 2015

@wolfg1969

+1

ahocquet

ahocquet commented on Apr 30, 2015

@ahocquet

Indeed, ui-select is broken with form-inline bootstrap style.

lukaszgrolik

lukaszgrolik commented on May 13, 2015

@lukaszgrolik

http://plnkr.co/edit/kuR85O0LkENQCqdnAMYR?p=preview

I managed to fix this weird ui-select's width behaviour by

.form-inline .ui-select-container .ui-select-toggle,
.form-inline .ui-select-container .ui-select-search {
  width: 100%;
}
yaojingguo

yaojingguo commented on Jun 25, 2015

@yaojingguo

+1

poorva29

poorva29 commented on Aug 9, 2015

@poorva29

+1 , this problem persists for me too when i use ui-select with the bootstrap theme and inline form

matteliot

matteliot commented on Sep 10, 2015

@matteliot

same...

okaufmann

okaufmann commented on Oct 21, 2015

@okaufmann

+1

giladegozi

giladegozi commented on Nov 3, 2015

@giladegozi

+1

ghost

ghost commented on Nov 21, 2015

@ghost

+1 for this issue

ghost

ghost commented on Nov 21, 2015

@ghost

Fix for this could be

.form-inline .ui-select-container {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

Works with this example:

<form class="form-inline">
    <div class="form-group">
        <label for="action">Label</label>
        <ui-select id="action" theme="bootstrap" ng-model="selectedItem">
            <ui-select-match>
                <span ng-bind="$select.selected.name"></span>
            </ui-select-match>
            <ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
                <span ng-bind="item.name"></span>
            </ui-select-choices>
        </ui-select>                
    </div>
</form>

But select width isn't same as other input's width, so i have created question in stackoverflow

http://stackoverflow.com/questions/33854737/angular-ui-select-broken-with-bootstrap-form-inline

tarunrathi999

tarunrathi999 commented on Feb 7, 2016

@tarunrathi999

Add postion:absolute , it may resolve the error to some extent

rubinsh

rubinsh commented on Feb 20, 2016

@rubinsh

+1

carloshpds

carloshpds commented on Mar 16, 2016

@carloshpds

+1

wesleycho

wesleycho commented on Mar 27, 2016

@wesleycho
Contributor

@ddctd143 feel free to open a PR

dallincoons

dallincoons commented on Mar 31, 2016

@dallincoons

+1

tscholz

tscholz commented on Apr 3, 2016

@tscholz

+1

wesleycho

wesleycho commented on Apr 3, 2016

@wesleycho
Contributor

Please do not add +1s, they make it much more difficult to digest issues and get them solved due to noise. Instead, use GitHub reactions.

MarcosEllys

MarcosEllys commented on Apr 11, 2017

@MarcosEllys

Fantastic ddctd143, congratulations and thanks for sharing.

.form-inline .ui-select-container { display: inline-block; vertical-align: middle; width: auto; }

battlesteel

battlesteel commented on Jun 14, 2017

@battlesteel

I fixed mine with this.

.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
    width: 100% !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @upmauro@matteliot@yaojingguo@rubinsh@tscholz

        Issue actions

          Usage within Bootstrap inline form · Issue #830 · angular-ui/ui-select