CODEWITHSUNDEEP
htmlcssflexbox
devdropper87
devdropper87

Reputation: 4187

Keep button in position

I'm a new developer, I have the following button which is a flex item div inside a flex container:

<div class="flex-item flex-item-button" >
                <i class="fa fa-plus-circle big-icon"></i>
            </div>

a sibling div is an an input/typeahead, and when the user selects, value selected shows up beneath the input, causing the container to resize:

before select:

enter image description here

after select:

enter image description here

As you can see the button drops down instead of being parallel with the input. how can I prevent this from happening? each sibling element is a flex-item and the parent wrapper has the class flex-container-wrap. I tried position: relative;

More code as requested:

<div class="flex-container wrap">
                <div class="flex-item">
                    <select name="customerDropdown" data-ng-model="customer.selected"></select>
                </div>
                <div class="flex-item">
                    <input id="vin-input" ng-change="onChange()"
                </div>
                <div class="flex-item "
                     >
                    <auto-complete><auto-complete>
                </div>
                <div>

                    <auto-complete i><auto-complete>
                </div>
                <div class="flex-item"
                     >
                    <auto-complete></auto-complete>

                </div>
                <div class="flex-item" >

                    <multiselect-dropdown><multiselect-dropdown>
                </div>

                <div class="flex-item flex-item-button">
                    <i class="fa fa-plus-circle big-icon"></i>
                </div>
            </div>

Upvotes: 0

Views: 72

Answers (2)

Sleek Geek
Sleek Geek

Reputation: 4686

You have to hold the plus sign with a given height, then use absolute positioning, top, and right property values to situate the plus sign where you want it.That way, It will always remain where you placed it.

.flex-container {
  width: 200px; /* Adjust as needed */
  height: 30px; /* Adjust as needed */
  position: relative;/* Helps Curtail Overlap */
  }


.fa-plus-circle.big-icon {
  position: absolute;
  right: -10px; /* Adjust as needed */
  top: 20px;    /* Adjust as needed */
  height: 25px; /* Adjust as needed */
  width: 25px;  /* Adjust as needed */
  z-index: 999;
  }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="flex-container wrap">
                <div class="flex-item">
                    <select name="customerDropdown" data-ng-model="customer.selected"></select>
                </div>
                <div class="flex-item">
                    <input id="vin-input" ng-change="onChange()"
                </div>
                <div class="flex-item "
                     >
                    <auto-complete><auto-complete>
                </div>
                <div>

                    <auto-complete i><auto-complete>
                </div>
                <div class="flex-item"
                     >
                    <auto-complete></auto-complete>

                </div>
                <div class="flex-item" >

                    <multiselect-dropdown><multiselect-dropdown>
                </div>

                <div class="flex-item flex-item-button">
                    <i class="fa fa-plus-circle big-icon"></i>
                </div>
            </div>

Upvotes: 0

sjr59
sjr59

Reputation: 93

I'm not sure exactly why it is happening but you can try to make the button fixed in a location:

position: fixed;

And then set where on the screen you want it located: 

bottom: 100px;
right: 100px;

Edit: the px given above won't be what you want for your situation, it is just an example of how to do it

Upvotes: 1

Related Questions