implemented custom zoom in and zoom out functionality. On clicking zoom in i increase [zoom] value to 0.25. On clicking zoom out i decrease [zoom] value to 0.25.
pdf container div has width of col-md-6 and max-height is set to 950px.
overflow-x and overflow-y are set to scroll.
On clicking zoom in when horizontal scroll bar appears then text after scrollbar shaded up.
How to solve this?
solved this by using background-color in rgba
background-color:rgba(255,255,255,255);
Related
In the following JSFiddle, the height change is not animated (using the transition property) when it’s being reduced:
https://jsfiddle.net/gcm0Ljrb/
When button A is pressed, the bottom left panel expands from height 0 to its full height. When B is pressed, the panel’s height reduces to a specific amount. Finally, when C is pressed, the panel’s height goes back to 0 (initial state).
I am trying to make all of these height changes animated using the transition property, but only button A’s height update is actually animated.
What could be going wrong here that is preventing the other two buttons from also being animated?
I noticed that when I have an element with a horizontal scrollbar, Chrome will add a scrollbar within the element without changing the height, but Firefox will increase the element height to make room for the scrollbar. Any way to control this behavior in either case?
I have a simple animation (via CSS) which brings my content from the bottom of the screen to the top. Margins are set to auto. My problem is that when this animation is coming up,on the right side it appears a scrollbar which persist till the end of the animation. I want to disable this scrollbar till the end of animation because my elements moves to the right for a few pixels after scrollbar disappers (because my margins are set to auto – and i want them to be so).
Thanks for any info!
set body{overflow:hidden;} before the animation and remove it after the animation ends.
I'm having some troubles with keyframe animation using CSS3. The position of the image being animated changes based on the window/screen size. I've tried to find a solution to this problem but I'm lost. I tried to specify a boundary so the animation only plays inside that, but it did not work.
See here, and try resizing the window. I know this has something to do with the position:absolute. My ultimate goal was to have the space background move left to right but still be dead in center if that makes sense.
Thanks for your help.
The problem is that the margin-left and margin-right properties are being set to auto, which adjusts the left margin of tdr-main, while space-bg's animation modifies the absolute left position. When the window is resized to a smaller size, the left-margin on tdr-main shrinks down to 45px, but the left position on the background image still moves betweens an absolute 342px and 450px.
If you embed space-bg inside the same container that has the auto margins on it,
<div id="tdr-main">
<div id="space-bg">
</div>
[...]
</div>
then both will stay centered, and the position on space-bg will be relative to the centered container div. Just use z-index with absolute or relative positioning to keep things stacked correctly.
I'm trying to make a fixed width, fixed height box that "mimics" overflow:scroll, but the scroll bar is actually the widow scrollbar (or a pseudo-window scrollbar). What I mean by that is, the box is sitting there and you have the scroll bar on the side of the browser scroll the box contents up and down. Possible with just css? If not, is there a solution with javascript?
Your box height is exceeding your window height. In following manner this could happen if you are in resolution 1024 by 768px
div style="width:400px; height:1000px; overflow:scroll;"
Solutions-
css- reduce height of the box
or
js- control height of the box [screen.Height] for different
resolutions