I have an image img inside a DIV modal, and a button + at the bottom right. This button calls the function imgfit() that toggles the image view as "fit and center inside the window" or "100%" (i.e., 1:1 pixel). It works, except for the fact that the scrollbars do not allow me to scroll the top/left of the image: the image is displaced negatively inside the div when seen at 1:1.
How do I tell the scrollbars that they "forgot" part of the image at the top/right? You can see the problem here (make your browser window relatively small to better see the problem).
The button calls the following function imgfit:
function imgfit()
{
if (fit) {
img.style.minWidth = "0px";
img.style.minHeight = "0px";
img.style.maxWidth = "100vw";
img.style.maxHeight = "100vh";
modal.style.overflow = "hidden"; // Prevent scroll of fullsize image
} else {
img.style.maxWidth = 'none';
img.style.maxHeight = 'none';
img.style.minWidth = img.naturalWidth+"px";
img.style.minHeight = img.naturalHeight+"px";
modal.style.overflow = "auto"; // Allow scroll of fullsize image
}
fit = ! fit;
}
This is the CSS of the image and the modal div (if I remove the align-items: center and the justify-content: center, problem is gone, but image is not centered):
.modal {
align-items: center;
justify-content: center;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
-moz-user-select: none;
user-select: none;
touch-action: manipulation;
}
.img {
cursor: no-drop;
position: absolute;
margin: auto;
touch-action: manipulation;
}
I solved the problem thanks to the neat article here (I didn't know that sitepoint.com site). The culprit was the position: absolute thing. Changing to display: grid solved the issue:
.modal {
display: grid;
align-items: center;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
-moz-user-select: none;
user-select: none;
touch-action: manipulation;
}
.img {
grid-column: 1;
grid-row: 1;
cursor: no-drop;
margin: auto;
touch-action: manipulation;
}
Related
i'm trying to create a custom button for my portfolio.
This button will be animated, the top part sliding in from left and the bottom part sliding in from right when hovered.
At the center of it will be the Category linked to this button.
Here an illustration :
How can i set my text in the center for every that i will create ? I can't use "position: absolute" property cause the reference would be the webpage and not the position where the custom component is declared...
Here my actual code :
CSS
const CatStyle = styled.div`
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.75);
height: 50px;
max-width: 150px;
background-color: white;
display: flex;
justify-content: center;
flex-direction: column;
cursor: pointer;
transition : background-color 0.5s ease-out;
:hover div{
display: flex;
}
.catContent {
position: relative;
align-self: center;
font-size: 1.5rem;
}
.topSlideAnimation {
display: none
height: 50%;
background-color: green;
}
.botSlideAnimation {
transition : background-color 0.5s ease-out;
display: none;
height: 50%;
background-color: blue;
}
`
JSX
const ButtonCat = (props) => (
<CatStyle>
<div className="topSlideAnimation"></div>
<div className="catContent">Hello</div>
<div className="botSlideAnimation"></div>
</CatStyle>
)
Not done any jsx so not sure what your catstyle tag would render, but if you can just render a button (or div), I would do the following
Make an outer container that is flex (for aligning text in center)
Make an inner container that is for the text (so you can position it relatively and add a z-index to it)
Add pseudo elements to your outer container for the animated bits (rather than having 2 empty divs)
* {
box-sizing: border-box;
}
.button {
display: inline-flex; /* make flex for centring */
justify-content: center; /* vertically centre */
align-items: center; /* horizontally centre */
position: relative; /* for adding absolute positioned children */
min-height: 50px; /* test value to show text is centred */
overflow: hidden; /* hide pseudo elements when not shown */
}
.button:before,
.button:after {
content: ''; /* make coloured animatable bits */
display: block;
height: 50%;
width: 100%;
position: absolute;
transition: all 1s ease-in;
z-index: 1;
}
.button:before {
top: 0;
right: 100%;
background: grey;
}
.button:hover:before {
right: 0;
}
.button:after {
top: 50%;
left: 100%;
background: darkgrey;
}
.button:hover:after {
left: 0;
}
.text {
position: relative; /* needs to have a higher z-index than the pseduo elements so text appears on top */
z-index: 2;
}
<button class="button"><span class="text">test content</span></button>
Inside my Pen you can see an image block with a title on the bottom. When the user hovers over the block, a description is shown on the bottom and the title is moved.
However, the title is on the correct location if the description contains 1 line of text. With 2 lines of text, the title is on top the description. How could I have the title always just above the description, without moving it all the way to the top of the block?
.trend-block {
position: relative;
width: 150px;
height: 150px;
&:hover {
.transition-title {
bottom: 35px;
}
.trend-text {
display: inline-block;
width: 120px;
color: red;
position: absolute;
bottom: 15px;
padding: 0 15px;
}
}
}
.trend-image {
width: 100%;
height: 100%;
}
.trend-title {
font-weight: bold;
color: red;
position: absolute;
bottom: 15px;
padding: 0 15px;
}
.trend-text {
display: none;
}
.transition-title {
transition: bottom .1s ease;
}
You could make a wrapper class absolute instead of the two spans (.trend-content); https://codepen.io/anon/pen/jxxbpx. The .trend-text does now have a max-height of zero as default. When you hover over it, the max-height will be te same as te container (Can't be a height of auto in order to make the transition).
I've been fiddling with the css of my slider (which is generated by super simple slider) but I can't get my slider to remain a consistent height when I drag my browser window smaller. What happens is the height gets scaled down proportionally as the window gets smaller. If I hit refresh on a smaller browser window, the height is correct but for some reason when I drag the window to a smaller size, it scales the slider down. Here is the code for the styling of the slider:
.sss {
display: block;
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.ssslide {
display: none;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
.ssslide img {
display: block;
height: auto;
margin: 0;
max-width: 100%;
padding: 0;
position: relative;}
.sssnext,
.sssprev {
width: 30px;
height: 100%;
margin: 0;
position: absolute;
top: 0;
opacity: 0.1;
}
.wedding-product-slidercontainer {
max-width: 100%;
width: auto;
height: auto;
}
I've tried changing the .sss position to static which initially makes it look right but yields problems. I've also tried making the height 800px for.sss and .ssslide but neither of these solutions seem to work. I can put the whole code up on codepen if you need it but I can't seem to figure out what to do.
I am using the Tizen 2.3.1 SDK for wearables and have run into an issue where no matter what I do to the style.css file, adding any new ids simply refuses to work.
* {
margin: 0;
padding: 0
}
html, body {
width: 100%;
height: 100%;
background-color: black;
}
#str_day {
position: absolute;
display: -webkit-flex;
width: 50%;
height: 50%;
background: yellow;
color: yellow;
z-index: 4;
opacity: 1;
}
h1 {
font-size: 1.4em;
margin: 10px 0 20px 10px;
color: #6587ac;
}
#box {
display: -webkit-flex;
-webkit-align-items: center;
width: 100%;
height: 100%
}
.canvas {
background: #000;
width: 320px;
height: 320px;
margin: auto;
}
This is my code. I am trying to add the str_day id however it doesn't show up when I run the package through the emulator. The rest of the css (the canvas element, mainly) works fine, but str_day just doesn't show up. I tried specifying the z-index and opacity in case some weird issue was occuring but that doesn't seem to be the problem.
This is my full code on github.
https://github.com/JoyfulOwl/RadialWatch/commit/86d096710c7187b6b3679e02416548e18a3e986e
Probably because of improper CSS layout str_day is rendered/painted outside the viewport of your watchface because of which its not visible.
I think better would be to use canvas fillText command to print the date on canvas.
Try below example.
var canvas = document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.font="30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText(str_Day, mCenterX, mCenterY); // mCenterX & mCenterY are the position where text has to be shown.
I am using the code available here in my fiddle here.
The problem is that the text in the info window is appearing like this:
It should say: You are here. (in a single line)
Using Firebug, I changed the text's parent style to have width 75px but then a horizontal scrollbar appeared on the text in the info window. I tried to hide that scrollbar using Firebug and it worked but when I put it in the code, the scrollbar appears again.
CSS:
*{
margin: 0;
padding: 0;
}
body{
font-family: arial;
font-size: 62.5%; /* so, 10px = 1rem */
}
#button-container{
}
button{
color: white;
background: #4196c2;
border: 0rem;
border-radius: 0rem 0rem 0.5rem 0.5rem;
padding: 0.5rem;
outline: none;
display: block;
margin: 0 auto;
}
#show-hide{
height: 1.5rem;
line-height: 0;
}
#map-canvas{
z-index: -1;
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.gm-style-iw div{
/*width: 75px;
overflow: hidden;*/
}
.gm-style-iw div div{
/* overflow: hidden;*/
}
How do I fix this?
You can control infoWindow content width by putting html with inline styles in its content like this:
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: '<div style="width: 75px">You are here.</div>'
});
this width is changed dynamically and put into inline styles which have priority over css, thats why it gets overriden even when you put changes in css