Alex Zhukovskiy Alex Zhukovskiy - 5 months ago 5
CSS Question

How to make a width binding in CSS

I have multiple elements in different divs, that should be aligned at some line.
I can hardcode its width (40% for example), but it seems to be ugly. I also can use JS on page load to specify exact values in pixels (but it won't work for resizing very well).

How can I avoid this zigzag?enter image description here

Here is desired result (but I have to hardcode

width: 30%
to make it work):
enter image description here

markup:

<div class="panel-body">
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_patchSize</span>
<input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.PatchSize" initial-value="@Model.Custom.PatchSize" value="@Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_scanInterval</span>
<input id="sourceObserver_scanInterval" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ScanInterval" initial-value="@Model.Custom.ScanInterval" value="@Model.Custom.ScanInterval.RenderIfNotEqual(Model.Default.ScanInterval)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maxWaitingTime</span>
<input id="sourceObserver_maxWaitingTime" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MaxWaitingTime" initial-value="@Model.Custom.MaxWaitingTime" value="@Model.Custom.MaxWaitingTime.RenderIfNotEqual(Model.Default.MaxWaitingTime)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_shutdownTimeout</span>
<input id="sourceObserver_shutdownTimeout" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ShutdownTimeout" initial-value="@Model.Custom.ShutdownTimeout" value="@Model.Custom.ShutdownTimeout.RenderIfNotEqual(Model.Default.ShutdownTimeout)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maximumBytes</span>
<input id="sourceObserver_maximumBytes" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.MaximumBytes" initial-value="@Model.Custom.MemoryLimit.MaximumBytes" value="@Model.Custom.MemoryLimit.MaximumBytes.RenderIfNotEqual(Model.Default.MemoryLimit.MaximumBytes)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitMs</span>
<input id="sourceObserver_freeMemoryWaitMs" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitMs" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs" value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitMs)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitCount</span>
<input id="sourceObserver_freeMemoryWaitCount" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitCount" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount" value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitCount)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
</div>

Answer

It's as simple as adding the following CSS rule:

.input-group {
    display: table-row;
}

Result:

.input-group {
    display: table-row !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-body">
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_patchSize</span>
        <input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.PatchSize" initial-value="@Model.Custom.PatchSize" value="@Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_scanInterval</span>
        <input id="sourceObserver_scanInterval" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ScanInterval" initial-value="@Model.Custom.ScanInterval" value="@Model.Custom.ScanInterval.RenderIfNotEqual(Model.Default.ScanInterval)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_maxWaitingTime</span>
        <input id="sourceObserver_maxWaitingTime" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MaxWaitingTime" initial-value="@Model.Custom.MaxWaitingTime" value="@Model.Custom.MaxWaitingTime.RenderIfNotEqual(Model.Default.MaxWaitingTime)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_shutdownTimeout</span>
        <input id="sourceObserver_shutdownTimeout" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.ShutdownTimeout" initial-value="@Model.Custom.ShutdownTimeout" value="@Model.Custom.ShutdownTimeout.RenderIfNotEqual(Model.Default.ShutdownTimeout)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_maximumBytes</span>
        <input id="sourceObserver_maximumBytes" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.MaximumBytes" initial-value="@Model.Custom.MemoryLimit.MaximumBytes" value="@Model.Custom.MemoryLimit.MaximumBytes.RenderIfNotEqual(Model.Default.MemoryLimit.MaximumBytes)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitMs</span>
        <input id="sourceObserver_freeMemoryWaitMs" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitMs" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs" value="@Model.Custom.MemoryLimit.FreeMemoryWaitMs.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitMs)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
    <div class="input-group margin-bottom">
        <span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitCount</span>
        <input id="sourceObserver_freeMemoryWaitCount" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="@Model.Default.MemoryLimit.FreeMemoryWaitCount" initial-value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount" value="@Model.Custom.MemoryLimit.FreeMemoryWaitCount.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitCount)">
        <span class="input-group-btn">
            <input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
            <input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
        </span>
    </div>
</div>