I´m currently trying to create some kind of tab component. It all works fine, if the text inside the label tags is short enough to get displayed inside the content div. If the text is too long, the text gets shortened with ellipsis. But if this happens, the x icon floats out of the parent div.
How to fix this behaviour, so that the x stays in the component div without limiting the labels to a fix size? the reason behind this is, that the icon shcould only appear, if the mouse is hovered over the tab. otherwise the label should reach all the way to the right side. I know how to to this stuff. The only problem currently is the falsy displayed x icon.
.example {
display: flex;
flex-direction: column;
}
.component {
max-width: 250px;
min-width: 100px;
width: auto;
height: 40px;
background-color: grey;
cursor: default;
display: flex;
flex-direction: row;
}
.line {
width: 2px;
min-width: 2px;
height: 30px;
background-color: black;
margin-top: 5px;
}
.content {
height: 100%;
width: 100%;
padding: 7px 10px 7px 5px;
}
.label {
line-height: 13px;
font-size: 13px;
height: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #c4c7cc;
width: 100%;
}
.icon {
color: black;
float: left;
margin-right: 7px;
cursor: pointer;
height: 10px;
min-width: 10px;
width: 10px;
}<div class="example">
Example with short Text
<div class="component">
<div class="line"></div>
<div class="content">
<div class=label>aaaaaaaa</div>
<div class=label>bbbbbbbb</div>
</div>
<div class="icon">X</div>
</div>
<br>
Example with long Text
<div class="component">
<div class="line"></div>
<div class="content">
<div class=label>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class=label>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnnnnnnnnn</div>
</div>
<div class="icon">X</div>
</div>
</div>Just Need to add overflow: hidden; On the .content class
.example {
display: flex;
flex-direction: column;
}
.component {
max-width: 250px;
min-width: 100px;
width: auto;
height: 40px;
background-color: grey;
cursor: default;
display: flex;
flex-direction: row;
}
.line {
width: 2px;
min-width: 2px;
height: 30px;
background-color: black;
margin-top: 5px;
}
.content {
height: 100%;
width: 100%;
padding: 7px 10px 7px 5px;
overflow: hidden;
}
.label {
line-height: 13px;
font-size: 13px;
height: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #c4c7cc;
width: 100%;
}
.icon {
color: black;
float: left;
margin-right: 7px;
cursor: pointer;
height: 10px;
min-width: 10px;
width: 10px;
}<div class="example">
Example with short Text
<div class="component">
<div class="line"></div>
<div class="content">
<div class=label>aaaaaaaa</div>
<div class=label>bbbbbbbb</div>
</div>
<div class="icon">X</div>
</div>
<br>
Example with long Text
<div class="component">
<div class="line"></div>
<div class="content">
<div class=label>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class=label>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnnnnnnnnn</div>
</div>
<div class="icon">X</div>
</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加