CODEWITHSUNDEEP
javascriptjquerycsslayout
Roope
Roope

Reputation: 4507

A circle element next to a fluid rounded element

Is the following layout possible with CSS? If not, is there a better solution than my current JS solution? See the fiddle for a complete example.

+--------------------+
|                    |
|                    |
|                    |
|                    |
|                    |
|                    |
|                    |
|                    |
|                    |
|--------------------+ 
|+----+  +----------+|    container height in percentage, e.g. 20% of window
|| 1  |  | 2        ||    button 1: a circle based on container height
|+----+  +----------+|    button 2: fill available space and fully round corners 
+--------------------+

The basic issue is that the first element needs to be a circle, i.e. a rounded square, based on the height of the container. And the second element should fill the rest of the space with the same border-radius.

Following is how I solved it with JS, but it does not seem to be too reliable on mobile devices. And the project is basically mobile-only. Also, if the layout is too dependent on JS, it will cause other trouble when doing fancy transitions etc. with CSS.

Fiddle: http://jsfiddle.net/n52x1ws1/3/

$(document).ready(function(){
    var height = $(".device-fluid").find(".btn-circle").height();
    var borderRadius = height / 2;
    
    $(".device-fluid").find(".btn-circle").css("width", height);
	$(".device-fluid").find(".btn-circle").css("border-radius", borderRadius);
    
    var fluidWidth = $(".device-fluid").find(".container").width() - height - 15;
    
    $(".device-fluid").find(".btn-fluid").css("width", fluidWidth);
    $(".device-fluid").find(".btn-fluid").css("border-radius", borderRadius);
});
* {
    box-sizing: border-box;
    font-family: sans-serif;
}
.device {
    display: inline-block;
    position: relative;
    width: 320px;
    height: 480px;
    border: 2px solid #ccc;
    margin: 30px;
    text-align: center;
}
.label {
    margin-top: 30px;
}
.container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    padding: 15px;
    background: #f7f7f7;
}
.btn {
    height: 100%;
}
.btn-circle {
    float: left;
}
.btn-fluid {
    float: right;
}

.device-fixed .btn-circle {
    width: 66px; /* easy since we know the height */
    border-radius: 33px;
    background: #2ecc71;
}
.device-fixed .btn-fluid {
    width: 205px; /* available space minus a 15px margin */
    border-radius: 33px;
    background: #27ae60;
}

.device-fluid .btn-circle {
    width: 20%; /* this needs to be equal to the height */
    border-radius: 50%;
    background: #2ecc71;
}
.device-fluid .btn-fluid {
    width: 75%; /* this needs to fill the rest of the available space minus a 15px margin */
    border-radius: 50%;
    background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="device device-fixed">
    <div class="label">fixed</div>
    <div class="container">
        <div class="btn btn-circle"></div>
        <div class="btn btn-fluid"></div>
    </div>
</div>

<div class="device device-fluid">
    <div class="label">fluid with JS</div>
    <div class="container">
        <div class="btn btn-circle"></div>
        <div class="btn btn-fluid"></div>
    </div>
</div>

Upvotes: 0

Views: 51

Answers (1)

woestijnrog
woestijnrog

Reputation: 1579

I'm not exactly sure what you mean by

container height in percentage, e.g. 20% of window

If that means that the height of the container is determined by the size of the viewport you can use the viewport units. 1vh equals 1% of the viewport height.

.container {
    height: 20vh;
}

You can then easily make a circle based on this height:

.btn-circle{
    height: 20vh;
    width: 20vh;
    border-radius: 10vh;
}

The next div should fill the available space

.btn-fluid{
    height: 20vh;
    width: calc(100vw - 20vh);  /*100% of the viewport width minus the space for the square*/
    border-radius: 10vh;
}

It looks like this in a fiddle.

Upvotes: 1

Related Questions