CODEWITHSUNDEEP
htmlcssflexbox
Zoltán Fekete
Zoltán Fekete

Reputation: 604

Same width with Flexbox

I have the following part. I already tried to do it, but so far without any success. 

.container {
    width: 600px;
}

.row {
    margin-bottom: 10px;
}

.item {
    width: 100%;
    border: 1px solid silver;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    flex: 1 1 0;
}

.item > .selector {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.item > .label-text {
    background-color: silver;
    color: white;
    padding: 0 10px;
    display: flex;
    align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 1</span>
                </div>
                <span class="label-text">Small Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 2</span>
                </div>
                <span class="label-text">longer Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 3</span>
                </div>
                <span class="label-text">Soo long Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 4</span>
                </div>
                <span class="label-text">Text</span>
            </label>
        </div>
    </div>
</div>

Sadly I'm not able to modify the structure. There are sooo much JS using the structure. But I can edit the CSS. I'm absolutely not experienced with flex box.

The text in the span.label-text elements can be any long but can't be longer than the half of it's parent width.

Its a plugin and its used in many parts. I can't just define a fix width.

Is it possible to make all span.label-text elements as wide as the one with the longest text without modifying the html or using JS for it?

Upvotes: 1

Views: 506

Answers (3)

Chintan Amrutia
Chintan Amrutia

Reputation: 311

Here is jQuery example with check label-text max width in all items and apply width to all label-text.

var width =0
		jQuery('.item').each(function() {
			
			if(width <= jQuery(this).children(".label-text").outerWidth())
			{
				width = jQuery(this).children(".label-text").outerWidth();
			}
		});
		jQuery(".label-text").css('width',Math.ceil(width));
body { margin:0; padding:0;}
		
		.container {
			width: 600px;
		}
		
		.row {
			margin-bottom: 10px;
		}
		
		.item {
			width: 100%;
			border: 1px solid silver;
			margin-bottom: 0;
			display: flex;
			justify-content: space-between;
			min-height: 60px;
			flex: 1 1 0;
		}
		
		.item > .selector {
			display: flex;
			align-items: center;
			padding-left: 20px;
		}
		
		.item > .label-text {
			background-color: silver;
			color: white;
			padding: 0 10px;
			display: flex;
			align-items: center;
		}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 1</span>
                </div>
                <span class="label-text">Small Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 2</span>
                </div>
                <span class="label-text">longer Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 3</span>
                </div>
                <span class="label-text">Soo long Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 4</span>
                </div>
                <span class="label-text">Text</span>
            </label>
        </div>
    </div>
</div>

Upvotes: 4

VXp
VXp

Reputation: 12108

Since you're using Flexbox, you can play around with the flex values of both flex-items of the .item element, e.g.:

.container {
    width: 600px;
}

.row {
    margin-bottom: 10px;
}

.item {
    width: 100%;
    border: 1px solid silver;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    flex: 1 1 0;
}

.item > .selector {
    display: flex;
    flex: 2; /* added; makes it twice as wide as the .label-text */
    align-items: center;
    padding-left: 20px;
}

.item > .label-text {
    background-color: silver;
    color: white;
    padding: 0 10px;
    display: flex;
    flex: 1; /* added */
    align-items: center;
    justify-content: center; /* added */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 1</span>
                </div>
                <span class="label-text">Small Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 2</span>
                </div>
                <span class="label-text">longer Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 3</span>
                </div>
                <span class="label-text">Soo long Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 4</span>
                </div>
                <span class="label-text">Text</span>
            </label>
        </div>
    </div>
</div>

Upvotes: 3

ochs.tobi
ochs.tobi

Reputation: 3454

You can define a width for that label-text.

.container {
    width: 600px;
}

.label-text {
   width: 150px;
}

.row {
    margin-bottom: 10px;
}

.item {
    width: 100%;
    border: 1px solid silver;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    flex: 1 1 0;
}

.item > .selector {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.item > .label-text {
    background-color: silver;
    color: white;
    padding: 0 10px;
    display: flex;
    align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 1</span>
                </div>
                <span class="label-text">Small Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 2</span>
                </div>
                <span class="label-text">longer Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 3</span>
                </div>
                <span class="label-text">Soo long Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 4</span>
                </div>
                <span class="label-text">Text</span>
            </label>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions