I can't figure out why pdf images I'm inserting into my HTML RMarkdown document are appearing inside of itty bitty scroll boxes with both vertical and horizontal scrollbars. This doesn't happen if I convert the same image to .png
The pdf image appears this way if inserted like so:
```{r, echo=FALSE, eval = TRUE}
knitr::include_graphics("image.pdf")
```
or like so:
I have an option set to include scroll bars in my code chunks, but if I remove it and re-knit the document the itty bitty image scroll box remains so this is not causing the problem (and is the only non-default setting):
```{css, echo=FALSE}
pre code, pre, code {
white-space: pre !important;
overflow-x: scroll !important;
word-break: keep-all !important;
word-wrap: initial !important;
}
```
Changing the option out.width = '100%' is resizing the scrollbox a bit but not removing it. Note that the pdf image is 6 x 2.5 inches, so not unreasonably large or anything. Any ideas to make my inserted pdf image not be in a scroll box at all? Thanks!
Related
I have a very simple HTML web page that has one large image on it with several text boxes (drawn in the image) that I would like to have a user click on and a popup window open up with more text. Currently, I'm using hotspots and the behaviors tag in Dreamweaver to call a pop-up window for each box on the image.
Q1 - How do I hide the scrollbars on the popup window in HTML?
Q2 - Is there a better way to do this with little coding like a modal popup? I have lots of these popups with different text in each I will need.
Thank you in advance!
To hide the scroll bar there is some CSS you can use, attached below. And for making popups, I have never tried hotspot and behavior tag however I just created one a few days ago using position absolute and using display none and block. Basically, you have to create the whole design of your popup anywhere in the code and you then set it to display: none, and whatever click you have for it to pop up, you add a little javascript function to it which will change the properties of that popup to display: block or anything else that you are using.
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
I created an SCSS file. Then copy-pasted all CSS styles of Normalize.css. Then I imported that file in style.SCSS. After that my webpage shows a horizontal scrollbar and white space on the right side. I can't find which portion of the code is responsible for this.
I am giving you all the Normalize.css code which I imported. Gist link
probably because of the overflow visible. Change that to overflow: hidden; or manage the width of your components. or if there is text expanding the with add something like: word-wrap: break-word;
its hard to say without seeing the actual bug
check out https://developer.mozilla.org/en-US/docs/Web/CSS/overflow fot mor info on overflow.
When on Wordpress I use font Pre, instead of seamlessly showing up formatted as Fixed space font, which I was going for, I get
fixed space font
inside rectangular space area, colored in gray color to accentuate itself
it has horizontal and vertical scroll bars on right and bottom, with arrows.
Those arrows look ugly and distract from the overall placement. moreover, there is nothing to scroll, so the arrows and scroll bars are meaningless.
Question:
How can I get rid of those scroll bars and arrows, while keeping fixed font styling? I have WordPress 4.1 with default theme, Twenty Fifteen.
More on "Pre":
For clarity, I do not mean HTML's <pre> tag. I mean the WP's Font Style called Pre. Upon examination, that font does insert HTML tags <pre> around the "Pre"-styled text block, but I am guessing it is the CSS styling or possibly the WP's Theme that causes those arrows and scroll bars to show up.
By the sound of it you need to use the CSS overflow property. You would add this to your theme's style.css file.
pre {
overflow: auto;
}
Note: If that doesn't work let me know and adjust it accordingly based on the article below.
See: http://www.w3schools.com/cssref/pr_pos_overflow.asp
In IE 9, in a textarea box, when I am typing to the end of a row (right before a horizontal scroll bar is activated), I press enter to insert a new line to avoid the scroll bar but it still appears after the cursor moves to the new line. How can I prevent this behavior?
Set wrap virtual like
<textarea cols=80 rows=12 wrap="virtual">
or Use CSS like
overflow-y: scroll;
overflow-x: hidden;
By default, IE 9 wraps text in textarea even breaking inside words when needed to make the text fit horizontally, and no horizontal scrollbar appears. So you must have something in your code to prevent this, probably the attribute wrap=off. In this case, a horizontal scrollbar indeed appears in the situation described. To prevent this, add
textarea { overflow-x: hidden }
But beware this implies that when a text longer than fits in the area is entered, it silently scrolls so that the start of the line is hidden. From usability perspective, this seems to be more serious than the problem fixed.
My page layout looks something like this:
<style type="text/css">
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="content-wrap">
</div>
You'll notice that the content-wrap div shifts its position a tad bit when the vertical scrollbar appears. One scenario is when the browser starts to progressively render the page without displaying the vertical scrollbar, then determines that a scrollbar is needed because the content is taller than the "fold". This shifts the div about 10px towards left.
What is the best way to tackle this problem without forcing the browser to always display the scrollbar?
I'm afraid the best way to solve this is to force the scroll bar to be visible at all times with html {overflow-y: scroll;}. The problem you have is that the "available area" shrinks with say 10 px when the scroll bar appear. This cause the calculated margin on your left side to shrink with half the width of the scroll bar, thus shifting the centered content somewhat to the left.
A possible solution might be to calculate the margin with JavaScript instead of using margin: 0 auto; and somehow compensate for the "lost" pixels when the scroll bar appear, but I'm afraid it will be messy and the content will probably move a little bit anyway while you calculate and apply the new margin.
If your site is "responsive" (reacts to width):
Step 1: Add width: 100vw to a wrapper element. This makes it as wide as the viewport, ignoring the appearance of a scrollbar.
Step 2: Add overflow-x: hidden to the content element. This will remove the horizontal scrollbar (created when vertical scrollbar appears, to allow the user to "look under" it).
"wrapper element" is in our case referring to another div around your #content-wrap
Will work for your case too, tested:
<style type="text/css">
body {
overflow-x: hidden;
}
#wrap-wrap {
width: 100vw;
}
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="wrap-wrap">
<div id="content-wrap">
</div>
</div>
Make sure nothing useful on your page is wide enough to get caught under the scrollbar.
For example, you can ensure that the sum of (horizontal padding + border + horizontal margin) of the content element is wider than the scrollbar).
If your site is fixed width + centered (your case):
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
This will add a left margin equal in width to the scrollbar when it appears. Which is 0 when it does not. Taken from here, but tested.
You must use:
html {
overflow-y: overlay;
}
Only supported by WebKit (Safari) or Blink (Chrome, Opera)
Use jquery and put this in the start of your tag:
<script type="text/javascript">
function checkheight(){
if ($(document).height() > $(window).height()) {
//that is if there is vertical scrollbar
document.getElementById('yourcenteredcontainer').style.paddingLeft='8px';
//8px because the scrollbars are (?always?) 16px
}else{
document.getElementById('yourcenteredcontainer').style.paddingLeft='0px';
}
}
</script>
and call the function checkheight(); in the end of your tag plus wherever you have onclick (or other) events that make the page longer or shorter in height.
If you can use Javascript, you can set the width of the content-wrap to the inner width of the window minus the standard width of a scrollbar.
You will run into some problems though.
The user will have to have Javascript enabled
You don't know what the width of the vertical scrollbar is, especially if the scrollbar isn't there! So you will have to guess. 20px seems like a good guess.
Different browsers have different ways of telling you want the inner width of the window is.
So if you can live with all that, you can do something like this (in pseudo code)
if window.innerWidth is defined :
set the width of the div to window.innerWidth-20px
else if we're running on Internet Explorer :
set the width to document.documentElement.offsetWidth-20px
otherwise :
we're out of luck and we best leave the width as is.
First I would recommend optimizing the HTML so that it won't take so long to load/render. If load/render is fast the scrollbar won't appear "too late". What is it that takes long to load/render? Check the network tab in chrome debug tools (F12). Do an audit in Chrome debug tools.
There are multiple things that could make the document "reflow", and the scrollbar appear even though the browser could have known the necessary measurements right from the start. Are you using tables for layout - don't! They may need multiple passes of rendering. Do you have images without width/height specified? Then the document will need to be rerendered when each image loads. Specify <img ... style="width: ..px; height: ..px">. Is the CSS sane and efficient?
If you can't get load/rendering speed down I think your best bet is to not use the browser's scrollbar if javascript is enabled. That way you can control it and place it absolutely positioned so that it won't affect horizontal positioning.
Let your slider start of with display: none. Monitor dom ready event as well as image load events as well as window resize events. When the page has been loaded, images have been loaded and when window gets resized just run the same function every time. It would determine if the scrollbar is needed and either display it or hide it.
You could use JQuery UI Slider for example and set it's maxValue to $(document).height() - $(window).height(), monitor the slider change event and then scroll the body to the value of the slider and so forth.
If javascript is disabled the fallback will be the regular scrollbar and there's nothing you can do about the slight horizontal shift then.
But really I think the problem of the horizontal shift is too small to spend time fixing with a custom scrollbar, and check that it actually works well on all platforms etc. Do HTML/CSS optimizations first.
You can try this solution: https://stackoverflow.com/a/67213174/14302216
But the widths can't be relative. Probably, width:100vw will work for the parent, but I'm not sure how you would set the child width. I'm afraid calc(100vw-16px) will not work. But if you can set like widht:800px for the child, it will be fine!