I am trying to make it accessible to the collapse functionality of bootstrap, I have tried (keyup.enter) method but it doesn't do anything.
My requirement is when the tab is on the collapse button, then on enter, it should toggle/collapse(hide/show) the data
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">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 labor is nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
Related
I am using Bootstrap 5 and have a <div> that is wrapped in an <a>. It contains a title, a thumbnail image, and some description text. In other words, the entire block of content is a link.
I have been able to override most of Bootstrap's CSS, but when it comes to this link text it's really persistent.
If I specify display: inline-block the underlines disappear. But I want that for inline text here as well. text-decoration: none is not taking effect.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col"><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
</div>
</div>
</a>
</div>
</div>
</main>
</body>
</html>
You can add the text-decoration-none class in your <a> tag, and that will remove your forcing underlines on link text. and refer the below link : https://getbootstrap.com/docs/5.0/utilities/text/#text-decoration
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/" class="text-decoration-none">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col">
<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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
</a>
</div>
</div>
</main>
</body>
</html>
Simple! Just add class(text-decoration-none) to your link tag.
Example:
Non-underlined link
For more details:
https://getbootstrap.com/docs/4.2/utilities/text
I just added text-decoration:none; in your <a> tag as an inline-CSS and it worked like a charm.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/" style="text-decoration: none;">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col"><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
</div>
</div>
</a>
</div>
</div>
</main>
</body>
</html>
Use bootstrap Property text-decoration-none in <a> tag
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/" class="text-decoration-none">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row d-flex">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col"><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
</div>
</div>
</a>
</div>
</div>
</main>
</body>
</html>
I have some HTML that will ultimately be sent out as an email. When Chrome is in responsive mode and you shrink the screen down, it enables font-boosting (a concept I just learned about :-) ).
My problem is it does NOT turn it on for inline-blocks.
I know I can disable font boosting via <meta name="viewport" content="width=device-width, initial-scale=1">. I would actually prefer the opposite, with font boosting turned on for every element.
Example of the issue. The inline-block elment is tiny when the width of the screen is shrunk down in responsive mode or when emulating a device.
HTML:
<body>
<div>
Here is a very long line. It appears to turn on font boosting when Chrome
is in responsive mode.<br /><br />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.
</div>
<br /><br />
<div style="display: inline">This is an inline</div>
<br />
<div style="display: inline-block; background-color: yellow">
This is a inline-block. It is very tiny.
</div>
<div style="display: block">This is a block</div>
</body>
</html>
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>
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>
i am making a card with material components for web and i want to have my template layout to have all its data inside it.
Now when i am using mdc-card__title or subtitle , both of them are getting aligned to the bottom of the card which i don not want.
Is there anything wrong i am doing ?
See the code for help :
.demo-card{
width:65%; max-height: 500px;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet"
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<div class="mdc-card demo-card">
<section class="mdc-card__primary">
<h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
<h2 class="mdc-card__subtitle">Subtitle here</h2>
</section>
<section class="mdc-card__supporting-text">
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.
</section>
</div>
</body>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>mdc.autoInit()</script>
</html>
Why is it leaving a space for media even when i am not adding any media content.
This seems to be by design, according to the docs:
Content will be bottom-aligned if it's smaller than the height of the card.
It should be possible to override .mdc-card's justify-content style to flex-start if you want to change this to top-aligned instead.