Is it possible in CSS (if not, javascript?) to shrink content that overflows its container, rather than hide it?
I have a box with some text etc, which shrinks in width as the viewport gets smaller, and the height is restricted too. All the content needs to remain visible, but within the bounds. Scroll is not an option.
body {
background-color: mediumaquamarine;
}
div {
width: 300px;
height: 150px;
overflow: hidden;
background-color: #fff;
}
<div>
<h1>example title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati fugiat dolore amet odit quaerat iusto sapiente ea quod atque necessitatibus id eius accusantium itaque voluptatibus laborum, doloremque, recusandae, nobis consequatur.</p>
<button>a button</button>
</div>
Hmm, the question is a little unclear, but you could look into using viewport width font-size. It will resize based on the screen size:
body {
background-color: mediumaquamarine;
}
div {
width: 300px;
height: 150px;
overflow: hidden;
background-color: #fff;
font-size: 1.3vw;
}
button {
font-size: 1.3vw;
}
<div>
<h1>example title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati fugiat dolore amet odit quaerat iusto sapiente ea quod atque necessitatibus id eius accusantium itaque voluptatibus laborum, doloremque, recusandae, nobis consequatur.</p>
<button>a button</button>
</div>
Use this function to adjust the font-size of a span inside a div:
function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height() > $(elem).parent().height() || $(elem).width() > $(elem).parent().width()) {
$(elem).css('font-size', (($(elem).css('font-size').substr(0, 2) - fontstep)) + 'px').css('line-height', (($(elem).css('font-size').substr(0, 2))) + 'px');
adjustHeights(elem);
}
}
div {
position: fixed;
width: 200px;
height: 100px;
border: 1px solid blue;
padding: 1px;
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span id="text">
sldfjslfjladf
sf
as
f
wer
qwreqwrewasdf
sd
f
s
fs
df
s
ffadsssssssssssssssssssssssssssss
asdf<br/>
sdf
s
dsfsfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
</div>
<script>
function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height() > $(elem).parent().height() || $(elem).width() > $(elem).parent().width()) {
$(elem).css('font-size', (($(elem).css('font-size').substr(0, 2) - fontstep)) + 'px').css('line-height', (($(elem).css('font-size').substr(0, 2))) + 'px');
adjustHeights(elem);
}
}
var div = document.getElementById("text");
adjustHeights(div);
</script>
JSFiddle: http://jsfiddle.net/e8B9j/1390/
SVG with text element.
Make an svg with expandable text.
It will eventually be hard to read.
<div style="width: 60px;">
<svg width="100%" height="100%" viewBox="0 -200 1000 300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="300" fill="black">Text</text>
</svg>
</div>
Non styled example
https://jsfiddle.net/k8L4xLLa/32/
Cool styled example
https://jsfiddle.net/k8L4xLLa/14/
You can use media queries to change the font size when needed.
Honestly though, consider flexbox. Its a much cleaner solution that does not make the text scalable. Then you can wrap your elements when theyre too small. :)
Related
I have seen many questions but none are similar to my case. I have bootstrap collapse and show for a few div contents. The div content shows when title is clicked. I want to close all other div contents when I click another content's title.
The color of the title div is gray and should change to white when its content shows. Once the content is collapsed, title div color should back to gray.
Here's my code:
function collapse (e, id, collapasibleName) {
var toggleColor = document.getElementById(id);
var collapsibles = document.getElementById(collapasibleName);
if(collapsibles.className == 'home__questions-content collapse' || collapsibles.className == 'home__questions-content collapsed')
{
alert("Sdfsdfdsf")
toggleColor.classList.remove('home__questions-title-show');
}
if(collapsibles.className == 'home__questions-content collapse show') {
alert("in show")
toggleColor.classList.add('home__questions-title-show');
}
}
.home__more-questions-content {
padding-right: 40px;
padding-left:40px;
padding-bottom: 20px;
background-color: $white-color;
position:relative;
max-width: 1080px;
margin: auto;
}
.home__questions-content-tile {
margin-bottom: 10px;
border:1px solid #eee;
}
.home__questions-content-title {
padding:20px;
background-color: #000
cursor: pointer;
}
.home__questions-content {
padding-top: 0;
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
}
.home__questions-title-show { background-color: #fff; }
.collapse {
display:none;
}
.collapse.show {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
<div class="home__more-questions-content" id="accordion">
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-one" data-parent="#accordion" id="collapse-one" onclick="collapse(event, this.id,'collapsible-one');">
<h2>
// title 1 here
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-one">
//title 1's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-two" data-parent="#accordion" id="collapse-two" onclick="collapse(event, this.id,'collapsible-two');">
<h2>
//title 2
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-two">
//title 2's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-three" data-parent="#accordion" id="collapse-three" onclick="collapse(event, this.id, 'collapsible-three');">
<h2>
//title 3
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-three">
// title 3's content here
</div>
</div>
</div>
Here is the code, explanation is in the comment of the question.
Add new code
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
If current block is opened, then close it and return from further processing.
const container = document.querySelector('.container')
container.addEventListener('click', e => {
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
const collapsable = document.querySelectorAll('.item')
Array.prototype.forEach.call(collapsable, el => {
el.classList.remove('active')
})
e.target.parentNode.classList.add('active')
})
.container {
width: 500px;
margin: 0 auto;
color:darkslategrey;
}
.item {
margin: 10px 0;
border-bottom: 1px solid #666;
padding: 5px 10px;
}
.item.active h3 {
color:aquamarine;
}
p {
overflow: hidden;
transition: height .5s ease;
height: 0px;
}
.item.active p {
height: 80px;
}
<div class="container">
<div class="item active">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
</div>
I am trying to toggle class in one of my react component.
The idea is to add class when the mouse enter and to remove the class when the mouse leave only in the element only the element in where the user perform the actions. However this is not the case as when the action is being performed all the element with the function are behaving equally.
This is my code so far:
export default class Projects extends Component{
constructor(){
super();
this.state = {
isHovered : false
}
}
//handle mouse enter
handleMouseEnter = () =>{
this.setState({
isHovered : true
});
}
//handle mouse leave
handleMouseLeave = () =>{
this.setState({
isHovered : false
});
}
//render component
render(){
let display = "";
if(this.state.isHovered === true){
display = "active";
}else{
display = "disable";
}
return(
<section className="projects">
{/*section project wrapper*/}
<div className="p-wrapper">
<h1 className="title">Projects</h1>
<hr/>
{/*projet wrapper*/}
<div className="projects-wrapper">
{/*project item wrapper*/}
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*FMA Web development*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/fma_web.png" alt="FMA Web Development"/>
</div>
</div>
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Web development using php*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/web_dev_php.png" alt="FMA Web Development Using PHP"/>
</div>
</div>
<div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Movie Catalog*/}
<div className={"p-description " + display}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
</div>
<div className="p-image">
<img src="asset/img/movie_catalog.png" alt="Movie Catalog"/>
</div>
</div>
</div>
</div>
</section>
);
}
}
I have read the use of key in the documentation and read other question especially this one LINK,however when I try to implement I do not get the desired result.
===========================
EDIT
This is what I get now.
As you can see when I hover both of the element triggers.
This is my CSS Code:
/*Projects Start*/
.projects{
width: 100%;
}
.p-wrapper{
margin: 0 auto;
width: 90%;
height: 100%;
}
.projects-wrapper{
margin-top: 2rem;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.project-item{
margin: 1rem;
width: 30%;
position: relative;
box-shadow: 2px 3px 37px -5px rgba(0,0,0,0.84);
}
.p-description{
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(43, 40, 40, 0.61);
color: white;
}
.p-description p {
margin: 1rem;
}
.p-title{
margin: 1rem;
}
.active{
display: block;
transition: all 2s ease-in;
}
.disable {
display: none;
}
Didn't really know how to explain my problem in the title, my question is how do I make it so when I press the top box the other two boxes move down so you can see the text? The same goes for the other two boxes, if I press the middle the last box moves and when I press the last one the top and the middle stays. Plus the boxes has to go back to it's original place. Please I need help with this
$(".faq,.faq2,.faq3").click(function() {
$(this).find(".faq-box-more").toggleClass("open");
$(".faq,.faq2,.faq3").not(this).find(".faq-box-more").removeClass("open");
});
.faq,
.faq2,
.faq3 {
height: 100px;
width: 500px;
background: red;
position: relative;
top: 100px;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
position: absolute;
top: 50%;
transform: translate(0, -50%);
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
position: absolute;
height: 0%;
top: 100%;
background-color: #222;
color: #fff;
width: 100%;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
.open {
height: 140% !important;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq2">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq3">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>
see snippet below or jsfiddle
if you don't want to use the jqueryUI accordion and want to learn how it actually works, it's something like this
in CSS do not use absolute positioning on faq-box-more as it won't occupy any space. instead hide it with display:none
for JQ
first, you don't need to add different classes to all the faq divs, you can add one common class and then select the respective faq-box-more connected to the faq you click on , using jQuery methods below
when you click on faq-box ( either one of them ) , in a variable ( for cleaner and concise code ) you store the corresponding faq-box-more .
you do this by using sibling() method. searching .faq-box's ' brothers ' for the .faq-box-more . in HTML structure faq-box and faq-box-more are on the same level, therefore they are siblings
then using an if condition you check if the previous selected faq-box-more is visible or not. IF YES -> close it , IF NO -> open IT .
you close and open using slideUp() and slideDown() methods ( click on the methods to see more info about them )
then, you also want to find any previous opened faq-box-more and close them, so only one is opened at one time ( the one corresponding to the box you clicked on ) . to do this you use the parents() method to 'climb' up the HTML structure and get to faq and then using siblings() and find() you find the .faq-box-more , and if it is open, you hide it with slideUp()
i think it's important that you try to understand the process behind the accordion and not just copy-paste it .
if you have anymore questions on this subject, feel free to ask in the comments
P.S. you had many problems in your code ( CSS ), it tried to correct some of them but also i wanted not to change too much your code.
$(".faq-box").on("click",function() {
var boxMore = $(this).siblings(".faq-box-more")
if ($(boxMore).is(":visible")) {
$(boxMore).slideUp()
} else {
$(boxMore).slideDown(500)
}
$(this).parents(".faq").siblings().find(".faq-box-more").slideUp()
});
.faq {
width: 500px;
background: red;
position: relative;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
background-color: #222;
color: #fff;
width: 100%;
height:200px;
display:none;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>
I have two paragraphs that need to be positioned so that they meet these criteria:
Both paragraphs must be centered in their container at the same height, even if one or both of them take up more than one line. This effectively overlaps the paragraphs.
The paragraphs container must be centered on the page and have a maximum width less than 100% of the page width.
These criteria must remain true if either the page is resized or the content of the paragraphs change.
I know that's a lot to keep track of, so I made a JSFiddle to explain and demonstrate what is needed.
Interestingly enough, that JSFiddle seems to be centered properly, but only if the text takes up more than one line...
StackOverflow won't let me post the question without code so here's some code:
<div id="container">
<p id="p1"></p>
<p id="p2"></p>
</div>
Note: The reason I said "outside DOM flow" in the title is because at least the second paragraph needs to be outside the DOM flow otherwise it can't be positioned on top of the first paragraph.
You can do this by css flex property like this
#container {
display: flex; /* equal height of the children */
}
#container > p {
flex: 1; /* additionally, equal width */
text-align:center;
padding: 1em;
border: solid;
background-color:#ff0000
}
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam</p>
</div>
Try this:
function randomNumber(low, high) {return Math.floor(Math.random() * high) + low;}
function generateSentence(length) {
var sentence = "";
var count = 0;
var wordLength = randomNumber(1, 10);
for (i = 0;i < length;i++){
if (count == wordLength) {
sentence += " ";
wordLength = randomNumber(1, 10);
count = 0;
} else {
sentence += "a";
count++;
}
}
return sentence
}
var tracker = 1;
setInterval(function(){
var randomLength = randomNumber(10, 150);
if (tracker == 1){
document.getElementById('p1').innerHTML = generateSentence(randomLength);
tracker = 2;
} else {
document.getElementById('p2').innerHTML = generateSentence(randomLength);
tracker = 1;
}
}, 1000)
#container{
position: absolute;
width: 50%;
left: 25%;
min-height: 100px;
background-color: red;
text-align: center;
display:flex;
align-items:center;
flex-direction:column;
justify-content:center;
}
#container p {
margin:0px;
}
<p>The text in both paragraphs below need to stay centered, even when the text changes. The bottom paragraph should be at the same height as the first one, effectively overlapping them.</p>
<div id="container">
<p id="p1"></p>
<p id="p2"></p>
</div>
I was able to accomplish this by wrapping the paragraphs in a non-statically positioned container.
Then absolutely position the paragraphs and set their width to 100% that of the container. Now using text-align: center; will center the text in the container and you can place the container anywhere on the page, and scale it to any size. The paragraphs will resize to fit the container, they will stay centered and they will stay at the same height.
HTML
<div id="container">
<div id="p1"></div>
<div id="p2"></div>
</div>
CSS
#container {
position: relative;
width: 70%;
left: 15%;
}
#container div {
position: absolute;
left: 0;
width: 100%;
text-align: center;
padding: 1em;
border: solid;
}
JSFiddle
I have a two column layout and I want to draw an svg on left and some elements on the right. I want the SVG's height to scale as per the height of 2nd column(i.e one on the right). To achieve two column layout, I have used flex-box css. Here is the jsfiddle showing the problem.
Could anyone help me out what I am doing wrong.
<div class="row">
<div class="col">
<svg style="width:100%;height:100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" x="0" y="0" fill="#E61875" rx='10' ry='10' />
</svg>
</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
The desired result is if the height of the 2nd Div increases, SVG's height should also increased, similarly if the height of the 2nd Div decreases, then SVG's height should decrease.
I have updated the fiddle, it seems to be working in firefox, but in chrome, it is setting up height as 150px and not changing the value. I still didn't find the work around.
It's not clear what the issue is as your JSfiddle does not contain the SVG.
For the SVG to be the full height of the column you would need to remove the padding and set the SVG to display:block.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.col {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: solid;
}
svg {
display: block;
}
<div class="row">
<div class="col">
<div style="width:60px;height:100%;">
<svg style="width:100%;height:100%" viewbox="0 0 50 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" x="0" y="0" fill="#E61875" rx='10' ry='10' />
</svg>
</div>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</p>
</div>
</div>
Also, it's not clear what this final result is supposed to look like. I suspect some adjustments may be required.