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.
Related
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>
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>
I would like to have an element superimposed on an image, which should responsively adjust to the element's dimensions.
In the example below, the goal is to have img completely surround the sibling element. Right now, it only partially covers it:
section {
position: relative;
}
img {
width: 100%;
height: 100%;
}
div {
padding: 30px;
margin: 30px;
position: absolute;
top: 0;
background: red;
opacity: 50%;
}
<section>
<img src="https://via.placeholder.com/1000x100">
<div>
Content Goes here
<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>
</section>
I tried adding background-image to section, but that doesn't seem to work either. Right now my only option is to use media queries and manually adjust the height of img, but I was curious if there is a cleaner approach.
You could set the image as a background of the section. Please note, that I removed the position absolute of the div element so the section can growth with that element. You can play around with the different background options till you get your desired result.
section {
position: relative;
background-image: url("https://via.placeholder.com/1000x100");
background-position: center;
background-size: 100% 100%;
padding: 15px; /* optional padding */
}
div {
padding: 30px;
top: 0;
background: red;
opacity: 50%;
}
<section>
<div>
Content Goes here
<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>
</section>
Why not use transform on the div?
section {
position: relative;
}
img {
width: 100%;
display: block;
max-width: 100%;
}
div {
padding: 30px;
margin: 0 30px;
top: 0;
background: red;
opacity: 50%;
position: relative;
transform: translateY(-25px);
}
<section>
<img src="https://via.placeholder.com/1000x100">
<div>
Content Goes here
<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>
</section>
may be you can do it in this way, i feel like usually child element work or inherit the properties of the parent. even in the case of relative and absolute parent child relation, child element stays with the parent even though wherever the parent goes/moves
so, if you want a background image to be superimposed on some element, first of all, may be you have to set the parent element/background image's properties properly and then keep your content inside. if your content is overflowing/larger than background you might have to adjust it manually ( like you said, with media queries ) or you can try in this way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.image-back {
padding: 30px;
margin: 30px;
width: 100%;
height: auto;
background-image: url('https://via.placeholder.com/1000x100');
}
.content {
background-color: red;
opacity: 50%;
overflow: hidden;
}
</style>
</head>
<body>
<header>
<div class="image-back">
<div class="content">
<p>Content Goes here</p>
<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>
</header>
</body>
</html>
here in this case, try to get an image that can contain the size of inner element and its border+padding+etc. and have a look at how it behaves with different screen resolutions.
I am working on a simple css grid resizing of an image that scales down and up when the viewport size changes. In my example the image is in the left most grid cell with text in the adjacent cell just to it's right. Interestingly the resize behavior seems to be impacted differently depending on whether or not your using chrome or firefox. In chrome, when the text pushes the bottom cell boundary past the image height the image height is changed to match thus increasing the size of the image and causing it to scale incorrectly. Whereas in firefox the image height doesn't seem to be impacted and continues to scale down correctly. What thoughts do you have about how to solve this or is this a bug in either the firefox or chrome implementation of the css grid spec? Would love some thoughts either way on how to make both browsers behave consistently here.
Here is an example I threw together on codepen that shows what I'm talking about. Just push your right browser edge to the point that the text exceeds the height of the image height and the behavior I've described becomes obvious.
https://codepen.io/bradnjones/full/WyyOyY
Here's the HTML:
<html dir="ltr" lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS GRID Firefox / Chrome behave differently</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<img class="image" src="https://drive.google.com /uc?export=view&id=1QCw6g_h8WNfqSH_5iapODpuxNn7uciQB" alt="">
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat 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</span>
</div>
</body>
</html>
Here's the CSS:
.container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
}
.image {
grid-column: 1/2;
grid-row: 1/2;
object-fit: contain;
align-self: start;
width: 100%;
max-height: 100%;
}
.text {
grid-column: 2/3;
grid-row: 1/2;
}
I just figured it out. It wasn't the Grid but the image css fit and alignment properties within the grid. When I changed object-fit from "cover" to "contain" and added align-self: start, chrome behaves the same as Firefox. See updates to codepen and original post for correct code.
I have an example (with the help from #bjb568) here. Please click it to see how it works in Chrome/IE/FF.
http://jsfiddle.net/P92Fs/11/
Here is all code.
<div style="text-align:center">
<div class="media">
<img src="http://www.trumba.com/i/DgCAOmnZFp7ia4FDZJne5SHC.gif" />
<div class="caption">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
</div>
</div>
</div>
.media {
position: relative;
display: inline-block;
}
.media .caption {
position: absolute;
bottom: 0;
text-align: left;
}
img {
max-width: 100%;
}
In Chrome (Windows), the image shrinks accordingly when the browser's viewport is narrower than the image width. This is what I want.
However, it does not shrink accordingly in IE (v10, Windows) and Firefox (v26, Windows).
Does anyone know why and the fix?
Thanks!
For img, change max-width to width in your CSS.
Here's a fiddle.
Max-width just sets the maximum width, not the actual width.
Do you have this line in the head section of your html document?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
It's a little hard to troubleshoot without seeing the whole html document.