this is the code but I would like clicking on button 2 to deactivate I tried in several ways but something escapes me, I can create the buttons and make them work ... but with each click of a single button the others remain open
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="demo1" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
Related
I'm trying to use the -webkit-line-clamp attribute (as seen https://css-tricks.com/almanac/properties/l/line-clamp/) but it doesn't seem to work with nested tags.
I'm trying to make this sample works :
<html>
<body>
<div style="width:200px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</body>
</html>
My content is generated by quill.js and it's wrapped by multiple p tags. I cannot change that. Do you have any idea of how I can make -webkit-line-clamp (or something similar) works?
If you wrap the two paragraphs in another div, your current code will truncate the displayed text.
Here is a working example:
.container {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
width:200px;
}
<html>
<body>
<div class="container">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
</body>
</html>
Here is an example using span tags instead of paragraph tags. This approach allows "..." to become visible:
.container {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
width:200px;
}
<html>
<body>
<div class="container">
<div>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</span>
</div>
</div>
</body>
</html>
I have a bootstrap-select component the content of which is expanding beyond the grid the button that triggers it is conforming to. It actually goes completely off the page:
Markup (Django templating, but that isn't relevant I don't think):
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="form-group">
<select
class="selectpicker form-control"
data-title="Please select"
>
{% for item in items %}
<option
data-content="
<div>
<div>
<i class='fa {{ item.icon }}'></i>
<h4-text'>{{ item.title }}</h4>
</div>
<div>
<p class='text'>{{ item.very_long_text }}</p>
</div>
</div>"
></option>
{% endfor %}
</select>
</div>
</div>
</div>
Removing the item.very_long_text (p.text) node solves the problem and the grid is adhered to so that is definitely the problem. I have tried to apply the following styles to that node in order to control the problem but it persists:
width: auto;
width: 100%;
overflow-wrap: break-word;
overflow-wrap: normal;
word-break: break-all;
color: red;
white-space: [every available value];
word-wrap: break-word;
In fact, the only solution that works is this:
.dropdown-menu {
max-width:100%;
}
But that seems really sloppy to me to override a Bootstrap class that is—from what I understand—meant† to work the way that I want it to in the first place.
How can I confine the content of this select menu to grid columns its trigger is confined by?
† The section I've linked to in the Boostrap Select documentation makes this clear IMO
It looks like the content is expanding the grid because by default, bootstrap dropdown menu items have their white-space set to nowrap. Resetting this to normal by for example applying a class to every data-content item seems to fix this issue. Below is a minimal repro.
$('select').selectpicker();
.fix {
white-space: normal
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/js/bootstrap-select.min.js"></script>
<select class="selectpicker" data-title="Please select">
<option title="Option 1"
data-content="
<div class='fix'>
<div>
<i class='glyphicon glyphicon-ok'></i>
<h4>Lorem Ipsum</h4>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>"
></option>
<option title="Option 2"
data-content="
<div class='fix'>
<div>
<i class='glyphicon glyphicon-ok'></i>
<h4>Lorem Ipsum</h4>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>"
></option>
<option title="Option 3"
data-content="
<div class='fix'>
<div>
<i class='glyphicon glyphicon-ok'></i>
<h4>Lorem Ipsum</h4>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>"
></option>
</select>
What I am looking to do is have an accordion where the top panel of the accordion is a link to another page, and the rest of the accordion functions normally. I've tried some javascript to stop the accordion event, but that does not seem to work. Any pointers?
Yeah looks like first you'd need to delete the interior content so that it doesn't expand. After that, I'd add a class the a tag and write some script on the page to recognize the class and redirect the url. Something like the below:
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a class="redirect-me" href="http://www.google.com">Accordion 1</a>
</li>
<li class="accordion-navigation">
Accordion 2
<div id="panel2a" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
Accordion 3
<div id="panel3a" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
</ul>
Script would look something like this with jQuery:
$(".redirect-me").bind("click",function(){
theUrl = $(this).attr("href");
window.location = theUrl;
});
Kind of a dirty way to do it. But it's a bandaid till you can do the recommended way someone else figures out.
I'm trying to work out how I target the final element within a dynamically generated content set.
For example, all the generated content get spits out like so:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
In this case I'd like the final paragraph to have a margin-bottom: 0;
But the content could also be generated like so:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<div class="inner-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
Where by I'd like the final paragraph within the inner-box div to be given the zero margin.
I've tried adding block-inner:lastchild {margin-bottom:0;} but that doesn't work correctly. Just wondering how the best way to target this. Cheers!
There isn't any robust way to do this. .box > p:last-child will only get you a p element that is a child of .box; it won't match anything in your second example because the last child of .box is .inner-box, not a p.
.box p:last-child is not reliable because it will match all p elements that are the last children of their parents, which means it will match the last child of .inner-box here even though it's not the last p in the entire .box:
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<div class="inner-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
And you have to worry about all the other possible ways the last p element could be nested somehow.
But if you know that the last p element can only ever either be a child of .box, or be a child of the last .inner-box for example, then you can enumerate those two possibilities:
.box > p:last-child,
.box > .inner-box:last-child > p:last-child
If you don't know the class name of that intermediate element you might be able to get away with not qualifying that :last-child at all:
.box > p:last-child,
.box > :last-child > p:last-child
And even then, that does not account for the fact that the last p may not even appear in the last child of .box.
Basically, you need to write a selector accounting for each and every possible nested structure in which the last p element may appear; there is no easy way to say "match the last p descendant of this container in a dynamic structure."
Use p:last-child
This will select the last <p> tag and only apply the styles to it.
.box {
border: solid 1px
}
.box p:last-child {
margin-bottom: 0;
color: red;
}
<div class="block">
<div class="block-inner">
<div class="box">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
A link
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
I am trying to use the below foundation5 code. The problem is the content is exposed on load. I need it to be hidden until clicked on. I have been able to hide it but then it will not expand. Any suggestion would be greatly appreciated.
Thank you
<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
XXXXXXXXS
<div id="panel1b" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>
As per the Foundation docs, the the class active is used to display the corresponding content. So if you don't want your content to be displayed when the page loads, remove the class active. Additionally, make sure to keep your HTML markup clean. I see a lot of and invalid markup like unclosed tags in the example you provided. Your final markup should look like this:
<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
XXXXXXXXS
<div id="panel1b" class="content">Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</dd>
</dl>
</div>
</div>