CODEWITHSUNDEEP
javascripthtmlcssstyleshide
Marc Vila Tornamorell
Marc Vila Tornamorell

Reputation: 57

Is there a way to hide a div that doesn't fit inside his parent div?

I'm working with a resizable grid (gridstackjs) and I want to hide the text inside when it overflows the cell. I've done it with a DIV containing the text inside the cell DIV.

I've tried with css and media queries but can't find the correct way. There is a image:

enter image description here

Thank you, hope I explained myself.

.elemento {
    overflow: hidden;
}
.texto-elementos {
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px #474747;
    overflow: hidden;
}
.iconoAlturas {
    margin-top: -22px;
    margin-right: 8px;
    float: right;
}
<div class="grid-stack-item-content elemento ui-draggable-handle">
<div class="mt-2 texto-elementos">U1001</div><div class="iconoAlturas"><i class="fas fa-layer-group"></i></div></div>

Upvotes: 0

Views: 1191

Answers (3)

Sivak
Sivak

Reputation: 168

Add the following CSS style on the tag that isn't working

overflow: hidden

Upvotes: 0

Dhruvi Makvana
Dhruvi Makvana

Reputation: 905

Use media query for respective device size with display: none property.

@media only screen and (respective screen size){
   .[class] {
      display:none
   }
}

Upvotes: 0

anji5h
anji5h

Reputation: 104

The property 'overflow: hidden' will only hide the overflowed content. To hide the element on page resize you need to use the 'display: none' property along with media queries.

 @media only screen and (max-width:300px){
      .texto-elementos {
         display:none
      }
}

This will hide your text element when the screen width is less than 300px. I think it will help you.

Upvotes: 1

Related Questions