0

I have two text boxes for two different input. How to make those align right in same line of container. here is the code snippet.

I am using el-form and el-row/el-col.

code:

    .search__app {
  display: flex;
  margin-left:auto;
  font-size: 6px;
  border-radius: 10px;
  border: none;
}
.search__portfolio .filter_option {
  width: 200px;
  margin-bottom: 10px;
}
.search__portfolio .search_input {
  width: 200px;
  margin-top: 7px;
}
<el-form>
          <el-row :gutter="15"
                  class="search__app">
            <el-col class="filter_option">
                <el-input placeholder="Search product based on name"
                          aria-label="Search product based on name"
                          @keyup.enter.native="searchProduct"
                          v-model="filters"></el-input>
            </el-col><el-col class="search_input">
                <el-input placeholder="Search category based on name"
                          aria-label="Search category based on name"
                          @keyup.enter.native="searchCategory"
                          v-model="filterText">
                </el-input>
            </el-col>
          </el-row>
        </el-form>

Now, both boxes are in left side and not able to align it right side in same line. What are the things i have to modify in my code?

Weilory
  • 2,621
  • 19
  • 35
learningMonk
  • 1,101
  • 13
  • 34

3 Answers3

1

.search__app {
  display: flex;
  font-size: 6px;
  border-radius: 10px;
  border: none;
}

input {
width: 200px;
}

.filter_option {
  margin: 7px 0 10px auto;
}

.search_input {
  margin: 7px 0 0 5px;
}
<form>
          <row :gutter="15"
                  class="search__app">
            <div class="filter_option">
                <input placeholder="Search product based on name"
                          aria-label="Search product based on name"
                          @keyup.enter.native="searchProduct"
                          v-model="filters"></el-input>
            </div>
            <div class="search_input">
                <input placeholder="Search category based on name"
                          aria-label="Search category based on name"
                          @keyup.enter.native="searchCategory"
                          v-model="filterText">
                </input>
            </div>
          </row>
        </form>

Hi User,

Tried to fix your code within a new example but looks like el- elements aren't rendered by the browser, I also never heard or saw these before?

However,

What you need is the first element which comes in the display row to be margin-left: auto. Check my example as well, I also tried to optimise your CSS as well and had to change stuff so my example renders in the code snippet simulator.

dutchsociety
  • 575
  • 4
  • 22
1

It seems that you need to add the type="flex" that they are on the same line and justify="end" that they are align on the right :

<el-row
      type="flex"
      align="center"
      justify="end"
>
...
</el-row>

You have good documentation here : https://atom.io/packages/element-ui-snippets

Hope this solves your problem.

Best, BadWoo

Théo Dumez
  • 38
  • 6
0

You can use the property justify-content: flex-end in search__app div which will align boxes to the right

justify-content: flex-end;
Fahad Shinwari
  • 968
  • 7
  • 7