I am using Angular Material for my Angular app. Currently, I have a dialog that shows info about a post. However, there is a lot of annoying whitespace at the bottom of the dialog that I want to get rid of. How can I do this?
Here is an image:
HTML
<div id="postModal">
<div mat-dialog-content id="postForm">
<div class="bigImage">
<img src={{imageLinks[0]}} class="postImage"/>
</div>
</div>
</div>
SCSS
body{
position: relative;
}
.postImage{
height: 80%;
width: 100%;
}
.bigImage{
text-align: center;
display: block;
}
#postForm{
height: 80vh;
width: 100%;
display: box;
}
mat-dialog-container{
padding-right: 30px;
padding-left: 30px;
padding-top: 10px !important;
padding-bottom: 0px !important;
}
You should remove the height from the #postForm. A height: 80vh makes it take up 80% of the height of the screen.
Since you are providing a fixed height to it, there will be empty space left if the image doesn't take up all the space.
Also your postImage has a height of 80%, the remaining space will be empty.
body{
position: relative;
}
.postImage{
/* height: 80%; this is your bug */
width: 100%;
}
.bigImage{ /* you don't need this level and even if use <figure></figure> not <div></div> */
text-align: center; /* this means empty space on sides when text is to short to fill, this class hasn't setted width, so it should adjust to content witch is an img - block element without any wraps */
display: block;
}
#postForm{
height: 80vh; /* this one may caused problems too */
width: 100%;
display: box; /* incorrect value */
}
mat-dialog-container{
/* padding-right: 30px; */
/* padding-left: 30px; */
/* padding-top: 10px !important; don't use !important instead of debugging */
/* padding-bottom: 0px !important; */
padding: 10px 30px 0; /* nice and readable instead of 4 lines */
}
If you set strict height value don't be surprised if it keep it. Good prepared css is an investment - works properly and maintaining is plasure without headaches.
.postImage{
height: auto; or 100%
width: 100%;
}
or don't give the height at all
Related
I'm new to webdev using html/css. Starting to learn, and I want to create a really simple thing.
Basically a responsive fixed box that never touches the viewport by 20px.
If you change the screen size, the box will always have a 20px margin, top, sides and bottom. I don't want scrolling at all!
Then at the center, I want to place a .gif that is about 40em that scales according to screen size.
My problems until now, is that I can't make that box at all, I've tried dozens and dozens of different solutions I've lost track of which ones, I've got 30 tabs opened with tutorials but none solve my problem.
Every try there is always a scrollbar, or the box has margins on top/left, but not bottom/right, or the gif is centered horizontally but not vertically, or there are margins but I can't control size of them....
Is this so hard? It would be awesome to have some directions, thank you!
This is what I currently have, but it's just one of the dozens of my failed attempts. (i didn't include the .gif)
body {
background: #f0e8e6;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div {
width: 90vw;
height: 90vh;
padding-top: 100px;
padding-bottom: 100px;
padding-left: 100px;
padding-right: 100px;
position: center;
top: 50%;
left: 50%;
background: #ffffff;
text-align: center;
overflow: hidden;
}
<div>
</div>
This is a little bit of an odd way to go about it, but honestly I really enjoy this method as it has very easy to understand logic behind it. Apply the margin to the parent element via padding, not the child element.
body {
background: #f0e8e6;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
padding: 20px;
box-sizing: border-box;
}
div {
width: 100%;
height: 100%;
background: #ffffff;
text-align: center;
overflow: hidden;
}
Firstly, you need to remove the default padding/margin inbuilt into the body. Once you do that, you add the padding to the body - this gives the 20px margin. Finally, you need to ensure that the body spans the width of the page, and the div spans the width of the body. This is achieved by their respective width/height properties.
A key property here is box-sizing. This honestly should be the default, but essentially it stops the container from growing when adding padding. If this wasn't here, the body will overflow the page.
To add the image in the center, you should be using flex. It's quite a big topic, but it works perfectly for these situations. Learn more about flex here, but for now below in an example. Note the align-items and justify-content properties, these are what align the image vertically and horizontally.
body {
background: #f0e8e6;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
padding: 20px;
box-sizing: border-box;
}
div {
width: 100%;
height: 100%;
background: #ffffff;
text-align: center;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>loiz</title>
<link rel="stylesheet" type="text/css" href="styling.css" media=”screen” />
</head>
<body>
<div>
<img src="https://via.placeholder.com/150C/O"/>
</div>
</body>
</html>
Note that the top and left css attributes only apply to elements with absolute or fixed positioning (see here).
Also, position: center is not a valid value. Check here for valid values.
One approach:
/* Using CSS custom properties to define
the known, repeated measurement: */
:root {
--margin: 20px;
}
/* setting the elements to all use the
same box-sizing method, use the same
font, margin and padding: */
*,
::before,
::after {
box-sizing: border-box;
font: normal 1rem / 1.5 sans-serif;
margin: 0;
padding: 0;
}
body {
/* removed the properties that don't apply
in the demo; using a background-color
to visualise the sizing and layout: */
background-color: white;
}
div {
/* display: flex allows us to more easily
position the contents
vertically/horizontally: */
display: flex;
/* using the calc function to calculate the
space left over from subtracting 2 * 20px
from 100vw (viewport-width units) to
calculate the width, and from 100vw
(viewport-height units) to get the height: */
width: calc(100vw - 2 * var(--margin));
height: calc(100vh - 2 * var(--margin));
/* applying the margin around the <div>: */
margin: var(--margin);
/* to easily visualise the layout: */
background-color: red;
}
div img {
/* to easily position the <img> in the
horizontal and vertical centre: */
margin: auto;
/* setting the width leaves the browser
to set the height appropriately to
maintain the aspect-ratio: */
width: 40vw;
}
<div>
<img src="https://via.placeholder.com/300.gif/09f/fff" alt="Placeholder gif">
</div>
References:
box-sizing.
calc().
display.
font short-hand.
margin.
Values and Units.
you have to use media queries for making it responsive for other devices , while provide a padding of 2% to the outermost div and then give and then place your gif in that div and provide that gif a padding also and you will get your required result
Here's an idea of how to accomplish this:
body {
background: red;
padding: 0;
margin: 0;
display: flex;
height: 100vh;
}
div {
width: calc(100vw - 40px);
height: calc(100vh - 40px);
background: #ffffff;
overflow: hidden;
margin: auto;
display: flex;
}
img {
width: 40vw;
margin: auto;
}
<div>
<img src="https://images.pexels.com/photos/10262654/pexels-photo-10262654.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</div>
There are some default padding and margin on body tag. You need to reset them first. Also html tag is not full height by default as well. You also need to make them fullscreen by adding width: 100% and height: 100%
And then you can resize your div correctly. You can use calc method in css. In your case; width: calc(100% - 240px) 240px is 200px padding (100px each) for both sides and 40px margin (20px each).
To center gif for you can use flex features rather than using text-align etc.
:root {
--margin: 20px;
--padding: 100px;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #f0e8e6;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div {
width: calc(100% - (var(--margin) * 2) - (var(--padding) * 2));
height: calc(100% - (var(--margin) * 2) - (var(--padding) * 2));
padding: var(--padding);
background: #ffffff;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
left: var(--margin);
top: var(--margin);
}
<div>
<img src="https://media0.giphy.com/media/WXZ5DqIOhQrxtkcszN/giphy.gif?cid=ecf05e47yzd9cgsu3pzebujrmdl3od4erxhdtwozizzjx2nc&rid=giphy.gif&ct=g" alt="Hell Yeah Snl GIF by Saturday Night Live" style="width: 500px; height: 280px; ">
</div>
I'm pretty newbie with HTML and CSS. So, I've got a problem with the width of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the width per cents a little or is there some flaws in my code that could cause this?
I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: http://jsfiddle.net/gj53jbz9/
body{
font-size: 15px;
margin: 0px;
background-color: lightgrey; }
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
#name{
padding: 5px;
font-size: 25px;
float: left; }
#navbar{
float: right;
text-align: right; }
#navbar a{
background-color: black;
display: inline-block;
width: 120px;
text-align: center;
padding: 10px 0px;
text-decoration: none;
color: lightgrey; }
#title{
clear: both;
text-align: center;
padding-top: 100px;
font-size: 45px; }
#content{
text-align: center;
width: 80%;
margin: 0px auto; }
<div id=header>
<div id=name>Name</div>
<div id=navbar>
Link1
Link2
</div>
<div id=title>Insert title here</div>
</div>
<div id=content>
<h3>Age of aggression</h3>
<p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
<p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
</div>
Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width).
#header{
padding: 30px;
width: 100%;
}
Either remove padding and add it to an inner element with no width set, or use:
box-sizing: border-box;
Which makes the width calculation include padding. :)
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Take a look at this part of your code:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS:
#header{
padding: 30px;
width: calc(100% - 60px);
height: 250px;
background-color: grey; }
It seems to work if you remove margin: 0px; from the properties inside body {}
I don't know why it has this behaviour
Every HTML element has some default values. Please check here:
https://www.w3schools.com/cssref/css_default_values.asp
You can also try to set all elements margin and padding as 0. Just like that:
*{margin: 0; padding: 0}
By default, HTML elements calculate their sizes based on the content only, so excluding the padding, borders and margins. To change that behavior, use:
box-sizing: border-box;
This makes the calculation include the padding and borders. You can add it to any element you want, but it is a common practice to add it to all elements:
* {
box-sizing: border-box;
}
Don't give padding from left and right to your header div.
Add some margin to name and navbar div
just like this
#header {
padding: 30px 0px;
width: 100%;
height: 250px;
background-color: grey;
}
#name {
padding: 5px;
font-size: 25px;
float: left;
margin-left: 40px;
}
#navbar {
float: right;
text-align: right;
margin-right: 40px;
}
It is because padding is being summed to width 100%.
Try to use box-sizing, like that:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey;
box-sizing: border-box;
}
Header.Width=100% and Header.Padding=30px are causing the problem.
You are telling the browser that the header will use the 100% of the width, PLUS a pad of 30px. So the width is 100%+30px of the space created by the padding.
Try moving the width to the body property so all the page will use the 100% of the available space. That should fix it.
left: 0px;
right: 0px;
width: auto;
position: relative;
I have the following code:
/* css */
.phone {
height: 100%;
width: 40%;
overflow: hidden;
padding: 0;
border-radius: 3%;
border: 2px solid red;
}
.phone .screen {
height: 50%;
overflow-y: auto;
background-color: #c3cee0;
}
.phone .nav {
background-color: black;
overflow: hidden;
color: white;
}
<!-- HTML -->
<div class="phone">
<div class="screen">
<p>Lorem Ipsum...</p>
...
<p>Lorem Ipsum...</p>
</div>
<div class="nav">
<p>Back</p>
<p>Home</p>
<p>Menu</p>
</div>
</div>
I want the phone to be responsive but in order to enable the scroll in the div.screen I need to set the height of the div.phone. The problem is that the red border is going beyond the phone's content.
I'd like the border to finish where the div.nav ends but I'm getting unwanted extra space. See this live demostration.
TL;DR
Live demostration.
I need to set a height (for div.phone) in order to enable the scroll for the text messages but then I get that extra space shown by the red border. How can I make div.phone (red border) be the same height of the whole content (without the extra space)?
Set height using calc().
.phone .screen{
height: calc(100% - 33px);
}
33px is the height of bottom nav.
Here is solution you need to remove height:100% prperty from .phone and define height in px in .phone .screen so it will work fine
Here is updated css
.phone {
height:auto;
}
.phone .screen {
height: 400px;
overflow-y: auto;
background-color: #c3cee0;
}
And here is live demo
I fixed the issue by using display: flex. Live demonstration.
Basically
.phone {
height: 50%; /* whatever height you need */
display: flex;
flex-direction: column; /* used to separate the divs vertically */
/* instead of horizontally */
border-radius: 3%;
border: 2px solid red;
}
.phone .screen {
flex: 9; /* screen will take 9/10 spaces from the div.phone */
overflow-y: auto; /* enables scroll */
}
.phone .nav {
flex: 1; /* nav will take 1/10 spaces from the div.phone */
}
I have a problem with Firefox on a really specific graphic implementation.
I think you may understand the problem just by testing this fiddle: on firefox you'll see the problem, on any other browser you'll see the expected result (including IE9).
Design I need:
PNG illustration
I have a main block (dashed border) with a fixed width.
There is 2 lines, one above the other, within the main block. The 2 lines must be align on the right of the main block
Each line contains 2 children. The left ones have a dynamic text (gray background), the right ones are optionnals (blue background). The above right one contains an icon (orange) with a fixed width, the bellow right one is a dynamic temperature (with one decimal maximum).
Blocks are separated by a fixed 5px margin.
Texts and icon must be vertically centered.
In any case, the 2 lines need to have the same width: the smaller one takes the width of the bigger one.
If one line (or both) becomes too large for the main block, the left text (gray background) automatically linebreak.
HTML Code:
<div class="main-wrapper">
<div class="container">
<div class="content upper">
<div class="right-block"><!-- This block is optionnal -->
<div class="icon"></div>
</div>
<div class="left-block">
<div class="vertically-centered">
<p>
Some dynamic text
</p>
</div>
</div>
</div>
<div class="content lower">
<div class="right-block"><!-- This block is optionnal -->
<div class="vertically-centered">
<span>
21,5°
</span>
</div>
</div>
<div class="left-block">
<div class="vertically-centered">
<p>
Some other dynamic text
</p>
</div>
</div>
</div>
</div>
</div>
CSS Code:
/* utilities */
.vertically-centered {
display: table;
height: 100%;
width: 100%;
}
.vertically-centered > * {
display: table-cell;
vertical-align: middle;
}
/* custom styles */
.container {
display: inline-block;
float: right;
max-width: 100%;
}
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
}
.right-block, .left-block {
height: 100%;
}
.right-block {
float: right;
font-size: 42px;
margin-left: 5px;
background-color: lightblue;
}
.left-block {
font-size: 25px;
line-height: 25px;
overflow: hidden;
padding: 0 20px;
text-align: left;
background-color: lightgray;
}
.upper .right-block {
width: 85px;
}
.lower .right-block {
padding: 0 15px;
}
.icon {
position: relative;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
background-color: orange;
}
What I already tried:
Put a display: inline-block on the .left-block div, as suggested here, but it doesn't satisfy the need to have the same width on both lines.
Put a display: inline-block on the .content div; makes the line 100% width on other browsers, and create a big right gap within the .left-block on firefox.
Use white-space: nowrap on the .left-block; didn't help.
Make the .left-block div floating (right or left), but it doesn't work if the text is too large for the main container
And a lot of other things but not a single one compatible with all the browsers (Chrome, Firefox, Safari, IE9+, Edge)...
A precision although I don't think it will change anything: it is responsive.
I'm trying something with flexbox but... IE9... If anybody has a suggestion.
You can use the CSS word-break property to allow line breaks in the middle of long words:
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
word-break: break-all;
}
I found out a solution with flexbox!
I added a display: flex to the .content div with flex-direction: row-reserve to keep the order of the element and still be able to use float: right for IE9.
In addition, there is a flex: auto property on .left-block divs to take as much space as possible (Note: IE11 needs flex-basis to be set to be able to calculate the space wanted by the flex-grow property. That's why I used auto instead of 0 on the flex property. See details)
The completed CSS code
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
display: flex; /* Initialize flexbox */
flex-direction: row-reverse; /* keep the order of the element */
border: 1px dashed gray;
}
.left-block {
font-size: 25px;
line-height: 25px;
overflow: hidden;
padding: 0 20px;
text-align: left;
background-color: lightgray;
flex: auto; /* the text blocks take all the available space */
}
Here's the fiddle with the correction. Sometimes IE9 takes 2 lines of text instead of 1 (the text is 2px larger that the container, I don't know why...) but atleast it's readable!
I've created a couple of simple buttons using a link and some CSS to give it a background and I'm trying to center it on my page. However, because the text in one of the buttons is longer than the other, the buttons are of different sizes and for consistency, I'd like them to be the same width.
How can I keep these buttons the same size? Trying to float them and use percentage widths results in them not being centered. The relevant markup is below.
<section class="buttonsSection">
<a class="button" href="#">Very Long Sentence</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 10px 15px;
background-color: deepskyblue;
color: white;
}
.buttonsSection{
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.buttonsSection a {
margin: 3px;
}
JSFiddle: http://jsfiddle.net/Dragonseer/eTvCp/11/
Answer
While both of the answer below are valid, I'm updating my answer to using Flexbox. Most modern browsers have excellent support for it, including IE11 which will be released in the very near future. Flexbox appears to provide a much better solution to doing complex layouts which requires less effort than it's alternatives, such as floating items.
use a fixed width with inline-block on the buttons.
Working Fiddle
.button {
padding: 10px 15px;
background-color:deepskyblue;
color: white;
display: inline-block;
width: 20%; /*or any other width that suites you best*/
}
.callToAction {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
using inline-block provides a little-bit of margin between the elements (caused by a white-space in the HTML) so I removed the marin from the CSS, but you can put it back.
Easily done with flexbox:
.button {
padding: 10px 15px;
width: 150px; /* Fixed width links */
background-color:deepskyblue;
color: white;
margin: 3px;
}
.callToAction {
margin: 30px 0;
display: flex; /* Magic! */
justify-content: center; /* Centering magic! */
}
Working Example
.button
{
width: 150px; /* Your custome size */
background-color:deepskyblue;
color: white;
margin: 3px;
padding: 10px 15px;
}
Section a
{
width: 150px; /* for your all buttons */
}