We Keep Coding

Full width div triggered by onclick

My sandbox on JSFIDDLE
When 'OPEN' is clicked, the content div should expand to full width, but it ended up expanding by 100px width like on the red box. I tried to set width: 100%, in the gray box div and it didn't work.
In the .content class, I had the width set to 100vw without margin: 0 auto and it expanded 100% width to the right side, not screen-fulled size.
[]
I'm testing this function before I deploy it on my website.
jQuery -
$(".openit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});
HTML -
<div class="wrapper">
<div class="back">BG
<div class="expandBG">
<div class="openit">OPEN</div>
<div class="flex-col">
<div class="closeit">CLOSE</div>
<div class="content text" style="display: none;">
<div>(CONTENT HERE)</div>
</div>
</div>
</div>
</div>
</div>
CSS -
body {
background-color: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
text-align: center;
border: solid red 1px;
}
.back {
position: relative;
color: #fff;
width: 110px;
height: 110px;
background-color: red;
margin: 0 auto;
text-align: center;
display: block;
}
.expandBG {
display: block;
width: 100px;
height: 100px;
transition: ease 0.3s;
background-color: #192D38;
overflow: hidden;
margin: 0 auto;
bottom: 0;
text-align: center;
font-family: sans-serif;
color: #fff;
position: relative;
}
.flex-col {
flex-direction: column;
}
.openit {
display: block;
text-align: center;
height: 100%;
cursor: pointer;
margin: 0 auto;
}
.closeit {
display: block;
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
}
.text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -25px;
}
.content {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
}

It's because of the div with a class name back. increase the width of that div to 100% when opneit is clicked and then back to its original size when closeit is clicked.
// add this to your CSS file
.w-full {
width: 100%
}
then include these two lines in your javaScript file
$(".openit").on("click", function() {
$(".back").addClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".back").removeClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});

Buttons and text won't stay within container

I have a container with some text and buttons that are responsive to the screen size, but they extend off the side of the container when there's not enough room. Someone helped me fix it by adding a clamp parameter to the font-size, but after I made a few adjustments to other parts of my code, now the problem is back.
Could someone help me figure out what I need to do to keep the buttons and text within the container? I thought I needed to adjust the min values of the clamp parameter, but that doesn't seem to change anything. It doesn't seem like the text and buttons even recognizes the parent container, they just kind of do what they want.
I have the btn-grid container set to 20% of the height of the chat_bubble, and I need the text to stay within that remaining 80% of the container.
Besides that, I'm getting a warning from WebStorm that several of my font-size declarations over-write each other, but I can't figure out which one is supposed to take priority to avoid being redundant.
Also I'm trying to add a 5vw or percent margin/padding to the top and right of the main container, but I notice that when I do a scrollbar appears even if I do overflow: hidden. Someone told me this is because of margin collapsing, but I can't figure out how to prevent that from happening because I don't see how the nested containers are taking up so much space.
This is the codepen:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
And this is my code:
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 1.5rem, 2rem);
}
.container {
width: 90%;
height: 90%;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally */
align-items: flex-end;
padding-left: 5vw;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
height: 70vh; /* Make chat bubble 70% of viewport height */
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}

