I am having difficulty trying to get Google Charts to adjust to the changes in page width when the scroll bar appears in Google Chrome. I am displaying this data in the Google Sheets sidebar (I believe has a width of 300px). The chart always goes to the outside of the parent div and ignores the right inner margin. When the scroll bar appears due to a longer page, the image should also adjust to maintain the proper right margin. I would like the right margin to be the same as the left. For text this seems to work fine, but not for images such as charts.
This image is the current output. The picture should have the same margin on the right as it does on the left. If the image is too wide, it should ideally adjust it's width to stay inside its container.
I have created the problem below using an image instead of a Google chart for simpler code.
Code.gs
function onOpen() {
SpreadsheetApp.getUi().createMenu("My Menu")
.addItem("My Item", "showForm")
.addToUi();
}
function include (filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function showForm() {
var htmlWidget = HtmlService.createTemplateFromFile('Form');
SpreadsheetApp.getUi().showSidebar(htmlWidget.evaluate().setTitle("My Form"));
}
Form.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Form-CSS'); ?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {'title':'How Much Pizza I Ate Last Night', 'width':'100%'};
var chart = new google.visualization.PieChart(document.getElementById('mychart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="wrap-collapsible">
<input id="collapsible1" class="toggle" type="checkbox">
<label for="collapsible1" class="lbl-toggle">Button 1</label>
<div class="collapsible-content">
<div class="content-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id sem urna. Donec nec elit eu turpis maximus aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed non libero laoreet, interdum lacus eu, egestas augue. Donec at semper velit. Cras ante turpis, ultricies non ante at, dapibus suscipit leo. Morbi quis ex quam. Sed feugiat nibh ac tempus facilisis. Praesent ullamcorper placerat libero, tempus gravida eros scelerisque vel. Pellentesque quis luctus velit, nec consequat est. Sed ac arcu a nisl viverra rutrum ut id ex. Vestibulum vel semper massa, sit amet accumsan mauris. Donec gravida augue magna, id laoreet dui rutrum ac. Sed et porta magna.</p>
</div>
</div>
</div>
<div class="wrap-collapsible">
<input id="collapsible2" class="toggle" type="checkbox">
<label for="collapsible2" class="lbl-toggle">Button 2</label>
<div class="collapsible-content">
<div class="content-inner">
<div id="mychart" style="width: auto; max-width: 100%;"></div>
</div>
</div>
</div>
</body>
</html>
Form-CSS:
<style>
#import url('https://fonts.googleapis.com/css2?family='Roboto'&display=swap');
body {
background-color: white;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.wrap-collapsible {
margin-bottom: 8px;
}
input[type='checkbox'] {
display: none;
}
.lbl-toggle {
display: block;
font-weight: bold;
font-family: 'Roboto', sans-serif;
font-size: 18px;
text-align: left;
padding: 5px 10px 5px;
color: black;
background: coral;
cursor: pointer;
border: 1px solid black;
transition: 0.2s ease-out;
}
.lbl-toggle::before {
content: '\25B6';
color: black;
font-weight: bold;
font-size: 12px;
float: right;
margin-top: 7px;
margin-left: 0px;
transition: transform 0.2s ease-out;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg);
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}
.toggle:checked+.lbl-toggle+.collapsible-content {
max-height: 300vh;
}
.collapsible-content .content-inner {
background: bisque;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 5px;
}
</style>
If you inspect the element, it is inside a div with a max width of 272. You have 2 ways to fix this:
You can either set it manually width="272" or you can use the code below which will automatically adjust the width of the picture.
Try:
<div >
<img src="https://www.w3schools.com/html/pic_trulli.jpg" style="
width: auto;
max-width: 100%;
overflow: hidden;">
</div>
Result:
Note: I have updated the code, I added overflow: hidden;
For more information: CSS: Overflow
Reduce the width in
<img src="https://www.w3schools.com/html/pic_trulli.jpg" width="300">
The above because the sidebar witdh is 300, so you have to substract the margin and padding
Related
Below is a <div> element with it's position property set to sticky:
<div style="position: sticky;"> </div>.
When I insert two sticky <div> elements in a page, they both stick to the top of the page, and stick, in that sense that sticky elements are working, however, they stick at the exact same spot and cover each other up. In my head I imagined that they would both get to the top of the page, when the user scrolls the page, and stick, but I thought they would stack, but as I stated, they don't, one just sits under the other.
Here is an extremely simplified version of my current project. I want the two blocks to stick, one right above the the other.
<html>
<body>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV ONE #1
</div>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV TWO #2
</div>
</body>
</html>
So my question is, how can I add two sticky <div> elements, to the same HTML document, and have one <div> stick to the top of the page when the user scrolls, and the other <div> stick to the bottom of the first <div>, rather than also sticking to the top of the page and covering the that stuck first, up?
To ensure that what I am saying is understood, I have added an interactive example.
Below, the example will show you what is happening within my project — Div Alpha is being covered by Div Beta, and I want Div Beta to stick to the bottom of Div Alpha, so that it doesn't block it.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #FF20B0;
background-color: #000000;
color: #FF20B0;
}
.div-beta {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #80E000;
background-color: #002040;
color: #80E000;
}
h1 {
color: #401480;
}
p.lorem-ipsum {
width: 350px;
font-size: 18px;
color: #001064
}
p.p-alpha {
font-size: 14px;
color: #FF20B0;
}
p.p-beta {
font-size: 14px;
color: #80E000;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-alpha">
DIV ALPHA
<p class="p-alpha">The other div covers me up, and I don't want to be covered up!</p>
</div>
<br>
<div class="div-beta">
DIV BETA
<p class="p-beta"> I don't want to cover the other div, but I do anyway :..(</p>
</div>
<!-- The Code Below is silly filler code that has been inserted so that the page will scroll up & down, which is required for observing the behavior of elements that have their "position" property set to "sticky" (i.e. "position: sticky;") -->
<br>
<br>
<br>
<br>
<h2>Lorem Ipsum Text</h2>
---
<p class="lorem-ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim praesent elementum facilisis leo
vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor condimentum. Sapien eget mi proin sed libero enim sed faucibus
turpis. Tortor at risus viverra adipiscing at. Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis
hendrerit. Lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et molestie
ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Convallis
posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus
venenatis lectus. Posuere urna nec tincidunt praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat vestibulum lectus mauris ultrices eros in. Pharetra vel turpis nunc eget lorem dolor. Blandit
turpis cursus in hac habitasse platea dictumst quisque. Nisi porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum.
Feugiat nibh sed pulvinar proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra tellus in hac habitasse platea
dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
So I figured it out:
Getting 2 Divs to Stick, w/o Covering One Another
There are two ways you can configure the Sticky <div> elements so that they don't cover each other when you scroll down the page.
#1
The first way is to set the property top of the lower div, to be the same combined height as the top div. The key word here is COMBINED which means: The padding and borders need to be added to the height to get an accurate value for top, otherwise the divs will still partially cover one another.
#2
The most simple, straight forward method, would be to create a parent div that is sticky, and then place the two original divs inside of it. Remove the position: sticky; property from the original two <div> elements, so that position sill be set to its default value. Its important that when doing this, you make sure that only the parent container has its position property set to sticky (i.e. position: sticky), or else you'll get undesired results. Below is the questions code rewritten using solution #2.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #08C8FF;
background-color: #900040;
color: #08C8FF;
}
.div-beta {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #EE1054;
background-color: #00307A;
color: #EE1054;
}
.div-gamma {
display: block;
text-align: center;
position: sticky;
top: 0;
}
p {
width: 350px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-gamma">
<div class="div-alpha">DIV ALPHA</div>
<div class="div-beta">DIV BETA</div>
</div>
<br>
<br>
<br>
<br>
<h3>Lorem Ipsum Text</h3>
---
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim
praesent elementum facilisis leo vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu
consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor
condimentum. Sapien eget mi proin sed libero enim sed faucibus turpis. Tortor at risus viverra adipiscing at.
Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit
amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis hendrerit. Lorem
ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui.
Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et
molestie ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius
duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus
vestibulum mattis ullamcorper. Convallis posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus
eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse
sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus venenatis lectus. Posuere urna nec tincidunt
praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat
vestibulum lectus mauris ultrices eros in.
Pharetra vel turpis nunc eget lorem dolor. Blandit turpis cursus in hac habitasse platea dictumst quisque. Nisi
porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl
condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum. Feugiat nibh sed pulvinar
proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci
eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris
nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra
tellus in hac habitasse platea dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
Here is an example
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
<div class="sticky">
<p> This is your sticky box </p>
</div>
<div>
<p>This is your other divs and properties </p>
</div>
This is what I do to make a navbar that has a functioning responsive mobile drop-down menu. Sounds like you already figured it out, but I thought id give ya some feedback. At the surface, the paradigm, is to put all objects that are supposed to stick in a single sticky container, however; implementing it is much harder than it sounds. Good Luck!
<!DOCTYPE HTML>
<html lang='us-en'>
<head>
<style type='text/css'>
.nav {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
display: grid;
grid-template-columns: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.nav-bar {
background-color: #000;
display: block;
width: 100%;
}
.nav-bar a {
display: inline-block;
font-size: 26px);
text-decoration: none;
margin: 16px 4px 0 12px;
}
/*!!! ~~~ ICONS ~~~ */
#home {
display: block;
float: left;
padding: 12px;
font-size: 38px !important;
}
#bars {
display: none;
float: right;
padding: 4px;
font-size: 38px !important;
}
/*! ~~~ Drop & Drop-Items ~~~ */
.nav-drop {
background-color: #000;
display: none;
width: 100%;
}
.nav-drop button {
display: block;
width: 54%;
margin: 12px 23%;
border: 1px solid #0FF;
padding: 1px;
}
</style>
</head>
<!-- BODY'S MARKUP -->
<body>
<div class="nav">
<div class="nav-bar">
<i id="home" class="fa fa-home" aria-hidden="true" onclick="go2('home')"> </i>
HOME |
ABOUT |
CONTACT |
FORUM
<i id="bars" class="fa fa-bars" aria-hidden="true" onclick="dropMenu()"></i>
</div>
<div id="nav-drop" class="nav-drop">
<button onclick="go2('about')">ABOUT</button>
<button onclick="go2('contact')">CONTACT</button>
<button onclick="go2('forum')">FORUM</button>
</div>
</div>
</body>
</html>
I have a div with a custom horizontal scroll. I would like to display a border bottom in the horizontal scroll but separated, because I get it without space between them. This is my current code:
div {
overflow-x: auto;
white-space: nowrap;
width: 200px;
}
div::-webkit-scrollbar-track {
border-radius: 10px;
}
div::-webkit-scrollbar {
height: 6px;
border-bottom: 1px solid #ccc;
}
div::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum ipsum. Vestibulum a ligula magna. Sed id justo eu nibh pharetra hendrerit vel nec ante. Proin ultrices ante quis erat pulvinar maximus. Quisque id arcu odio. Donec sit amet augue
urna. Proin lectus ligula, aliquam a velit eu, molestie tempor ipsum. Ut ac neque aliquet nulla aliquet facilisis. Donec ac ultrices augue. In nec augue ullamcorper, tristique enim a, mollis lectus. Curabitur in sodales erat. Suspendisse at egestas
urna, et elementum arcu. Aliquam dapibus ut neque quis consectetur. Etiam at lectus id odio finibus maximus et a nisi.
</div>
Are you able to edit the HTML?
Can't you just add a wrapper div?
#Wrap{
width:200px;
padding-bottom:6px;
border-bottom: 1px solid #ccc;
}
#Inner {
position:relative;
overflow-x: auto;
white-space: nowrap;
width: 100%;
}
/*Custom Scrollbar*/
#Inner::-webkit-scrollbar-track {
border-radius: 10px;
}
#Inner::-webkit-scrollbar {
height: 6px;
}
#Inner::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000;
}
<div id="Wrap">
<div id="Inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum ipsum. Vestibulum a ligula magna. Sed id justo eu nibh pharetra hendrerit vel nec ante. Proin ultrices ante quis erat pulvinar maximus. Quisque id arcu odio. Donec sit amet augue
urna. Proin lectus ligula, aliquam a velit eu, molestie tempor ipsum. Ut ac neque aliquet nulla aliquet facilisis. Donec ac ultrices augue. In nec augue ullamcorper, tristique enim a, mollis lectus. Curabitur in sodales erat. Suspendisse at egestas
urna, et elementum arcu. Aliquam dapibus ut neque quis consectetur. Etiam at lectus id odio finibus maximus et a nisi.
</div>
</div>
One simple solution: add padding and then the border-bottom
div {
overflow-x: auto;
white-space: nowrap;
width: 200px;
padding: 16px 0px;
border-bottom: 1px solid #000;
}
Another solution consists on adding a wrapper and creating a new div that will be used to have the separated border bottom, something like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div {
overflow-x: auto;
white-space: nowrap;
width: 200px;
}
div::-webkit-scrollbar-track {
border-radius: 10px;
}
div::-webkit-scrollbar {
height: 6px;
border-bottom: 1px solid #ccc;
}
div::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000;
}
.border-bottom{
margin-top: 8px;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div id="content-wrapper">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac dictum ipsum. Vestibulum a ligula magna. Sed id justo
eu nibh pharetra hendrerit vel nec ante. Proin ultrices ante quis erat pulvinar maximus. Quisque id arcu odio. Donec
sit amet augue urna. Proin lectus ligula, aliquam a velit eu, molestie tempor ipsum. Ut ac neque aliquet nulla aliquet
facilisis. Donec ac ultrices augue. In nec augue ullamcorper, tristique enim a, mollis lectus. Curabitur in sodales
erat. Suspendisse at egestas urna, et elementum arcu. Aliquam dapibus ut neque quis consectetur. Etiam at lectus
id odio finibus maximus et a nisi.
</div>
<div class="border-bottom"></div>
</div>
</body>
</html>
The goal is to set a single contiguous outline around a <span> nested within a <p> and <div>. I found this solution: CSS/Javascript: How to draw minimal border around an inline element? which only works if there is no line-height set on any elements. Is it possible to draw a single outline (pictured) while preserving my line height? mockup of desired result
Here's my code:
.note_text_theme {
outline: 2px solid blue;
outline-style: dashed;
}
.note_text_theme span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
p {
margin: 10px;
}
.text_paragraph {
font-size: 18px;
line-height: 170%;
}
<div class="text_paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
<span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
</p>
</div>
You'll notice that if the line-height property is commented out, the outline behaves as desired. This property is commented out in the snippet below.
.note_text_theme {
outline: 2px solid blue;
outline-style: dashed;
}
.note_text_theme span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
p {
margin: 10px;
}
.text_paragraph {
font-size: 18px;
//line-height: 170%;
}
<div class="text_paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
<span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
</p>
</div>
Add a padding to the note_text_theme to adjust for the increased line-height
.note_text_theme {
outline: 2px solid blue;
outline-style: dashed;
padding: 5px 0px;
}
.note_text_theme span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
p {
margin: 10px;
}
.text_paragraph {
font-size: 18px;
line-height: 170%;
}
<div class="text_paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
<span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
</p>
</div>
I am trying to implement the following:
You will see there is text and then a line to its side. I am trying to make the line remain the same distance from the text as the screen decreases in size. This works OK, but when the screen gets smaller the line goes into the 'Test Border' part.
See code below as to how I have implemented this. Perhaps I should be taking a different approach.
Also, a jsfiddle here for your convenience.
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: inline-block;
padding-bottom: 15px;
width: 8%;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: 90%;
}
<h3>Test Border</h3>
<div class="underline"></div>
You can display both blocks as table and specify first block fixed width (as it's only text that does not change).
.wrapper {
display: table;
width: 100%;
vertical-align: bottom;
padding-bottom: 15px;
table-layout: fixed;
}
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: table-cell;
width: 85px;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 100%;
position: relative;
top: -12px;
}
<div class="wrapper">
<h3>Test Border</h3>
<div class="underline"></div>
</div>
I'd probably use flex box like this.
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 10px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Test String</span>
<div class="line"></div>
</div>
This will make the title as wide as the longest unbroken work, and the border will fill up the rest of the space.
Here's what it looks like with paragraphs between each header (an almost real world example)
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 5px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Lorem ipsum dolor</span>
<div class="line"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus
sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit
sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis
magna dolor, vitae facilisis nibh euismod et.
</p>
<div class="border">
<span class="string">Etiam quis molestie</span>
<div class="line"></div>
</div>
<p>
Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus
tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at.
</p>
<div class="border">
<span class="string">Phasellus sed orci</span>
<div class="line"></div>
</div>
<p>
Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique
lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum,
ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia
commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula.
</p>
<div class="border">
<span class="string">Fusce ultricies ante</span>
<div class="line"></div>
</div>
<p>
Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum,
tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl
viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac
nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus.
</p>
I think the best solution is change the markup, because with your code the text in h3 tag could be bigger than your max-width (in fact, it is). Something like this:
.textline {
display: table;
}
h3 {
font-size: 26px;
color: #000 !important;
display: table-cell;
width: 9%;
margin-right: 1%;
vertical-align: bottom;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 90%;
position: relative;
top: -7px;
}
<div class="textline">
<h3>Test border</h3>
<div class="underline"></div>
</div>
When you use percentages you have to take into account the fixed measures of the other elements, width, margins, borders... Not the same 90% of a 1000px screen that one of 500px, the remaining space is less.
You can use calc to solve this issues:
h3 {
font-size: 26px;
color: #000 !important;
width: 95px;
display: inline-block;
padding-bottom: 15px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 100px);
}
<h3>Test Border</h3>
<div class="underline"></div>
You could try using a table display, with the text and line each having their own cell:
<div class="div-row">
<div class="div-cell"><h3>Test Border</h3></div>
<div class="div-cell underline"></div>
<div>
CSS:
.div-row {
display: table-row;
width: 100%;
}
.div-cell {
display: table-cell;
}
I haven't tested this, but the div containing the line should automatically shrink to the available width as your resize the browser window (or as you go from desktop to mobile).
If you want, you could also set a fixed width to the div containing the text.
You can try calc() property and it will work...
Check this fiddle here
What you have to do,
h3 {
font-size: 26px;
display: inline-block;
max-width:90px;
margin-right:10px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 104px);
}
Try the below CSS:
h3 {
font-size: 26px;
color: #000 !important;
display: inline-block;
padding-bottom: 15px;
}
.underline {
border-bottom: 1px solid #C6BCB6;
width: 90%;
}
We have a signup form aligned on the RHS of the content column. The content wraps nicely around the form which is desired.
The problem is the content div appears to overlap the form div preventing users from interacting with the form (Chrome and FF). Oddly it appears to work in IE.
For the form we are currently using:
float: right;
http://www.connecttherapy.com/our-services/
This looks great, the content wraps nicely, but we can't interact with the form.
Attempted solutions
Reduce the width of the content div but then it wouldn't wrap under the form as desired.
We have also tested
position: relative;
top: 3px;
left: 485px;
z-index: 1;
http://www.connecttherapy.com/test/signup-form/
With this solution we can interact with the form but it pushes the content down below the height of the form.
Have also played with
clear:right
clear:left
properties, but this didn't seem to help.
I'm sure the peeps on these boards will have a very simple, elegant solution which is currently eluding us. Thanks in advance!
#inner-signup-box-test {
position: relative;
z-index: 1;
}
try this, hope it helps.
I have re-created the problem in this runnable snippet (note that the input cannot be interacted with):
.content {
position: relative;
}
.form {
float: right;
height: 100px;
width: 200px;
background: #CCC;
margin: 0 0 0 20px;
}
<div class="form">
<input type="text" />
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
</div>
Option One
Move the sign-up form inside div#goldp_post_81 and remove the forms top margin. This will correct the z-levels. This order makes more sense as the content of div#goldp_post_81 is wrapping around the forms parent div.
HTML
<div class="goldp_content" id="goldp_post_81" style="position:relative;">
<div id="inner-signup-box-test"></div>
</div>
CSS
#inner-signup-box-test {
background: transparent url(images/signup-bg-compact.jpg) no-repeat scroll 0px 2px;
float: right;
height: 225px;
width: 160px;
margin: 0 0px 15px 15px; /* <-- no more top margin */
}
Here is my re-creation fixed by moving the div inside (input now reacts to pointer events):
.content {
position: relative;
}
.form {
float: right;
height: 100px;
width: 200px;
background: #CCC;
margin: 0 0 0 20px;
}
<div class="content">
<div class="form">
<input type="text" />
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
</div>
Option Two
If you can't move the HTML around, then the solution of Ghos does work, make sure it is floated to the right and there are no left, top, bottom or right properties.
#inner-signup-box-test {
position: relative;
z-index: 1;
float: right;
}
Option two example:
.content {
position: relative;
}
.form {
position: relative;
z-index: 1;
float: right;
height: 100px;
width: 200px;
background: #CCC;
margin: 0 0 0 20px;
}
<div class="form">
<input type="text" />
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
</div>