CSS and alignement in Struts 2 form

Question

Before using Struts2 I had the following code :

<form class="form-horizontal" role="form">

    <div style="margin-bottom: 25px" class="input-group">
         <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
         <input id="login-username" type="text" class="form-control" placeholder="Identifiant" name="username" value="" required autofocus>
    </div>

    <div style="margin-bottom: 25px" class="input-group">
         <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
         <input id="login-password" type="password" placeholder="Mot de passe" class="form-control" name="password" required>
    </div>

    <div style="margin-top:10px" class="form-group">
         <div class="col-sm-12 controls">
              <button id="btn-login" class="btn btn-success" type="submit">Se connecter</button>
         </div>
    </div>
</form>

And I had the following :

I tried to insert struts tags, so I have this code now :

<s:form action="actionA" method="post" cssClass="form-horizontal">
    <div style="margin-bottom: 25px;" class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <s:textfield cssClass="form-control" name="identifiant" placeholder="Identifiant" required="true"/>
    </div>

    <div style="margin-bottom: 25px" class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
        <s:password cssClass="form-control" name="motDePasse" placeholder="Mot de passe" required="true"/>
    </div>

    <div style="margin-top:10px" class="form-group">
        <div class="col-sm-12 controls">
            <s:submit key="submit" cssClass="btn btn-success" value="Se connecter"/>
        </div>
    </div>
</s:form>

The problem is that the display has changed :

Do you know why the display is not the same ?

Answer 1

The view is not the same because the document is not the same. Struts2 UI tags generate some HTML and javascript content behind the scene that you can see looking in the browser source window. If you want to keep changes as less as possible you can use simple theme on the form tag

<s:form action="actionA" method="post" cssClass="form-horizontal" theme="simple">

or configure it globally in struts.xml

<constant name="struts.ui.theme" value="simple"/>

You can read more about themes in Struts 2 Themes.