input file label and check-boxes same width

Question

I need the upload label and the check-boxes to be at the same width.

I tried to fix it with jquery but didn't work, also flex-grow: 1; and flex: 1 1 0; that in How to make flexbox items the same size? didn't work.

It worked on jquery resize function but, the form container gets extra width.

here is the jsfiddle

fieldset {
        border: 2px solid #0062b5;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
}
input[type=checkbox], input[type=file] {
        display: none;
}
.Center {
        display: flex;
        flex-wrap: nowrap;
}
.RadioLabel {
        cursor: pointer;
        flex: 1;
        border-radius: 5px;
        padding: 10px;
}
.Center input[type=file] + label {
        flex: 1;
}
.MiddelLabel {
        margin: 0 5px;
}
input[type=file] + label {
        cursor: not-allowed;
        transition: 0.3s;
        line-height: 50px;
        padding: 0 10px;
        background-color: #ebebe4;
}
input[type=checkbox]:checked + label {
        background-color: #d1e9ff;
}
label img {
        padding-right: 15px;
        vertical-align: middle;
        margin-top: -2px;
}
#LinkFile {
        flex: 1 1 0px;
        font-size: 16px;
        margin: 0;
}
legend {
        padding: 0 5px;
        color: #0059a3;
        font-weight: bold;
}

<fieldset>
    <legend>Template (optional)</legend>
        <div class="Center">
            <input type="checkbox" name="Layout" id="Template" checked/><label id="Mid" for="Template" class="RadioLabel">Template</label>
            <input type="checkbox" name="Layout" id="Image" checked/><label for="Image" class="RadioLabel MiddelLabel">Image</label>
            <input type="checkbox" name="Layout" id="Link" checked/><label for="Link" class="RadioLabel">Link</label>
        </div><br/>
        <div class="Center">
            <input type="file" name="TemplateFile" id="TempFile" class="inputfile" disabled/>
            <label for="TempFile" class="FileLabel UpWidth"><img src="https://pngimage.net/wp-content/uploads/2018/06/icon-upload-png-6.png" width="20">Upload Template</label>
            <input type="file" name="ImageFile" id="ImgFile" class="inputfile" disabled/>
            <label for="ImgFile" class="FileLabel MiddelLabel UpWidth"><img src="https://pngimage.net/wp-content/uploads/2018/06/icon-upload-png-6.png" width="20">Upload Image</label>
            <input type="text" name="LinkFile" id="LinkFile" class="UpWidth" placeholder="Template Link" disabled/>
        </div>
</fieldset>

Thank you.

score 0 · Accepted Answer · answered Feb 03 '20 at 08:36

You should look into the display: grid; feature of CSS. There's no way to ensure two separate flex containers will have the elements be the same width, unless you set it yourself (which defeats the purpose of flex).

Just set grid-template-columns: 1fr 1fr 1fr; to get 3 columns of the same width, and keep your elements in one container.

fieldset {
        border: 2px solid #0062b5;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
}
input[type=checkbox], input[type=file] {
        display: none;
}
.Center {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: 1fr 1fr 1fr;
}
.RadioLabel {
        cursor: pointer;
        flex: 1;
        border-radius: 5px;
        padding: 10px;
}
.MiddelLabel {
        margin: 0 5px;
}
input[type=file] + label {
        cursor: not-allowed;
        transition: 0.3s;
        line-height: 50px;
        padding: 0 10px;
        background-color: #ebebe4;
}
input[type=checkbox]:checked + label {
        background-color: #d1e9ff;
}
label img {
        padding-right: 15px;
        vertical-align: middle;
        margin-top: -2px;
}
#LinkFile {
        flex: 1 1 0px;
        font-size: 16px;
        margin: 0;
}
legend {
        padding: 0 5px;
        color: #0059a3;
        font-weight: bold;
}

<fieldset>
    <legend>Template (optional)</legend>
        <div class="Center">
            <input type="checkbox" name="Layout" id="Template" checked/><label id="Mid" for="Template" class="RadioLabel">Template</label>
            <input type="checkbox" name="Layout" id="Image" checked/><label for="Image" class="RadioLabel MiddelLabel">Image</label>
            <input type="checkbox" name="Layout" id="Link" checked/><label for="Link" class="RadioLabel">Link</label>
            <input type="file" name="TemplateFile" id="TempFile" class="inputfile" disabled/>
            <label for="TempFile" class="FileLabel UpWidth"><img src="https://pngimage.net/wp-content/uploads/2018/06/icon-upload-png-6.png" width="20">Upload Template</label>
            <input type="file" name="ImageFile" id="ImgFile" class="inputfile" disabled/>
            <label for="ImgFile" class="FileLabel MiddelLabel UpWidth"><img src="https://pngimage.net/wp-content/uploads/2018/06/icon-upload-png-6.png" width="20">Upload Image</label>
            <input type="text" name="LinkFile" id="LinkFile" class="UpWidth" placeholder="Template Link" disabled/>
        </div>
</fieldset>

input file label and check-boxes same width

1 Answers1