This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 3 years ago.
I am trying to display a div instead of element in fullcalendar using html and css via jquery as follows:
$(element).css("display", "none");
$('.fc-day[data-date="' + event.start.format("YYYY-MM-DD") + '"]').append("<div class='booked'><span>Booked <br><small>for date</small></span></div>");
And css
.booked{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background-color: #CD5C5C;
cursor: not-allowed;
pointer-events: none;
color: #fff;
}
Although, its working fine as intended on chrome but not on other browsers such as firefox.
Chrome:
Firefox
Update:
If I inspect each container:
In chrome
<td class="fc-day fc-widget-content fc-sun fc-future" data-date="2019-06-23">
<div class="booked"><span>Booked <br><small>for date</small></span></div>
</td>
But in case of firefox, its not showing inner element i.e div .booked
CODEPEN LINK
You can check this link its showing my problem, you can check in chrome and firefox.
CODEPEN LINK
What you mising is, you forget making the td height 100% too. So you need add css for the td. In my opinion, try to add this css
.fc-bg td {
height: 100%;
}
and it will work.
Already trying on the pen, and it's working. CodePen
Related
This question already has answers here:
Text in a flex container doesn't wrap in IE11
(13 answers)
Closed 4 years ago.
I have a Flexbox container that's part of a two column container. This all looks good in Chrome, FF, etc except IE11. It has two children:
.container
h3 Title
p body
and my container:
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 45px 25px;
position: relative;
and it looks like this in IE11:
where it's cut off on both sides.
I've tried adding flex-basis, flex: 0 1 [...], max-width, overflow: hidden but to no avail. It still won't stop the cut offs. Is there anything i'm doing wrong?
I fixed it. Weirdly adding width: 100% to my p tag fixes it.
When viewing the following demo on IE11, there is an issue in which the content is displayed aligned right and pushed outside of the screen.
Codepen Demo
Here is the code that justifies the content center:
.search-results {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
You can see the issue in this screenshot here:
I'm using browserstack IE 11 on windows 10 to emulate.
It seems to be calculating the width of the flex wrapper greater than it actually is. No amount of setting max-/width on the element, HTML or body seems to fix it. I understand IE11 has some flaky support for flexbox, is there a property I'm missing? Vendor prefixes are being added by Codepen, so I should be covered on that basis.
Flex-basis should be set to avoid these problems in IE. Change the flex property of the ".search-results__list" to flex: 0 1 712px. Check the example below:
http://codepen.io/anon/pen/QKKpGx
IE 10-11 don’t allow unitless flex-basis values in the flex shorthand.
For more info: https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
This question already has answers here:
Last margin / padding collapsing in flexbox / grid layout
(4 answers)
Closed 5 years ago.
I'm trying to get a centered dialog-like content with minimal markup and CSS and I almost got it working with the following code (you can try it in CodePen here: https://codepen.io/rosenfeld/pen/Rxgwrq):
#container {
display: grid;
padding: 1em;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background-color: white;
align-content: center;
justify-content: center;
}
#item {
text-align: justify;
font-size: 20px;
text-shadow: 1px 1px lightblue;
max-width: 400px;
background-color: lightyellow;
padding: 1em;
overflow: auto;
}
h1 { text-align: center; color: darkred; }
a { color: darkred}
<html>
<head>
<title>404 - Not Found</title>
</head>
<body>
<div id=container >
<div id=item>
<h1>404</h1>
Sorry, the page you are looking for does not exist. You may want to navigate to our main page. If you just clicked on a broken link, please get in touch so we can fix it.
</div>
</div>
</body>
</html>
The only issue I found was that the right padding of the item is not respected when the content overflows. Try shrinking the window width as much to force the horizontal scroll bar to appear and you'll notice that the item padding-right is completely ignored.
Is it possible to fix this without changing the markup or using :before and :after pseudo-selectors in the CSS?
P.S.: My first attempt to implement this was using Flexbox but I found several issues that don't seem to happen with grid layouts. For example, with Flexbox I was forced to use "margin: auto" for the item instead of the alignment properties, as they would make the top content disappear. Another difference is that with grid layout the bottom padding is respected, the only issue being the right padding (Update: in Chrome, but not in Firefox, for example, so this is not consistent among browsers). Using CSS grids allowed me to get closer to what I want with less and cleaner code when compared to using Flexbox. Also, the problem with using "margin: auto" is that you're unable to actually set up some margin to the item.
This is because the word can not be broken by a line break. And if it does not fit, part of it is on the "territory" of padding.
For exam give to .item property word-break: break-all;.
This question already has answers here:
How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
(3 answers)
Closed 7 years ago.
I have discovered what I believe to be a bug in Firefox versions 34 and above with regards to the behavior of display: flex.
I can confirm the code has always worked in all modern browsers, and still does, but Firefox 34 and the recent Firefox 35 beta, the behavior is totally inconsistent.
I have created a fiddle that demonstrates the different behavior: http://jsfiddle.net/ntkawu63/
Launch that in Firefox 34+ and it will ignore the max-width: 100% on the image. In any other browser, including Firefox 33, it will apply the max-width to the image and display normally.
<style>
.mediaContainer
{
zoom: 1;
overflow: visible;
position: relative;
}
.mediaCenterContainer
{
display: flex;
justify-content: center;
align-items: center;
}
.imageContainer
{
margin: 0 auto;
}
.imageContainer img
{
margin-bottom: 10px;
max-width: 100%;
}
</style>
<div class="mediaContainer mediaCenterContainer">
<div class="imageContainer">
<img src="http://dummyimage.com/1920x1080/000/fff.png&text=This+is+a+flex+box+test+for+Firefox+340x2B.+In+Chrome,+the+image+will+be+max-width:+1000x25.+In+Firefox+the+image+will+be+centered,+but+not+have+a+constrained+width." class="Image Tag Crop" alt="My Dog" data-realwidth="1000" data-realheight="670" data-scalewidth="944" data-scaleheight="633" />
</div>
</div>
Is there something wrong with this code, or is this something that should be raised as a bug with Mozilla?
Edit—the original answer was not fully correct
The important aspects here are
The "flex item" div.imageContainer needs a positive flex-shrink value
The (display:inline) img child of the flex item needs its own constraint to ensure it doesn't overflow the flex item
In accordance with the W3C flexbox spec*, the flex item needs some kind of definite size constraint, which we can satisfy by delcaring min-width:1px or max-width:100% on .imageContainer; otherwise, in accordance with the spec, the .imageContainer must take its content's size, i.e. the full 1000px intrinsic size of the PNG image
OP's question already satisfied point 2, but not points 1 and 3. Here is the CSS which I used:
.mediaContainer
{
overflow: visible;
width:100%;
}
.mediaCenterContainer
{
display: flex;
}
.imageContainer
{
flex-shrink:1;
min-width:1px;
}
.imageContainer img {
max-width:100%;
}
… and here's a fiddle demonstrating it.
Many thanks to #dma_k for pointing out the error in my original answer.
*I usually hate linking to W3C specs, but this section is actually quite readable; I'd encourage people to read it.
Original answer
Firefox 36 (currently dev preview) gives the behaviour you expect if you constrain the div rather than the img. You can do this using flex-shrink:
.imageContainer {
flex-shrink:1;
}
… or the short-hand flex property:
.imageContainer {
flex: 0 1 auto;
}
… or using the max-width declaration you had placed on the img, but also on the div:
.imageContainer, .imageContainer img {
max-width:100%;
}
So Firefox allows flex elements to overflow their containers. I don't know the flexbox spec that well, but it seems natural that this would be the case; that's why the flex-shrink property exists.
I have a working example of vertically centering elements of unknown height, using three elements:
<section>
<div>
<img src="http://placehold.it/100x100"/>
</div>
</section>
And the CSS:
section {
display: table;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
}
div {
display: table-cell;
vertical-align: middle;
}
There's also a JSFiddle example here: http://jsfiddle.net/Y6KS9/
However I'd like to avoid using unnecessary wrappers if possible. Eg, having the img itself display as table-cell:
div {
display: table;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
}
img {
display: table-cell;
vertical-align: middle;
}
However this doesn't work - see the JSFiddle example at http://jsfiddle.net/U2c9R/ - the img is not centered within the div.
Is it possible to vertically center an image of unknown size within its parent using only two elements?
Edit: I'm aware of Flexbox, and intending to throw out the table cell hack completely once IE9 dies. But right now I need to support old browsers.
You could try to use the CSS3 Flexible Box Model.
You should check the browser availability. As you can see by the -webkit vendor prefix my Example currently works only in -webkit-based render engines. But i'm pretty sure it'll work in most modern browsers.
Here is an overview of browsers which supporting the Flexible Box Model: http://caniuse.com/#feat=flexbox
div {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
height:100%;
width:100%;
position:absolute;
}
Example: http://jsfiddle.net/U2c9R/4/
Update
For Cross-browser support for the CSS3 Flexible Box Model you could use Modernizr and a proper Polyfill which adds support for IE 6-9 and Opera 10.0+. The only hint is, this wouldn't work without JavaScript. But maybe this is an option?