SoftTimur SoftTimur - 27 days ago 9
CSS Question

Add a close icon in a panel

I want to add a close icon on the right of the title of my panel. But I cannot put it inside the panel:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>JS Bin</title>
<style>
.panel {
background: #FFFFFF;
padding: 7px 10px;
}

.x_title {
border-bottom:2px solid #E6E9ED;
margin-bottom:10px;
padding:1px 5px 6px;
font-size:16px;
}

.x_title .actions {
position: absolute;
right: 0;
top: 0;
line-height: 3
}

.x_title .list-inline {
margin-left: -13px;
padding-left: -5px;
}

.x_content {
margin-top:5px;
padding:0 5px 6px;
}
</style>
</head>
<body>
<div class="panel">
<div class="x_title">
Panel
<div class="actions list-inline">
<a href="#" onclick="$('.panel').hide(); $('#br').hide();">&times;</a>
</div>
</div>
<div class="x_content">
Content
</div>
</div>
</body>
</html>


JSBin

Could anyone help me amend this?

Additionally, I don't know if it is the best way to add a close icon. Bootstrap has
modal
, but it seems that modal is used for pop-up window rather than a panel inside a page. Does anyone one know what is the most conventional way to add close icon (and even collapse icon) by Bootstrap and JQuery?

Answer

An element with position: absolute; will position itself relative to the page unless its parent has position: relative;.

What you need to change is .x_title, like so:

.x_title {
    border-bottom:2px solid #E6E9ED;
    margin-bottom:10px;
    padding:1px 5px 6px;
    font-size:16px;
    position: relative;
 }

By giving this a position: relative;, the right: 0; on your actions div now refers to the right edge of x_title, rather than the right edge of the page.