CODEWITHSUNDEEP
csstwitter-bootstrap
Randall
Randall

Reputation: 2858

How to make child element inherit parent's width in Bootstrap 4

How to make child element inherit parent's width using Bootstrap 4.

I need to fix download_resume block's width.

I'm using two primary js script's.

1.First function change img like hover effect

2.Second function adding sticky class to our empty_row block make it position fixed

Please look this code in wide screen devices or in codepen for understand the problem and what I want to realize

// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");

avatarQuantumBreak.style.opacity = "0";

let hover = () => {
	avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
	avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
  let w = document.documentElement.clientWidth;
  if (w > 940) {
  	 var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  	 scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
  }
}
.other_block {
  background-color:lightblue;
}
.main_wrap {
  margin-top:15px;
  background-color:pink;
  height:600px;
}

.home_link , .main_text {
	color: #fff;
	font-size: 1.5em;
}
.left_block {
  /*height: 60%;*/
  padding: 30px 20px 20px;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2); 
}
.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
  border-radius: 50%;
  display: inline-block;
}
.info {
  margin-top: 33px;
}
.text_uppercase {
  text-transform: uppercase;
  color: #fff;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 15px;
}
.text_muted {
  text-align: center;
  opacity: 0.65;
}
.social_links {
  display: flex;
  justify-content: center;
}
.social_links li {
  list-style-type: none;
  margin: 5px 12px;
  vertical-align: middle;
}
.social_links li a {
  color: #fff;
  cursor: pointer;
  transition: all .2s ease-out;
  background-color: transparent;
}
.social_links li a i {
  font-size: 1.25em;
  transition: all .2s ease-out;
}
.social_links li a i:hover {
  opacity: 0.65;
}
.download_resume {
  position:absolute;
  width: 100%;
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}

.text_widget {
  vertical-align: middle;
}
.text_widget a {
  background-color: #DEC746 !important;
  border-color: #DEC746 !important;
  color: #000 !important;
  font-size: 15px !important;
  padding: 12px 30px !important;
  border-radius: 35px !important;
}
center {
  display: block;
  text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
  box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
  font-weight: 700 !important;
}
.sticky {
  position: fixed !important;
  top: 2%;
  width: 285px;
}
<div class="container">
<div class="row justify-content-between">
  <div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
            <div class="avatar" onmouseover="hover();" onmouseout="normal();">
              <span class="avatar_simple">
                <img  src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
              </span>
              <span class="avatar_quantum_break">
                <img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
              </span>
            </div>
            <div class="info">
              <h2 class="text_uppercase">Sergio Ramos</h2>
              <p class="text_muted">Front End Developer</p>
              <ul class="social_links">
                <li>
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-github"></i>
                  </a>
                </li>
              </ul>
            </div>
            <div class="download_resume">
              <div class="text_widget">
                <center>
                  <a href="#" class="btn btn-primary btn-lg btn_link">Download CV</a>
                </center>
              </div>
            </div>
          </div></div>
  <div class="col-lg-8 col-xl-8 other_block">
    <div class="main_wrap">text</div>
  </div>
</div>
</div>

Upvotes: 0

Views: 3711

Answers (2)

adprocas
adprocas

Reputation: 1913

Setting the width to inherit isn't the best solution. When you don't have "sticky" on it does things you don't expect.

I've added an extra div to wrap your top section in question. You're really only concerned about the padding staying for that top section with your picture when you move from sticky to non-sticky. This separates it from the resume download button. Then you don't need to specify any width on that div, as it will work like it is supposed to.

HTML (I've added the "left-block-padding" div)

<div class="container">
<div class="row justify-content-between">
  <div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
        <div class="left-block-padding">
            <div class="avatar" onmouseover="hover();" onmouseout="normal();">
              <span class="avatar_simple">
                <img  src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
              </span>
              <span class="avatar_quantum_break">
                <img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
              </span>
            </div>
            <div class="info">
              <h2 class="text_uppercase">Sergio Ramos</h2>
              <p class="text_muted">Front End Developer</p>
              <ul class="social_links">
                <li>
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa fa-github"></i>
                  </a>
                </li>
              </ul>
            </div>
    </div>
            <div class="download_resume">
              <div class="text_widget">
                <center>
                  <a href="#" class="btn btn-primary btn-lg btn_link">Download CV</a>
                </center>
              </div>
            </div>
          </div></div>
  <div class="col-lg-8 col-xl-8 other_block">
    <div class="main_wrap">text</div>
  </div>
</div>
</div>

CSS (added .left-block-padding and removed position:absolute; and width: 100%; from .download_resume

.other_block {
  background-color:lightblue;
}
.main_wrap {
  margin-top:15px;
  background-color:pink;
  height:600px;
}

.home_link , .main_text {
    color: #fff;
    font-size: 1.5em;
}
.left_block {
  /*height: 60%;*/
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2); 
}
.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
  border-radius: 50%;
  display: inline-block;
}
.info {
  margin-top: 33px;
}
.text_uppercase {
  text-transform: uppercase;
  color: #fff;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 15px;
}
.text_muted {
  text-align: center;
  opacity: 0.65;
}
.social_links {
  display: flex;
  justify-content: center;
}
.social_links li {
  list-style-type: none;
  margin: 5px 12px;
  vertical-align: middle;
}
.social_links li a {
  color: #fff;
  cursor: pointer;
  transition: all .2s ease-out;
  background-color: transparent;
}
.social_links li a i {
  font-size: 1.25em;
  transition: all .2s ease-out;
}
.social_links li a i:hover {
  opacity: 0.65;
}
.download_resume {
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}

.text_widget {
  vertical-align: middle;
}
.text_widget a {
  background-color: #DEC746 !important;
  border-color: #DEC746 !important;
  color: #000 !important;
  font-size: 15px !important;
  padding: 12px 30px !important;
  border-radius: 35px !important;
}
center {
  display: block;
  text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
  box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
  font-weight: 700 !important;
}
.sticky {
  position: fixed !important;
  top: 2%;
  width: 285px;
}

.left-block-padding {
  padding: 30px 20px 20px;
}

JS (unchanged)

// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");

avatarQuantumBreak.style.opacity = "0";

let hover = () => {
    avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
    avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
  let w = document.documentElement.clientWidth;
  if (w > 940) {
     var scrolled = window.pageYOffset || document.documentElement.scrollTop;
     scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
  }
}

https://codepen.io/adprocas/pen/QmLjJM

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

Use width:inherit to inherit parent element's width

.download_resume {
  position:absolute;
  width: inherit;
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}

Code sample - https://codepen.io/nagasai/pen/xWKGvW

Upvotes: 0

Related Questions