CODEWITHSUNDEEP
vue.jstailwind-css
Arctic Fox
Arctic Fox

Reputation: 79

justify-end not working properly on vue component buttons

In my vuejs component, I have a form with submit button and a cancel button.

I want my buttons to align right

Following is my current code

 <template slot="modal_actions">
                    <div class="flex items-center justify-end">
                        <close-overlay class="h-full" identifier="addNewScheduleModal">
                            <cs-button variant="blank">Cancel</cs-button>
                        </close-overlay>
                        <disables-submit-on-errors
                            :identifier="identifier"
                            @proceed="addNewSchedule"
                        >
                        <loading-button ref="submitBtnSave" size="normal">
                            Save & Close
                        </loading-button>
                        </disables-submit-on-errors>
                    </div>
                </template>

Even though I'm using justify-end class, still the button are aligned left...

I'm struggling to find what I'm doing wrong and align them right....

I'm using tailwind-css

Upvotes: 0

Views: 545

Answers (1)

MagnusEffect
MagnusEffect

Reputation: 3925

Assuming that your cancel button is at left and loading button is at right of cancel button.

Then there are two ways,

  1. you can change the order of buttons inside div like this:
 <template slot="modal_actions">
      <div class="flex items-center justify-end">
         <loading-button ref="submitBtnSave" size="normal">
             Save & Close 
         </loading-button>
         <disables-submit-on-errors
             :identifier="identifier"
             @proceed="addNewSchedule"
         >
         <close-overlay class="h-full" identifier="addNewScheduleModal">
               <cs-button variant="blank">Cancel</cs-button>
         </close-overlay>
                 .
                 .
   </div>
</template>
  1. You can change the flex-direction to row-reverse by adding class flex-row-reverse to the div. I have created a similar example below for understanding purpose.

<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-4">
<h3>Before</h3>
<div class="flex items-center justify-end h-96 w-full bg-red-200 space-x-10">
  <div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
  <div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</div>
<h3>After</h3>
<div class="flex flex-row-reverse items-center justify-end h-96 w-full bg-red-200 space-x-10">
  <div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
  <div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</div>
</div>

Upvotes: 1

Related Questions