Why is there no vertical scroll bar on my markdown file? - scroll

Here is my entire .md file. Not only do I not have a scroll bar, but anything within the "pre" tags completely changes the font of the text within it. And also the code is viisble in the output. For example, "pre { white-space: ..." is visible in the output.
pre {
white-space: pre !important;
overflow-y: scroll !important;
max-height: 100px !important;
}
<pre class="table" style="max-height: 100px;">
### Header
<div align="center">...body...text...</div>
<div align="center">...body...text...</div>
<div align="center">...body...text...</div>
<div align="center">...body...text...</div>
<div align="center">...body...text...</div>
<div align="center">...body...text...</div>
<div align="center">...body...text...</div>
</pre>

Check the max-height within the style tags, you forget the colon ":" at the end.
The issue is that you can't use style tags (I think you're using .md for a Github project or related with that), check this question here in SO.

Related

Horizontal scrollbar inside angular-material (mat-tab) using FlexBox Grid

I am trying to implement a horizontal scroll bar to display images , but the width of the wrapper (scroll-container) container is overflowing. I also need to use FlexBox grid to make it responsive for different screen sizes.
Structure for HTML & SCSS is as given below. The container must be inside a mat-tab-group (Angular Material).
div 'item' will contain multiple items.
I am running it on chrome and have checked the inspector, apparently the mat-tab-body-wrapper display: flex property is causing this issue.
Is there any work around for this issue?
HTML
<mat-tab-group>
<mat-tab label="First">
<div class='row scroll-container'>
<div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
<div class='horizontal-slider'>
<div class='slider-container'>
<div class='item'>
<img src='' alt=''>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
SCSS
.scroll-container {
margin: 8px 0 0 0;
.horizontal-slider {
display: flex;
overflow-y: hidden;
max-width: inherit;
overflow-x: scroll;
box-sizing: border-box;
.slider-container {
.item {
display: flex;
margin-right: 8px;
img {
width: 124px;
height: 124px;
}
}
}
}
}
The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.
With overflow property:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>

Missing space between images in Bootstrap

I'm a beginner and use Bootstrap 4.
I've done this page: https://www.bitballoon.com/sites/stoker-austin-77536
I would simply like to have some white space between images.
I have tried countless tricks (none work) ie some of them:
Trying to use spacing of Bootstrap 4
Added a space between an image and a div using bootstrap
I also tried adding Padding on .img .img-fluid (I have now removed it)
my HTML:
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="add-padding" class="p-b-2">
<img src="../img/featured_image_grey1.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="add-padding">
<img src="../img/featured_image_grey1.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
<img src="../img/featured_image_grey1.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
My CSS:
.p-b-2 {
padding-bottom: ($spacer-x * 2) !IMPORTANT;
padding-bottom: ($spacer-y * 2) !IMPORTANT;
}
.add-padding {
padding-bottom: 20px !IMPORTANT;
margin-bottom: 20px !IMPORTANT;
}
.row .col-md-9 .add-padding{
padding-bottom: 20px !IMPORTANT;
}
img *{
padding-bottom:20px !IMPORTANT;
}
Thanks so much #Skelly: I've corrected the rookie errors (you've pointed to) and it now works :)
So the HTML corrections are:
"class attribute should only be used once in a tag
and remove semicolons in the img tags"
I created my Codeply:
http://www.codeply.com/go/ZZaV7zlnVO
My only CSS is now:
.col-md-9 {
padding-bottom: 40px !IMPORTANT;}
The problem came from the HTML errors mentioned above. I had unnecessary CSS (because I had tried so many CSS tricks, not knowing that HTML was the source of the issue). I have now simplified the CSS (see above).
Note: I have only used Bitballoon a week and did not know it was password protected - sorry.

How to Align Text Between Two Images?

