How to avoid that modal window change CSS on site

Question

As it is usually on any admin page I have 3 buttons next to each other. One for detail, one for edit and one for delete, it looks like:

<a n:href="detail $candidate->id">
    <button type="button" class="btn btn-success btn-sm">
        <i class="glyphicon glyphicon-search" style="margin-right:0px"></i>
    </button>
</a>                                                                                              
<a href="#">
    <button type="button" class="btn btn-info btn-sm">
        <i class="glyphicon glyphicon-pencil" style="margin-right:0px"></i>
    </button>
</a>                                                
<a  n:href="delete! $candidate->id">
    <button type="button" class="btn btn-danger btn-sm">
        <i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
    </button>
</a>

After that I decide I need to add "Confirm modal" when user press "DELETE" to avoid missclicks

<a
    data-nette-confirm="modal"
    data-nette-confirm-title="Confirm"
    data-nette-confirm-text="Are you sure you want to delete?"
    data-nette-confirm-ok-class="btn-danger"
    data-nette-confirm-ok-text="Yes"
    data-nette-confirm-cancel-class="btn-success"
    data-nette-confirm-cancel-text="No"
    class="btn btn-danger"
    data-ajax="off" // or class="ajax"
    n:href="delete! $candidate->id">                                                        
    <button type="button" class="btn btn-danger btn-xs">
        <i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
    </button>
</a>

After this I just get my DELETE button twice that BIG as others, I try to just make it xs but still so much bigger. Is there a way how can I avoid this change?

there is no styling in the link, just remove the css class then — oshell, Aug 30 '15 at 10:44
If you mean: `data-nette-confirm-cancel-class="btn-success"` and `class="btn btn-danger"` It is style of modal it self (so accept and cancel button) — Andurit, Aug 30 '15 at 10:47
btw: Did you know you're not allowed to put a BUTTON inside an A tag? http://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5 — Petr 'PePa' Pavel, Oct 16 '15 at 08:40

score 0 · Answer 1 · answered Oct 16 '15 at 08:42

0

Try removing:

// or class="ajax"

It overwrites previously defined class="btn btn-danger".

answered Oct 16 '15 at 08:42

Petr 'PePa' Pavel

520
3
10

How to avoid that modal window change CSS on site

1 Answers1