Vue-js-modal: Top-right slot position

[OmgImAlexis]

Currently the top-right slot doesn't get any CSS applied to it. It'd be nice by default if it was positioned at the top right of the modal instead of the top right of the page.

[euvl]

Yes, because everyone wants a different thing to be there, so you will have to implement your close button yourself.

I think the default is already good enough.

The corresponding class name is .v--modal-top-right. As the simplest solution, you can overwrite position in your code like this:

.v--modal-top-right {
    right: where_i_want_it_to_be px !important;
    top: where_i_want_it_to_be px !important;
}

[OmgImAlexis]

What I was thinking instead is to just add another slot called "close button" that way for people that want to add a close button it's already positioned correctly in relations to the box. You shouldn't really have to override CSS to add an expected feature for a modal.

[euvl]

I will be happy to review a PR

[vesper8]

I must be missing something.. it seems the top-right slot is not at the right dom level. It should be relative to the modal window not the modal overlay?

If it's relative to the overlay then I don't know how we can tie it to the top-right corner of the modal without using some javascript

I think the "default top right" for most use-cases is having it attached to the window.. not the absolute top right of the page as it is now..

could you please comment on what I might be missing here @euvl ? I want the X button to be attached to the top right corner of the modal window.. how do I achieve this?

[euvl]

Hey @vesper8, sure i can comment:

I must be missing something.. it seems the top-right slot is not at the right dom level. It should be relative to the modal window not the modal overlay?

Nope, I think that it is in the right spot. Positioning elements relatively to modal is easy (you can use css relative parent/absolute child}.

If it's relative to the overlay then I don't know how we can tie it to the top-right corner of the modal without using some javascript

See no problem in here. Writing a couple of lines of javascript ( < 5 ) should not be a problem.

I think the "default top right" for most use-cases is having it attached to the window.. not the absolute top right of the page as it is now..

Which use-cases though? If you will look at facebook and twitter, they have the same layout (my projects also required same positioning).

I want the X button to be attached to the top right corner of the modal window.. how do I achieve this?

Position <button/> absolutely to right:-50px, top:-50px and set it's size to 50x50, make parent relative.

Thanks 👍

[felipeegasneris]

the solution to fit the close button to modal window is:

<modal
        adaptive
        :name="modalSettings.name"
        :width="modalSettings.width"
        :height="modalSettings.height"
        :scrollable="modalSettings.scrollable"
      >
        <div class="quotation-container">  // this is the important a div container to slot and  content
          <div slot="top-right">
            <button @click="$modal.hide('quotation-modal')">
              x
            </button>
          </div>
          <the-quotation :ad-data="adData" />
        </div>
 </modal>

and this is the result:

greetings!

[smelyakov]

@felipeegasneris you don't need the reference to slot in this case.

[Symbolk]

the solution to fit the close button to modal window is:

<modal
        adaptive
        :name="modalSettings.name"
        :width="modalSettings.width"
        :height="modalSettings.height"
        :scrollable="modalSettings.scrollable"
      >
        <div class="quotation-container">  // this is the important a div container to slot and  content
          <div slot="top-right">
            <button @click="$modal.hide('quotation-modal')">
              x
            </button>
          </div>
          <the-quotation :ad-data="adData" />
        </div>
 </modal>

and this is the result:

greetings!

Just wrap the button within a '\' works, but the position is top-left, how to make it top-right as defined in the code?