If you remove the explicit height: 70vh declaration on #chat_bubble and instead use min-height: 70vh to ensure that the height is at minimum 70% of the viewport height, the content wont overflow. Now, the text and buttons won't ever overflow the parent container as there isn't an explicit height set on the parent #chat_bubble. The reason the buttons overflow before this change is because the explicit width of 70vh is set on #chat_bubble and any nested content that is long enough to extend outside of the parent container will do so. I added a top/bottom margin of 5vw and auto left/right margins, you can adjust these as you see fit.
After reading your comments below, the clamp() usage is part of the problem for the text taking up so much space on the screen and forcing the #chat_bubble to have a large height. The syntax is clamp(min, flex unit, max) and your using 1.5rem for the 2nd arg, instead use a viewport unit like 3vw or anything with vw as the middle argument which is the "scale" or "flex-unit" so to speak.
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const emailContainerElement = document.getElementById('email-container')
const submitEmailButton = document.getElementById('submit-email-btn')
const email = document.getElementById('email')
const chartContainer = document.getElementById('chart')
startButton.classList.add('hide')
emailContainerElement.classList.add('hide')
questionContainerElement.classList.remove('hide')
questionElement.innerText = 'The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.'
const button_no = document.createElement('button')
button_no.innerText = 'No'
button_no.classList.add('btn')
answerButtonsElement.appendChild(button_no)
const button_yes = document.createElement('button')
button_yes.innerText = 'No'
button_yes.classList.add('btn')
answerButtonsElement.appendChild(button_yes)
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 3vw, 2rem);
}
.container {
width: 90%;
height: auto;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally (this is default flex-direction)*/
align-items: flex-end;
margin: 5vw auto;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
min-height: 70vh; /* Make chat bubble 70% of viewport height at minimum*/
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test title</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Benne&family=Fjalla+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="chat_bubble" class="container">
<div id="email-container" class="hide">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit-email-btn" class="btn">Submit</button>
</div>
<div id="question-container" class="hide">
<div id="question" class="question-text">Question</div>
<div id="answer-buttons" class="btn-grid">
</div>
</div>
<div id="chart" class="hide"></div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
</div>
</div>
<div id="character_image">
<img id="char_1" src="https://i.imgur.com/7eYWqqo.png" alt=""></img>
<img id="char_2" src="https://i.imgur.com/ixM8TtU.png" alt=""></img>
</div>
</div>
<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
</body>
</html>

How to have a tab containing flexible height menu fixed at bottom of window and slide up on click using jQuery?

I tried coding it myself based on research on the internet. I was able to get it fixed at the bottom. When clicking, it does slide out the menu; but it slides out downwards when it should have pushed the tab upwards to display the menu. If I use negative margin and simply change bottom: -150 to bottom: 0px on click, it does produce the desired behavior by sliding it up from past the bottom of the window and it displays correctly. But it means the menu is pushing the page past the bottom of the page rather than simply being hidden. So when it's "hidden", one can simply scroll down and see the full menu which shouldn't be the case.
So rather than using bottom to manipulate it, I tried using $(this).show("slide"). The menu came out looking distorted thanks to using the sliding animation.
Here's the snippet:
var supTabState = false;
$("#dccontainer").css('bottom', '-150px');
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
supTabState = !supTabState;
if (supTabState) {
// $("#dccontainer").css('bottom', '0px');
$(this).show("slide", {
direction: "down"
}, 1000);
} else {
// $("#dccontainer").css('bottom', '-150px');
$(this).show("slide", {
direction: "up"
}, 1000);
}
});
#dccontainer {
position: absolute;
bottom: 0;
width: 300px;
left: 50%;
height: 200px;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I've tried various techniques. I've tried toggling with CSS alone using CSS animation and toggleClass, I've tried using slide, and I've tried using slideToggle. I also tried using display: block; instead of using flexbox. Both had the same effect. Researching the internet yielded several possible solutions (which I've tried, but all came out with the same result), and those usually weren't based on an element being fixed at bottom of window. The only one that came closest to what I was looking for was this:
http://atomicrobotdesign.com/blog_media/toggleslide_multiple.html
But strangely, when I attempted to use the same code that used, nothing happened. Clicking did not bring up the menu. I'm at a loss at this point. Where am I going wrong?
This is my latest attempt (using above code): https://codepen.io/doncullen/pen/JjdrxzY

To answer your question Where am I going wrong: you're specifying a fixed height of 200px on #dccontainer. Specifying a fixed height to the container renders the jQuery's slideToggle useless. jQuery's slideToggle animates the height of the given element, and in your case, you're animating #dcsupportcontainer. Even though you're animating the height of #dcsupportcontainer to 0px using slideToggle, the whole support block will still remain 200px in height. This causes makes the whole block not to move down when the #dcsupportcontainer is gone. You can, of course, manually calculate and assign the new bottom value to #dccontainer, but that's a real hassle and really unintuitive.
Not wanting to calculate the bottom value myself, I will not set a height to #dccontainer and just let its height be. It will set its height to all its children's requirements (the default value is auto). Furthermore, instead of using fixed, you used absolute. You should use fixed here as you want the support block to always be visible (even when the user scrolls down); this means that you should position it based on your viewport and not an element (read more about positioning here). I also did minor adjustments on your CSS styles so that it's a tad more concise. One last thing, I suggest that you revisit flexbox here and here to utilise it better.
Here's a working solution:
// First time accessing, hide the support buttons section
$('#dcsupportcontainer').hide()
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500)
});
* {
box-sizing: border-box;
margin: 0;
}
body {
min-width: 100vw;
min-height: 100vh;
}
#dccontainer {
position: fixed;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 50vw;
min-width: 200px;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}
#dccontainer * {
padding: 7px 20px;
text-align: center;
}
#dcsupporttab {
font-weight: bold;
border-radius: 5px 5px 0 0;
background: #121212;
color: #ffffffee;
cursor: pointer;
}
#dcsupportcontainer {
border: 1px solid #121212;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>

Just take the fixed height from your main container #dccontainer, and everything will be fine. You should also remove a few lines of your javascript code to fix everything. That fixed height of dccontainer makes the whole nav to stand 200px up from the bottom of your page and that makes you use more jQuery to fix it at the bottom. Remember that the bottom: 0px will set the bottom of your element at the 0px bottom of its container.
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
});
#dccontainer {
position: absolute;
bottom: 0px;
width: 300px;
left: 50%;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>

Styling a multi-line ellipsis (...)