I have two images, a left arrow and a right arrow, that need to go outside of the text "submit your picture here!" I am actually able to achieve the look I'm going for: http://i.imgur.com/1k1QTE4.jpg ,but I used z-index to do so, which does not stay relative to the text when the screen is made smaller/larger. What would you suggest is the best way to go about this? Here is my code for the text:
<article>
<br>
<p style="text-align:center;font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</p>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
There's not really anything (yet in the css) that pertains to this. Thanks!
Edit: Full CSS and HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#banner {width:100%}
#banner img {width:100%;height:auto}
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-
align:center;background-color:#222419}
nav li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}
a{float:left;
margin-right:58px;
margin-left:58px;
color:#000;
text-decoration:none;
}
body {background-image:url("background1.jpg");
background-size:1700px 850px;
background-repeat:no-repeat;
}
.white_bg {background-color:#ffffff;
padding: 1px;
}
.col-split-3 {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 450px;
}
.col-split-3 > div {
display:block;
}
-->
</style>
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>
<body>
<header>
<nav>
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" alt="DrawYourPetsBanner3"/>
</div>
<div>
<ul>
<li><strong>HOME</strong></li>
<li><strong>CONTACT</strong></li>
<li><strong>GALLERY<strong></li>
<li><strong>STORE</strong></li>
</ul>
</div>
</nav>
</header>
<section>
<aside>
</aside>
<article>
<br>
<div class="col-split-3">
<div><img src="arrow1.jpg" width="120" height="120"/></div>
<div><p style="font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</div>
<div><img src="arrow2.jpg" width="120" height="120"/></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</article>
</section>
<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" alt="Banner3">
</div>
</footer>
</body>
</html>
Edit 2 - Columns Centered
I found that the columns are similar to a table, and can only be centered in the css by adding margin-left and margin-right:auto:
.col-split-3 {
margin-left:auto;
margin-right:auto;
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
text-align:center;
width: 500px;
}
.col-split-3 > div {
display:block;
}
Now my only problem is getting "submit your picture here!" on two lines. I need to find a way to expand the width of the center column. Current screenshot:http://i.imgur.com/wxe79tS.jpg
There are a couple of ways to do this, just from me fiddling around with - Keep In mind: I've only tested these on Chrome because I don't have any other browsers installed on my computer.
Example 1
.img-left {
float: left;
}
.img-right {
float: right
}
.center {
text-align: center;
border: 1px solid black;
}
<br />
<div class="center">
<div class="img-left">
This is the left image
</div>
Text
<div class="img-right">
This is the right image
</div>
</div>
Example 2 (edited)
This one uses a trick of block-level elements inside an element with the column-count CSS property auto splitting into columns. I've not tested this with any large amount of text, but by your example it looks to be a fairly simple application. I've added a width to the parent element to change the spacing between the elements.
.col-split-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
text-align: center;
width: 300px;
}
.col-split-3 > div {
display: block;
}
<div class="col-split-3">
<div>Image 1</div>
<div>center text</div>
<div>Image 2</div>
</div>
These were sort of the first two ways that came to mind, I'm sure there's some way to use the ::before and ::after selectors to add images, I just don't currently have the time to fiddle with how.

Inline dropdown positioning issue

Please take a look at the following fiddle: http://jsfiddle.net/4LZnC/
I need to make it so when you hover on the .dropdown element, the .expandable to show but using the parent's background and border.
In other words, try removing position:absolute from .expandable. I need the same effect but without .expandable pushing the other content down. How do I achieve that? I really have no clue.
You will need to assign position absolute to the parent element and wrap it with a fixed height container.
HTML
<div id="wrap">
<div class="dropdown">
Flow content
<div class="expandable">
my expandable content here my expandable content here my expandable content here my expandable content here my expandable content here
</div>
</div>
</div>
CSS
div.dropdown {background:red; border:3px solid blue; position:absolute; width: 100%;}
div.dropdown .expandable { display:none; position: relative; top:100%; left:0; }
div.dropdown:hover .expandable { display:block; }
#wrap{ height:26px; }
Working Example http://jsfiddle.net/4LZnC/3/

How do I style a Jetpack status bar panel correctly?

When I create a status bar panel in Mozilla Jetpack, it looks like a featureless grey box which "interrupts" the status bar, as it lacks the borders/shading/etc. that make it look like a normal status bar panel.
How can I get it to look like other status bar panels?
There are two tricks involved. The more important one is to wrap your status bar HTML in a pair of <div>s which are styled using the -moz-appearance CSS declaration:
<div style="-moz-appearance:statusbar">
<div style="moz-appearance:statusbarpanel">
Your content here
</div>
</div>
This gets us close, but there is a slight lightening on the left-hand side of the real status bar which is quite noticeable when applied to a status bar panel in the middle of the bar. You can fix this by adding a 50-pixel padding and negative margin to the left-hand side of the outer <div>:
<div style="-moz-appearance:statusbar;margin-left:-50px;padding-left:50px">
<div style="moz-appearance:statusbarpanel">
Your content here
</div>
</div>
Et voilà! A status bar panel which is indistinguishable from normal ones. If your content is all HTML, you're done. If, however, you want your status bar panel's text to match as well, there are a few other styles to apply. Here's the full JavaScript source for how to do so, using an embedded stylesheet:
jetpack.statusBar.append({
html: (<><![CDATA[
<style type="text/css">
.statusbar {
font-family: Tahoma;
font-size: 11px;
height: 22px;
-moz-appearance: statusbar;
}
.statusbarpanel {
height: 18px;
line-height: 17px;
-moz-appearance: statusbarpanel;
padding-left: 4px;
padding-right: 4px;
}
</style>
<div class="statusbar">
<div class="statusbarpanel">
Your content here.
</div>
</div>
]]></>).toString()
});
(This example also uses E4X to simulate multi-line strings in JavaScript.)

Resources