How to solve Struts Submit CSS?

Question

Watch the image;

I’ve done everything to put this button in the right place that I can’t, it just gets weirdly in the corner of the screen, it’s very strange behavior for the one button.

These were my attempts

.button_struts{
position: relative;
right: -780px;
top: -69px;
}

These CSS settings worked to fix the problem, but it’s not a good practice because it doesn’t get responsive, I put this button on the force, it’s not right;

Could someone give me a suggestion?

This is my HTML;

<div class="modal fade" id="modalAddObservacao" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel">
    <s:form cssClass="form-horizontal" role="form" id="formObservacao" action="NaoConformidade!addObservacao" method="post">
        <s:hidden id="codigoNaoConformidade" name="observacao.id" value="%{observacao.id}" />
        <s:hidden name="idRegistroSelecionado" id="idRegistroSelecionado" value=""/>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" onclick="fecharModalObservacao();" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                    <h4 class="modal-title" id="myModalLabel">Observação</h4>

                <div class="modal-body">

                    <input
                        id="idObservacao"
                        type="text" 
                        class="form-control"
                        name="observacao" 
                        value="" />

                    <div id="msgObservacao" ></div>
                </div>
                <div class="modal-footer" align="right">
                    <s:submit onclick="adicionarObservacao(event);" cssClass="btn btn-primary button_struts" key="Salvar"/>
                </div>
            </div>
        </div>
        </div>
    </s:form>
</div>

Additional information

I tried that way too;

<div class="modal fade" id="modalAddObservacao" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel">
    <s:form cssClass="form-horizontal" role="form" id="formObservacao" action="NaoConformidade!addObservacao" method="post">
        <s:hidden id="codigoNaoConformidade" name="observacao.id" value="%{observacao.id}" />
        <s:hidden name="idRegistroSelecionado" id="idRegistroSelecionado" value=""/>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"  aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>

                        <h4 class="modal-title" id="myModalLabel">Observação</h4>
                    </div>
                    <div class="modal-body">

                        <input
                            id="idObservacao"
                            type="text" 
                            class="form-control"
                            name="observacao" 
                            value="" />


                        <div id="msgObservacao" ></div>
                    </div>
                    <div class="modal-footer" align="right">
                        <s:submit onclick="adicionarObservacao(event);" cssClass="btn btn-primary" key="Salvar"/>
                    </div>

           </div>
        </div>
    </s:form>
</div>

Answer 1

Bootstrap 3 modal footer already aligns the elements on the right by default, due to native property text-align: right:

That is, you do not need to apply styles to position the button, it is already in the correct position normally, as shown in the example below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalAddObservacao">
  Abrir modal
</button>
<div class="modal fade" id="modalAddObservacao" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel">
    <form class="form-horizontal" role="form" id="formObservacao" action="NaoConformidade!addObservacao" method="post">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" onclick="fecharModalObservacao();" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                    <h4 class="modal-title" id="myModalLabel">Observação</h4>
               </div>
                <div class="modal-body">

                    <input
                        id="idObservacao"
                        type="text" 
                        class="form-control"
                        name="observacao" 
                        value="" />

                    <div id="msgObservacao" ></div>
                </div>
                <div class="modal-footer">
                    <button onclick="adicionarObservacao(event);" class="btn btn-primary button_struts" key="Salvar">Salvar</button>
                </div>
            </div>
        </div>
        </div>
    </form>
</div>

You don’t need that attribute either align="right" in the div footer of modal. And missed closing the modal header div, otherwise she will "swallow" the footer div.