Place span element near HTML TextBox using Bootstrap

Last Reply 4 months ago By pandeyism

Posted 4 months ago

Hi,

I want a equal seperator between the text value and the message indicator.

I want a output something like about but both by "Country" and "city" seperator should be aligned same.

<style type="text/css">
    td
    {
        position: relative;
    }
    input
    {
        padding-right: 60px;
        text-align: right;
    }
    span
    {
        position: absolute;
        right: 5px;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".custom2").inputmask({
            'alias': 'decimal',
            rightAlign: false,
            'groupSeparator': '.',
            'autoGroup': true
        });
    });
</script>
<table>
    <tr>
        <td>
            <input type="text" id="country" class="custom2" /><span>Country</span>
        </td>
        <td>
            <input type="text" id="city" class="custom2" /><span>City</span>
        </td>
    </tr>
</table>

Thanks

R

Posted 4 months ago

Hi Rockstar8,

Please refer below sample.

HTML

<table>
    <tr>
        <td>
            <div class="input-group">
                <input type="text" class="form-control custom2" id="country" />
                <span class="input-group-addon" style="width: 80px">Country</span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="input-group">
                <input type="text" class="form-control custom2" id="city" />
                <span class="input-group-addon" style="width: 80px">City</span>
            </div>
        </td>
    </tr>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".custom2").inputmask({
            'alias': 'decimal',
            rightAlign: true,
            'groupSeparator': '.',
            'autoGroup': true
        });
    });
</script>

Demo