[Vuejs]-How to move the icon to the right end?

by

0👍

✅

used flex box to achieve it. thanks

.icon {
  display: flex;
  justify-content: space-between;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<modal v-model="isThematicSearchCardOpen" title="Card">
  <div>
    <form-row>
      <form-group :columns="12" title="Name">
        <text-input/>
      </form-group>
    </form-row>
    <form-row>
      <form-group :columns="12" title="Icon" class="icon">
        <span style="margin-left: 20px;">None</span>
        <span>
          <icon-button default @click="upload" title="Save" class="fas fa-folder-plus" icon="icon-folder-plus"/>
          <file-selector ref="fileSelector" @changed="selectFile" :filter="'.png, .jpeg, .jpg, .bpm'"/>
        </span>
      </form-group>
    </form-row>
  </div>
  <div slot="footer">
    <button class="btn btn-primary" @click="create">Create</button>
    <button class="btn btn-default" @click="cancelThematicSearchCard">Cancel</button>
  </div>
</modal>

0👍

use class="pull-right" or

<div class="float-left">Float left on all viewport sizes</div><br>

<div class="float-right">Float right on all viewport sizes</div><br>

or

padding-left:500px;
padding-right:500px;

0👍

You can use flexbox. A trick here is that we use margin-left: auto for the icon

.icon-block {
  display: flex;
}
.icon {
  margin-left: auto;
}
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<modal v-model="isThematicSearchCardOpen" title="Card">
  <div>
    <form-row>
      <form-group :columns="12" title="Name">
        <text-input/>
      </form-group>
    </form-row>
    <form-row>
      <form-group :columns="12" title="Icon" class="icon-block">
        <span style="margin-left: 20px;">None</span>
        <span class="icon">
          <icon-button default @click="upload" title="Save" class="fas fa-folder-plus" icon="icon-folder-plus"/>
          <file-selector ref="fileSelector" @changed="selectFile" :filter="'.png, .jpeg, .jpg, .bpm'"/>
        </span>
      </form-group>
    </form-row>
  </div>
  <div slot="footer">
    <button class="btn btn-primary" @click="create">Create</button>
    <button class="btn btn-default" @click="cancelThematicSearchCard">Cancel</button>
  </div>
</modal>

Leave a comment