Is there anyway to add vertical scroll bars in Jekyll for really long code? I tried adding a Height attribute in _syntax.scss but with no luck. The syntax highlighter I'm using is rouge and the theme I'm using is here: https://github.com/mmistakes/hpstr-jekyll-theme
Yes, make sure you add this CSS to your theme:
pre.highlight {
max-height: 200px; /* Change to your desired max height */
overflow-y: scroll;
}
Update.
Using the OP URL provided here's what I did:
Lookp where the class highlight is defined and add this to the end of its declaration:
.highlight {
[...]
border: 1px solid #dbdbdb;
background-color: #272822;
border-radius: 3px;
/** This part **/
max-height: 300px;
overflow-y: auto;
}
Results:
Related
First of all, I do search and research and try this about a week and has no clue.. so I thought I have earned my right asking somewhat simple, haha!
For some reason, it looks like, width: 210mm; doesn't work as I want. Following screenshot rendered as print mode with F12 tool on chrome.
This is css..
#media screen {
body {
background-color: #eeeeee;
counter-reset: page-number;
}
}
#media print {
#page {
size: A4 portrait;
margin: 0mm;
}
html, body, .page-frame { max-width: 210mm; }
.page-frame {
margin: 0;
}
}
.page-frame
{
overflow: hidden;
position: relative;
page-break-after: always;
background-color: white;
width: 210mm;
height: 297mm;
padding: 30mm 20mm 20mm 20mm;
border: 1px solid #dddddd;
column-count: 2;
column-gap: 5mm;
column-rule-width: 2px;
column-rule-color: var(--secondary);
column-rule-style: solid;
counter-increment: page-number;
margin-top: 1em;
}
/* page layouts */
.page-header { position: relative; column-span: all; margin-top: -17mm; margin-bottom: 2mm; height: 15mm; border-bottom: 2px solid var(--secondary); }
.page-footer { position: relative; column-span: all; height: 10mm; padding-top: 2mm; border-top: 2px solid var(--secondary); text-align: center; margin-top: 2mm; }
.page-header > div, .page-footer > div { position: absolute; width: 100%; height: 100%; }
.page-footer .page-number:before { content: counter(page-number); }
.column-frame { height: 100%; width: 100%; }
In other attempts, including uploaded image, the grey area (body element) remains and surround expecting-paper area and I cannot get rid of this surrounding grey area.
Also, .paper-frame div itself looks smaller than actual a4 size.. and I cannot understand whats happening at this point.
All I want is the .page-frame element properly rendered as A4 size on both screen and print.. and it's hard!
I'm using bootstrap 4 on laravel 7.x and latest version of Chrome browser..
Edit 1 --- Chrome Issue #273306 https://bugs.chromium.org/p/chromium/issues/detail?id=273306
Could it be that problem is the same issue in above link? .. maybe?? or not?.. still I cannot solve this. In my previous work, I used https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css for A4 rendering and it works, but I cannot find whats crucially different so cause the problem.
I've worked with chromes print function in the past and the best way i found to fix these kinds of rendering problems was to brute force it.
Basically change the .page-frame size until it fits.
Although I have to say that your problem seems weird to me since if I remember correctly then the pixel sizes of your .page-frame are inline with what I used.
From the information I can gather from the picture, chrome might be including the margins of .page-frame in to the render. So zero them out forcefully in css.
You could also try to set the "scale" in print options higher to see if that fixes the problem.
For the start, I'd like to introduce might be a rookie problem that there is !important value inside bootstrap.print module.
When you print out, browser using #media print script, yes?
Since I use laravel, hence using webpack, so I generate app.css file that include bootstrap.
During that phase, there are two variables named $print-page-size and $print-body-min-width at the end of node_modules\bootstrap\scss\_variables.css
/* ..(inside node_modules >> bootstrap folder)/_variables.css */
..
// Printing
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
This cause the problem. It's not a bug or any. Well, if you compare the size of actual a4 paper and rendered paper on screen, there might be some difference between those two but it's not a problem. Size is different but result is resemblance.
When you look inside of resource\sass\app.scss file, bootstrap imported after custom scss files like custom or variables.
You can specifiy $print-page-size and $print-body-min-width parameter before importing default bootstrap _print module. When you do that, specified parameter overwrite those value so problem solved. I just set those two value like below.
/* resources/sass/_variables.scss file */
// print
$print-page-size: a4;
$print-body-min-width: auto;
..hey. I sovled!
please, I have a problem with terminal simulator. I want show one line in full length without wrapping of course but text (text-align: left of course). It's fine in desktop but if you will smaller the window you will see horizontal scrollbar. I solve this with max-width: 100vw but then scrollbar is still visible below the text. It's for desktop. I think that this is solved. But have you some better ideas for terminal emulator? What library is standard used which can copy your code, etc...? Thank for advice
My html scratch
<div class="terminal">
<pre class="terminal">cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
and css scratch
.terminal {
// Layout
padding: 5pt;
border-radius: .5em;
display: inline-block;
// Colors
background-color: $secondary;
color: $color5;
// Text
font-family: monospace;
font-weight: $font-weight-bold;
line-height: $terminal-line-height;
text-align: center;
}
.terminal pre {
// Layout
overflow-x: auto;
margin: -17px; // This is for compatibility with mobile devices
// Text
text-align: left;
}
Don't worry about variables, I'm using Sass for normal programming. But I have some questions please:
It's needed to have negative margin? I read that it's for mobile browser compatibility. And yes, otherwise page is scroll-able which is really ugly. But the question is, existing most modern solutions for terminal emulator?
It's better use <pre> or <textarea> for terminal simulator? Thank you
Full my code is on my codepen
Thanks for any advice
PS: My desire is avoid Javascript or Bootstrap for now. Thank you for understand
Best Regards
If I understood well, please check if this is the behavior you're wanting to happen :
.terminal {
width: 90%;
height: 100px;
padding: 10px;
background: #000;
color: #0f0;
border-radius: 10px;
font-family: monospace;
text-align: left;
}
.terminal pre {
margin: 10px;
padding: 10px;
overflow-x: scroll;
overflow-y: hidden;
}
<div class="terminal">
<pre>cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
You had both items with the same class which was conflicting with the browser applying the styling. And if you want the scrollbar to appear only horizontally, just make sure also to hide the vertical bar with overflow-y: hidden;.
Here's a fiddle, so you can resize the window and see it working responsively. Hope it helped!
JSFiddle
I have an issue with quantity element in checkout that its overlapping the number value making hard for customer to add multiple products. If I use {display:none} css value it hides not only text overlapping but "QUANTITY" text as well. Its only on detail page where user needs to add quantity of product. I couldn't find a way to fix this. This is the url and help is much appreciated. is also attached.
I'm not sure which selector you use display: block but it should work:
.quantity .screen-reader-text {
display: none
}
I would suggest implementation of the .screen-reader-text css class as documentation to preserve accesibility:
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
Seems like your theme is missing the css definition which should fix your problem without enforcing display: block.
Try add this to your custom CSS:
form.cart td.value label.screen-reader-text{
visibility: hidden !important;
}
or:
form.cart td.value label.screen-reader-text{
display: none!important;
}
I am using Bootstrap Modal Plugin
$("#summaryFileDisplay").html(data.summaryfileContent);
$("#myModal").modal("show");
In above code data.summaryfileContent contains html and css data which i am rendering into summaryFileDisplay id
Modal rendering is fine, but it make changes in the parent CSS as well.
How can i avoid the same
Add .modal-dialog before all the styles rendering in modal. So it will make styles exclusive for Bootstrap dialogs.
/*
e.g.
Current CSS code.*/
.lineBorder {
border: solid 1px #000;
}
/*Change above to*/
.modal-dialog .lineBorder {
border: solid 1px #000;
}
I have recently noticed a scroll-behavior property that I can specify in my css. It can take only 2 properties: inherit and initial. I have never heard/seen it before, so I tried to look at it. The problem is that all the links are going into explaining different things about overflow property.
Then I tried to test it.
<div id="scroll">
<div id="inside">
</div>
#scroll{
width: 100px;
height: 500px;
scroll-behavior: inherit;
overflow: auto;
border: 2px solid black;
}
#inside{
height : 1000px;
}
The problem is that I see no difference. So what does it do?
Noticed it pop up in my Chrome Inspector as well, which lead me to this post...
What is the Scroll-Behavior?
Specifically referred to as CSSOM-View 'Scroll-Behavior' property, the css property was created to integrate more flexibility in CSS for DOM item scrolling. Most 'scroll-to' options that are built for websites are typically built on a JS library or plugin. Like others have mentioned, here is the release documentation - http://dev.w3.org/csswg/cssom-view/#scrolling
The current adopted scroll-behavior of the DOM is set to by anchor tags (example: Click Me). When this CSS property is fully adopted in all browsers, and correctly implemented (Check out this discussion : https://groups.google.com/forum/#!topic/mozilla.dev.platform/mrsNyaLj3Ig). You will be able to toggle the 'instant' anchor tag scroll to more of to a 'smooth' scroll.
The real question is when we this property be available in edge browsers? Currently, it is recognized by Firefox & Chrome, but the property is not 'Active' as far as research has gone.
nav{ float:left }
#scroll {
width: 350px;
height: 500px;
scroll-behavior: smooth;
overflow: scroll;
border: 2px solid black;
}
#inside1 {
height: 1000px;
background-color: blue;
}
#inside2 {
height: 1000px;
background-color: orange;
}
#inside3 {
height: 1000px;
background-color: red;
}
<nav>
#1
#2
#3
</nav>
<div id="scroll">
<div id="inside1"></div>
<div id="inside2"></div>
<div id="inside3"></div>
</div>
Check out the JSFiddle to see the implementation of how the instant scroll via anchor tags currently works through the DOM - http://jsfiddle.net/timcasonjr/5t0so7n7/3/