iframe in bootstrap card scales with width but not height how do I make the height responsive as well?
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row no-gutters">
<div class="col-12">
<div class="card mt-4" style="width: 100%;">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" style: width="100%" height="100%" allowfullscreen></iframe>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
From the bootstrap documentation: (https://getbootstrap.com/docs/5.2/helpers/ratio/#example)
Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector .ratio > *.
I also removed the unneeded (hardcoded) width/height attributes.
See sample code below:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12">
<div class="card mt-4">
<!-- changes made from here -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
</div>
<!-- to here -->
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
Related
I have a problem with Flatpickr rendering in a Bootstrap modal.
When I open a Flatpickr entry within a modal, everything seems to work fine except for entering a year. When I want to click on the year, the input field does not work.
Thanks for help.
Flatpickr version 4.6.9 and Bootstrap version 5.1.1
In order to use the month and year picker you need to use the Flatpickr option static: true. This way it will not hide behind the modal.
$(document).ready(function() {
const flatpickr_time = $('#flatpickr_time').flatpickr({
//static: position the calendar inside the wrapper and next to the input element*.
static: true
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-4 m-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input id="flatpickr_time" style="width:200px;">
</div>
</div>
</div>
</div>
I've had the same issue and while the solution proposed by Crezzur did work, it had some side effects that I didn't want.
I was able to find that the issue was caused by bootstrap being a bit too aggressive with the focus, which means it can be fixed simply by adding bs-focus="false" to your modal.
Example:
<div class="modal" role="dialog" data-bs-focus="false">
It seems I'm missing something obvious here
I expected the home blog contact entries to be stacked on top of one another at all times.
What am I missing?
This is what's actually rendering:
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href='/'>Home</a></li>
<li role="presentation"><a href='/blog/'>Blog</a></li>
<li role="presentation"><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
There's no well class in Bootstrap 4. The card class can be used instead.
Here's a code snippet that does pretty much what you'd expect:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid" style="min-height:90vh; ">
<hr>
<div class="row">
<div class="col-sm-3 col-md-2">
<br>
<br>
<!-- There's no "well" class in Bootstrap 4. The "card" class can be used instead. -->
<div class="card bs-sidebar" id="sidebar" style="background-color:#fff">
<nav class="nav nav-pills flex-column flex-sm-row2">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Home</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Blog</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Contact</a>
</nav>
</div> <!--bs-sidebar-->
</div> <!--col-sm-3 col-md-2-->
<div class="col-sm-9 col-md-10 ">
<div class='container-fluid'>
<div class="row">
<div class="col">
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col">
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</div>
</div>
</footer>
Reference:
https://getbootstrap.com/docs/4.0/migration/#panels-thumbnails-and-wells
https://getbootstrap.com/docs/4.0/components/navs/#working-with-flex-utilities
I'm following the video tutorial Design a prototype for a responsive web app using Foundation Apps version 1.2. I'm having a problem where the left nav and news content does not line up next to each...Provide below is my code:
Here is the HTML page:
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Yeti News</title>
<link href="/assets/css/app.css" rel="stylesheet" type="text/css">
<script src="/assets/js/foundation.js"></script>
<script src="/assets/js/templates.js"></script>
<script src="/assets/js/routes.js"></script>
<script src="/assets/js/app.js"></script>
</head>
<body>
<div class="grid-frame vertical">
<div class="grid-content shrink collapse">
<div class="title-bar primary">
<div class="center title">YetiNews</div>
<div class="left"><a zf-toggle="info" href="#">Info</a></div>
</div>
</div>
<div class="vertical medium-horizontal grid-block">
<div class="grid-block medium-order-2">
<div zf-panel position="left" id="info" class="fast bounceInOut">
<div class="grid-content">
<h1>Designer News</h1>
<p>This is some great content</p>
</div>
</div>
<div class="grid-content small-12 feeds">
<div class="grid-block small-up-1 meduim-up-2 large-up-3">
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
<div class="grid-content">
<div class="card card-section">
<h4>This is a title</h4>
<p>This is some really great content and you know how great it is.</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid-block nav shrink collapse medium-order-1">
<ul class="icon-top medium-vertical menu-bar dark">
<li><img zf-iconic icon="person" size="small" class="iconic-color-primary">Designer</li>
<li><img zf-iconic icon="cog" size="small" class="iconic-color-primary">Hacker</li>
<li><img zf-iconic icon="star" size="small" class="iconic-color-primary">Product</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Please help.
Thank you,
Might anyone have any idea how to auto-adjust the height of textarea to fill the rest of the space vertically? The easy way is to hard code the style of textarea with height: 300px or something but that is hardly a workable solution in production.
Here is the of my html. Thanks
<body>
<div class="app-page" data-page="home">
<div class="app-topbar">
<div class="app-title">Mobile Email Client</div>
</div>
<div class="app-content">
<div class="app-section">
<div class="app-button" data-target="emailEditor">Compose Email</div>
</div>
</div>
</div>
<div class="app-page" data-page="emailEditor">
<div class="app-topbar">
<div class="app-title"><span class="app-icon"></span>Email Editor</div>
<div class="left app-button" data-back>QUIT</div>
</div>
<div class="app-content">
<div class="app-section" id="editorStatus"></div>
<div class="app-section">
<input class="app-input" id="emailFrom" placeholder="From">
</div>
<div class="app-section">
<input class="app-input" id="emailTo" placeholder="To">
</div>
<div class="app-section">
<input class="app-input" id="emailSubject" placeholder="Subject">
<textarea class="app-input" id="emailMessage" placeholder="Message" rows="10"></textarea>
<div class="app-button green app-submit" id="emailSend">Send</div>
</div>
</div>
</div>
In App.js apparently setting rows="10" attribute for <textarea> is not enough. The <textarea> must also be given a CSS height: auto;
This still does NOT enable you to fill the remainder of the screen dynamically for any sized screens.
I'd like to put 3 images next to one image in a responsive row layout but I can't figure out how to make the contents of this row to be equal in height. I can make the images any dimension if it's as simple as "The large image should be 900x1200px, the 3 small ones should be 300x500px" I am also using foundation4 for this as well. The images could be cropped or stretched a little too.
http://jsfiddle.net/uEyCF/2/
<div id="image_box">
<div class="col">
<img src ="http://placehold.it/200x100" />
<img src ="http://placehold.it/200x100" />
<img src ="http://placehold.it/200x100" />
</div>
<div class="col">
<img src ="http://placehold.it/200x350" />
</div>
</div>
This should get you started:
<div id="image_box" class="row">
<div class="small-6 large-6 columns left-col">
<div class="row">
<div class="large-12 columns">
<img src="http://placehold.it/200x100" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<img src="http://placehold.it/200x100" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<img src="http://placehold.it/200x100" />
</div>
</div>
</div>
<div class="small-6 large-6 columns">
<img src="http://placehold.it/200x340" />
</div>
</div>
<style type="text/css">
.left-col img { margin-bottom:20px; float:right;}
</style>