I'm trying to style the ellipsis (...) of a 3 line piece of text that, when clicked on, reveals the full amount of text using jQuery. Currently I've been able to create a multi-line ellipsis on 3 lines for webkit browsers, but it isn't compatible with all browsers like IE & Firefox but works on Chrome & Edge.
With the influence of this post, I can only style the ellipsis when on one line but not 3 lines of text, making sure it overrules the other CSS.
Does anyone know how to apply this styling but to an ellipsis on the 3rd line? My attempted code is below:
$('.flex-text.description').click(function() {
if ($(this).css('-webkit-line-clamp') == '3') {
$(this).css('-webkit-line-clamp', 'initial');
} else {
$(this).css('-webkit-line-clamp', '3');
}
});
.sad-flex {
display: flex;
flex-flow: row wrap;
}
.flex-item {
width: 23.5%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 2%
}
.flex-item:nth-of-type(n+5) {
margin-top: 2%
}
.flex-item-image-link {
width: 100%
}
.flex-item img {
width: 100%;
background-size: cover;
background-position: center;
}
.flex-item,
.flex-text-content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1em;
text-align: center;
position: relative;
font-family: arial;
/* perhaps remove */
justify-content: flex-start;
}
.flex-text-content {
padding: 10px;
width: 100%;
}
.flex-item .flex-text.header {
margin-bottom: 0;
font-weight: 700;
width: 100%;
}
.flex-item .flex-text.header a {
color: #000
}
.flex-item .flex-text.price {
padding-top: 20px;
font-size: 1.4em;
color: grey;
}
.flex-item .flex-text.description {
font-size: 1em;
padding-top: 20px;
overflow: hidden;
width: 100%;
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
/* Other ellipsis method: */
/* max-height: 6em; */
/* limits to 3 lines of text */
/* ellipsis below: */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
/* max-width: 650px; */
/* solves the flex white-space nowrap width pushout problem */
/* Limit to 3 lines, then ellipsis */
}
.flex-item .flex-btn {
border: none;
outline: 0;
padding: 12px;
color: #fff;
background-color: #000;
cursor: pointer;
width: 100%;
font-size: 1.3em;
margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover {
opacity: 0.7
}
.flex-item ul {
text-align: left
}
#media (max-width: 767px) {
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 3%
}
.flex-item {
width: 48.5%
}
.flex-item:not(:nth-of-type(even)) {
margin-left: 0
}
.flex-item:nth-of-type(n+3) {
margin-top: 3%
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sad-flex">
<div class="flex-item">
<a class="flex-item-image-link" href="#" data-galinkprocessed="true"><img src="https://cml.sad.ukrd.com/tp/3x2/" style="background-image:url(https://cml.sad.ukrd.com/image/219581.jpg)"></a>
<div class="flex-text-content">
<h2 class="flex-text header">Pine Cone</h2>
<span class="flex-text price">$81.52</span>
<span class="flex-text description">A delightful cone made of genuine North American pine, coated with sticky ooze for that authentic natural experience and some more text to just go here anyway and some more text to just go here anyway and some more text to just go here anyway.</span>
</div>
<button onclick="location.href='#'" class="flex-btn">Add to Cart</button>
</div>
</div>
I've made a codepen demo to demonstrate this: https://codepen.io/anon/pen/wRObXd

How to make square in Twitter Bootstrap around the item?

I am trying to make some web page as show in image .I am able to make almost 90%.But I have one issue
how to make square as shown in image (a square which have triangle in bottom.I know we can make square using border .but how to make triangle in that bottom triangle
how to make contend scrollable mean my contend it not scrolling I already use overflow:auto and scroll
)
.bg {
background: #597A4D!important;
width: 100%!important;
}
.nav_bar {
background: #597A4D!important;
border-style: none;
height: 44px;
border: 0px!important;
border-radius: 0px!important;
}
.display_menu li a{
font-size: 1.2em!important;
color: #ffffff!important;
}
ul.display_menu li:last-child{
background:#3C86D7;
}
.rowClass {
display: block;
margin-top: 3%;
}
.rowClass >div {
padding: 3em;
text-align: center;
}
.text_row div{
display: block;
border: 1px ;
padding: auto;
color: #ffffff;
margin-top: 3%;
}
.rowClass span {
display: block!important;
color: #ffffff;
}
.logo_image{
width: 60px;
height: 60px;
}
.email_div label {
color: #ffffff;
font-weight: bold;
text-align: center;
}
.email_div{
width: 50%;
margin: auto;
}
.email_div label {
}
.email_div input {
background: transparent;
border: 1px solid #3C86D7;
display: inline;
width: 50%;
}
.email_div button {
display: inline;
}
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
Here is my plunker: http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview

just do this
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 200px;
}
or desired height instead of
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
it will start scrolling because it will only scroll if data is overflowing
and for shape this article may help but you don't need to use any thing just use bootstrap tooltip

Try this for the overflowing
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 250px;
}
to get an idea to make those box with shapes,
See this DEMO