All geek questions in one place

Intentional overlapping maps in Bootstrap - text is thrown to the side

I have a design that I code using Bootstrap, which has overlapping maps. The layout works for me (with a little help from jQuery), but the text on the upper maps is discarded towards the lower map.

I'm at a standstill about how I can get the contents of the top card. (i.e. XXX) are correctly aligned in the corresponding top cards.

Here is a screenshot of what it looks like today.

image

I would like it to look like this:

enter image description here

Here is the code:

<!DOCTYPE html>
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Overlap</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
  background-color: #81DFE8;
}

.background-card {
  background: #EFEFEF;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
  margin-top: 60px;
  padding: 0 30px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
  z-index:-1;        
}
.card {
  background: #EFEFEF;
  margin: 15px 30px;
  padding: 30px 75px 45px 50px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
}

#card-entity-header {
  padding: 30px 0;
}

.card-title {
  font-size: 32px;
}

.card-subtitle1 {
  font-size: 24px;
}
.card-subtitle1 small {
  font-size: 80%;
  font-style: italic;
  white-space: nowrap;
}
</style>


</head>
<body>


<div>
    <div class="container"> 

        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-7 background-card">
                    <div id="card-entity-header" "="">
                        <div class="card-title">Title</div>
                        <div class="card-subtitle1">Sub-Title</div>
                    </div>
                    <div id="page-cards-background">
                        <div>&nbsp;</div>
                    </div>
                </div>  
                <br><br>
                <div id="page-cards">
                    <div class="card">
                        xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                    </div>      
                    <div class="card">
                        xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                        888<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<script>

$("#page-cards").css("padding-top", 60 + parseInt($("#card-entity-header").height()));
$("#page-cards-background").height( parseInt($("#page-cards").height()) + 45);

</script>


</body></html>
+4
source share
2 answers

I tried with some changes in HTML. Check this out: https://jsfiddle.net/hLs7sppd/

body {
  background-color: #81DFE8;
}

.background-card {
  background: #EFEFEF;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
  margin-top: 60px;
  padding: 0 30px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
  z-index: -1;
}

.card {
  background: #EFEFEF;
  margin: 15px 30px;
  padding: 30px 75px 45px 50px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
}

#card-entity-header {
  padding: 30px 0;
}

.card-title {
  font-size: 32px;
}

.card-subtitle1 {
  font-size: 24px;
}

.card-subtitle1 small {
  font-size: 80%;
  font-style: italic;
  white-space: nowrap;
}
<div>
  <div class="container">

    <div class="row">
      <div class="col-sm-12">
        <div class="col-sm-7 background-card">
          <div id="card-entity-header">
            <div class="card-title">Title</div>
            <div class="card-subtitle1">Sub-Title</div>
          </div>
          <div id="page-cards-background" style="z-index: 1; height: 687px;">
            <div id="page-cards" style="z-index: 999;">
              <div class="card">
                xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>
              </div>
              <div class="card">
                xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br> 888
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>
              </div>
            </div>
          </div>
        </div>
        <br>
        <br>

      </div>
    </div>

  </div>
</div>
0

... .

, , , , . : ; css.background-card.

, .., .

:

enter image description here

:

<!DOCTYPE html>
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Overlap</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
  background-color: #81DFE8;
}

.background-card {
  background: #EFEFEF;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
  margin-top: 60px;
  padding: 0 30px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
  z-index:-1;  
  position:absolute;      
}
.card {
  background: #EFEFEF;
  margin: 15px 30px;
  padding: 30px 75px 45px 50px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
}

#card-entity-header {
  padding: 30px 0;
}

.card-title {
  font-size: 32px;
}

.card-subtitle1 {
  font-size: 24px;
}
.card-subtitle1 small {
  font-size: 80%;
  font-style: italic;
  white-space: nowrap;
}
</style>


</head>
<body>


<div>
    <div class="container"> 

        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-7 background-card">
                    <div id="card-entity-header" "="">
                        <div class="card-title">Title</div>
                        <div class="card-subtitle1">Sub-Title</div>
                    </div>
                    <div id="page-cards-background">
                        <div>&nbsp;</div>
                    </div>
                </div>  
                <br><br>
                <div id="page-cards">
                    <div class="card row">
                            <h3>Card Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper ullamcorper hendrerit. Cras ut ligula eu lorem finibus porta. Nunc lacinia, ex eu varius condimentum, ipsum enim aliquam magna, quis fringilla quam nunc nec erat.</p>
                            <div class="form-group">
                                <label class="col-sm-12">Label</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-12 required">Label </label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl2">
                                </div>
                            </div>
                    </div>      
                    <div class="card row">                              
                            <div class="form-group">
                                <label class="col-sm-12">Label</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-12 required">Label </label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl2">
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<script>

$("#page-cards").css("padding-top", 60 + parseInt($("#card-entity-header").height()));
$("#page-cards-background").height( parseInt($("#page-cards").height()) + 45);

</script>


</body></html>
0

Source: https://habr.com/ru/post/1681729/

More articles:


All Articles