Excuse any weak code you may come across, as I am a backend developer.
This is the current appearance of my form:
The alignment of these two buttons in Chrome is not correct
The issue only occurs in Chrome, with FireFox and Edge displaying the form as expected. For reference, here is how I want the form to look (screenshot from FF):
The HTML code for the Form:
<div style="margin-top: 20px;margin-left: 100px;">
<div class="card card-outlined style-primary-dark" style="width: 80%">
<div class="card-head">
<header><i class="fa fa-fw fa-lock"></i> QR Code</header>
</div><!--end .card-head -->
<div class="card-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="txtData" style="color:#0d998f;" class="col-sm-2 control-label">Texte à Crypté</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="txtData" placeholder="Saisir vos données...." required>
</div><br><br><br>
<div class="col-sm-10 navigator">
<button id="btGenerer" type="button" class="btn ink-reaction btn-primary">Générer</button>
<button id="btSaveQR" type="button" class="btn ink-reaction btn-default-dark">Sauvegarder</button>
</div>
</div>
</form>
</div><!--end .card-body -->
</div><!--end .card -->
</div><!--end .col -->
Here is some CSS specific to FireFox and Edge:
@-moz-document url-prefix()
{
.navigator {
margin-left:37%;
}
}
@supports (-ms-ime-align: auto) {
.navigator {
margin-left:37%;
}
}
When inspecting the page on Chrome, it appears that the "Générer" button takes up a lot of space which might be causing the alignment issue. See image below: