Hide entire first elements until you don’t leave the div

Question

Hide entire first elements until you don’t leave the div

Asked 5 years, 1 month ago

Viewed 41 times

1

I’m having a problem with css, I don’t know how to hide the first element (since it’s on float: rigth, it is the other way around) in full until they fit in the div leaving out.

:root {
  --tema: #167c80;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Roboto, Arial, sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
}

.header {
  position: fixed;
  height: 45px;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  right: 0;
  box-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, 0.15);
  z-index: 4;
  transition: top .3s;
  background: #fff;
}

.header h1 {
  position: absolute;
  margin: 0;
  height: 100%;
  font-size: 25px;
  color: var(--tema);
  font-weight: 500;
  left: 5px;
  line-height: 42px;
  width: 90px;
  transition: linear .3s all;
  cursor: pointer;
}

.header .upload-slide {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
  width: 0%;
  height: 100%;
  transition: linear .3s all;
  border-bottom: solid 2.5px var(--tema);
}

.menu-ico {
  width: 45px;
  height: 45px;
  position: absolute;
  padding: 3px 5px;
  cursor: pointer;
  left: -50px;
  transition: linear .3s all;
}

.menu-ico div {
  height: 3px;
  float: left;
  width: 100%;
  background: var(--tema);
  margin: 4.5px 0px;
}

.header .botoes {
  position: absolute;
  right: 45px;
  height: 100%;
  width: 100%;
  max-width: calc(100% - 158px);
}

.header .botoes label {
  width: fit-content;
  height: 45px;
  font-size: 30px;
  padding: 5px 0px;
  float: right;
  margin: 0px 7px;
  text-align: center;
  color: var(--tema);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.header label[for=chk-perfil] {
  width: 45px;
  height: 45px;
  font-size: 35px;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  right: 0;
}

.header label[for=chk-perfil] img {
  object-fit: cover;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  border: solid transparent 5px;
}

.header .botoes label i {
  position: absolute;
  font-size: 12px;
  bottom: 0px;
  right: 0;
  margin: 5px;
  height: 20px;
  width: 20px;
  background: var(--tema);
  border-radius: 50%;
  box-shadow: 0.5px 0.5px 2.5px rgba(0, 0, 0, 0.15);
  padding: 3px;
  display: none;
  color: #fff;
}

.header .botoes label span {
  float: left;
  width: 100%;
  height: 100%;
}

.header .botoes label p {
  height: 100%;
  width: 100%;
  text-align: center;
  position: absolute;
  margin: 0px;
  font-size: 20px;
  line-height: 42px;
  opacity: 0;
}

.header .botoes .transfers {
  display: none;
}

.header .address_bar {
  float: left;
  width: 100%;
  height: 100%;
  padding: 5px 0px;
  max-width: calc(100% - 175px);
}

.header .address_bar a {
  height: 35px;
  float: right;
  position: relative;
}

.header .address_bar a button.bar {
  height: 100%;
  position: relative;
  float: left;
  width: fit-content;
  text-align: left;
  border: none;
  background: transparent;
  color: #222;
  border-bottom: solid 1.5px transparent;
  min-width: 25px;
}

<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<header class="header">
  <label class="menu-ico" for="chk-menu">
        <div></div>
        <div></div>
        <div></div>
    </label>
  <h1>Nuvem</h1>
  <!-- barra de upload-->
  <div class="upload-slide"></div>
  <!-- botao perfil -->
  <label for="chk-perfil">
        <img src="<?php echo $_SESSION['nc_data'][3]; ?>" />
    </label>
  <!-- botoes do explorer-->
  <div class="botoes for_explorer">
    <!-- Barra de endereco-->
    <div class="address_bar">
      <a>
        <button class="ion-chevron-left sub_address bar"></button>
        <button class="bar" value="">D:</button>
      </a>
      <a>
        <button class="ion-chevron-left sub_address bar"></button>
        <button class="bar" value="">Media</button>
      </a>
      <a>
        <button class="ion-chevron-left sub_address bar"></button>
        <button class="bar" value="">Musicas</button>
      </a>
      <a>
        <button class="bar" value="">NCS</button>
      </a>
    </div>
    <!-- botoes -->
    <label class="transfers" for="chk-copymove">
            <i></i>
            <span class="ion-android-clipboard"></span>
        </label>
    <label class="uploads" for="chk-upload">
            <p></p>
            <i></i>
            <span class="ion-upload"></span>
        </label>
    <label class="folder">
            <span class="ion-android-folder-open"></span>
        </label>
    <label class="list" for="chk-itens">
            <span class="ion-navicon"></span>
        </label>
    <label class="back">
            <span class="ion-arrow-left-b"></span>
        </label>
  </div>
</header>

how it is, and how I’d like it to stay:

Cara I think I could understand the problem, but without the complete code I can’t help you much, you have to put the code of the menu and the icons of the right too, without them can only try to answer you in the kick...

– hugocsl

2019/05/13 at 10:59
Okay, but it’s gonna get a little big.

– João Victor

2019/05/13 at 12:08

1 answer

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-05-13T13:39:06+00:00

Follows an alternative

First take out the float-right of A and put in HTML the correct order, starting with NSC. Then take width 100% of address_bar and put overflow: hidden;. And now cloque display:flex in the div .botoes and align the items at the end of container with justify-content: flex-end;

Follow the image code above

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        :root {
            --tema: #167c80;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-family: Roboto, Arial, sans-serif;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            outline: 0;
        }

        .header {
            position: fixed;
            height: 45px;
            width: 100%;
            margin: 0;
            padding: 0;
            left: 0;
            top: 0;
            right: 0;
            box-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, 0.15);
            z-index: 4;
            transition: top .3s;
            background: #fff;
        }

        .header h1 {
            position: absolute;
            margin: 0;
            height: 100%;
            font-size: 25px;
            color: var(--tema);
            font-weight: 500;
            left: 5px;
            line-height: 42px;
            width: 90px;
            transition: linear .3s all;
            cursor: pointer;
        }

        .header .upload-slide {
            position: absolute;
            right: 0;
            bottom: 0;
            top: 0;
            opacity: 0;
            width: 0%;
            height: 100%;
            transition: linear .3s all;
            border-bottom: solid 2.5px var(--tema);
        }

        .menu-ico {
            width: 45px;
            height: 45px;
            position: absolute;
            padding: 3px 5px;
            cursor: pointer;
            left: -50px;
            transition: linear .3s all;
        }

        .menu-ico div {
            height: 3px;
            float: left;
            width: 100%;
            background: var(--tema);
            margin: 4.5px 0px;
        }

        .header .botoes {
            position: absolute;
            right: 45px;
            height: 100%;
            width: 100%;
            max-width: calc(100% - 158px);
            display: flex;
            justify-content: flex-end;
        }

        .header .botoes label {
            width: fit-content;
            height: 45px;
            font-size: 30px;
            padding: 5px 0px;
            float: right;
            margin: 0px 7px;
            text-align: center;
            color: var(--tema);
            cursor: pointer;
            overflow: hidden;
            position: relative;
        }

        .header label[for=chk-perfil] {
            width: 45px;
            height: 45px;
            font-size: 35px;
            color: #fff;
            cursor: pointer;
            overflow: hidden;
            position: absolute;
            right: 0;
        }

        .header label[for=chk-perfil] img {
            object-fit: cover;
            height: 45px;
            width: 45px;
            border-radius: 50%;
            border: solid transparent 5px;
        }

        .header .botoes label i {
            position: absolute;
            font-size: 12px;
            bottom: 0px;
            right: 0;
            margin: 5px;
            height: 20px;
            width: 20px;
            background: var(--tema);
            border-radius: 50%;
            box-shadow: 0.5px 0.5px 2.5px rgba(0, 0, 0, 0.15);
            padding: 3px;
            display: none;
            color: #fff;
        }

        .header .botoes label span {
            float: left;
            width: 100%;
            height: 100%;
        }

        .header .botoes label p {
            height: 100%;
            width: 100%;
            text-align: center;
            position: absolute;
            margin: 0px;
            font-size: 20px;
            line-height: 42px;
            opacity: 0;
        }

        .header .botoes .transfers {
            display: none;
        }

        .header .address_bar {
            float: left;
            /* width: 100%; */
            height: 100%;
            padding: 5px 0px;
            max-width: calc(100% - 175px);
            overflow: hidden;
        }

        .header .address_bar a {
            height: 35px;
            /* float: right; */
            position: relative;
        }

        .header .address_bar a button.bar {
            height: 100%;
            position: relative;
            float: left;
            width: fit-content;
            text-align: left;
            border: none;
            background: transparent;
            color: #222;
            border-bottom: solid 1.5px transparent;
            min-width: 25px;
        }
    </style>
</head>

<body>

    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
    <header class="header">
        <label class="menu-ico" for="chk-menu">
            <div></div>
            <div></div>
            <div></div>
        </label>
        <h1>Nuvem</h1>
        <!-- barra de upload-->
        <div class="upload-slide"></div>
        <!-- botao perfil -->
        <label for="chk-perfil">
            <img src="<?php echo $_SESSION['nc_data'][3]; ?>" />
        </label>
        <!-- botoes do explorer-->
        <div class="botoes for_explorer">
            <!-- Barra de endereco-->
            <div class="address_bar">
                <a>
                    <button class="bar" value="">NCS</button>
                </a>
                <a>
                    <button class="ion-chevron-left sub_address bar"></button>
                    <button class="bar" value="">Musicas</button>
                </a>
                <a>
                    <button class="ion-chevron-left sub_address bar"></button>
                    <button class="bar" value="">Media</button>
                </a>
                <a>
                    <button class="ion-chevron-left sub_address bar"></button>
                    <button class="bar" value="">D:</button>
                </a>
            </div>
            <!-- botoes -->
            <div>
                <label class="transfers" for="chk-copymove">
                    <i></i>
                    <span class="ion-android-clipboard"></span>
                </label>
                <label class="uploads" for="chk-upload">
                    <p></p>
                    <i></i>
                    <span class="ion-upload"></span>
                </label>
                <label class="folder">
                    <span class="ion-android-folder-open"></span>
                </label>
                <label class="list" for="chk-itens">
                    <span class="ion-navicon"></span>
                </label>
                <label class="back">
                    <span class="ion-arrow-left-b"></span>
                </label>
            </div>
        </div>
    </header>

</body>

</html>