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>
Related
I am working on a project. How can I use Javascript to reveal a centered image when clicking inside a box without using a button?
Like this you mean? I used javascript a little, but it works!!!
<!DOCTYPE html>
<html>
<body>
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetter()" id="one"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetterVerTwo()" id="two"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="revealImg()" id="image"></div>
<script>
function revealImg() {
document.getElementById("image").innerHTML = "<img src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetter() {
document.getElementById("one").innerHTML = "<img src='https://image.freepik.com/free-icon/x-symbol_318-1407.jpg' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetterVerTwo() {
document.getElementById("two").innerHTML = "<img src='https://d3qdvvkm3r2z1i.cloudfront.net/media/catalog/product/cache/1/image/1800x/6b9ffbf72458f4fd2d3cb995d92e8889/n/o/nope_newthumb.png' alt='Image' style='width: 50px; height: 50px;' />"
}
</script>
</body>
</html>
If you don't know javaScript a little, then there are js tutorials all over the web.
W3Schools is a good idea for short-term tutorials that teach you a lot, and is relatively fun to mess around with.
CodeCademy is a good long-term full code tutorial that will take a few weeks to learn but helps a million via your coding skill. You will need to sign up but it's free and saves all your work (code) when you're done.
You should load the image in your HTML and hide it using a CSS class like hidden. Then you will want to use addEventListener to run a function when the image is clicked, which toggles the visibility of the image. The centering of the image can also be done using CSS.
const blocks = document.querySelectorAll('.block');
blocks.forEach((block) => {
block.addEventListener('click', () => toggleVisibility(block.querySelector('img')));
});
function toggleVisibility(el) {
el.classList.toggle('hidden');
}
.container {
display: flex;
}
.block {
background-color: red;
padding: 10px;
}
.hidden {
display: none;
}
<div class="container">
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
</div>
add an onclick attribute to your boxes that calls a function that shows a hidden image.
<div onclick="showImages()"></div>
you can add onclick listener to div and in onclick function you can change div's class
<div class="redbox" id="box" onclick="showImage()"></div>
showImage(){
var box =document.getelementbyid("box").
box.classList.remove("redbox");
box.classList.add("image");
}
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.
I have four divs in a row and then under this the footer, however the footer moves behind the images instead of directly underneath the div.
I think it is something to do with the positioning but can't work out how to stop the overlapping.
Any help would be appreciated,
Cheers
<div id="image-nav">
<div id="image-nav1">
education
</div>
<div id="image-nav2">
repairs
</div>
<div id="image-nav3">
finance
</div>
<div id="image-nav4">
gold
</div>
</div>
<div id="footer">
<div class="wrapper">
<div id="footer-wrap">
<div class="section group">
<div class="col span_1_of_3">
links
</div>
<div class="col span_1_of_3">
details
</div>
<div class="col span_1_of_3">
newsletter
</div>
</div>
</div>
</div>
</div>
#image-nav{
width:100%;
background:#C03;
position:relative;
}
#image-nav1{
background:#0FF;
width:25%;
position: absolute;
}
#image-nav2{
background:#069;
width:25%;
position: absolute;
left: 25%;
}
#image-nav3{
background:#FF0;
width:25%;
position: absolute;
right: 25%;
}
#image-nav4{
background:#999;
width:25%;
position: absolute;
right: 0;
}
#footer{
width:100%;
background:#F9F;
}
EDIT - Adding overflow:hidden to the parent div makes it disapear and the footer has not be fixed to the bottom
to fix this overlap the parent element must have a set width and height.
#image-nav{
height:18px;
}
must be added for overflow:hidden to work
Updated Answer
#footer{
position: absolute;
bottom: 0;
}
Try this to fix the bottom fixed.
Try to change id to footer element it is useful.Or use predefined clearfix to the footer div.
jsfiddle.net/pgamj71f/5
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.
Using Twitter Bootstrap 3, I have a container, three div place holders, and three images that fill as links each floated side by side and taking up the entire row: When I minimize the screen to make it responsive, I only see the first image (the second two dissapear). What steps would I have to take to make sure that each image becomes responsive and sits one below the other at the minimize dmobile display screen.
Please Note: Each Img. already has class="img-responsive" applied to it.
HTML:
<!--Wide Display Container -->
<div class="wide-display">
<div id="firstholder">
<a href="home.html" title="Home" class="imglink"><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" id="electricone">
<div class="item1">
<h1 class="slickfont1" >First Title</h1>
</div>
</a>
</div>
<div id="secondholder">
<a href="office.html" title="Office" class="imglink"><img src="/images/ant.JPG" alt="City Lights Image" class="img-responsive" id="electrictwo">
<div class="item1">
<h1 class="slickfont1" >Second Title</h1> </div></a>
</div>
<div id="thirdholder">
<a href="reviews.html" title="Locations" class="imglink"><img src="/images/family.JPG" alt="City Lights Image" class="img-responsive" id="thirdelectric">
<div class="item1">
<h1 class="slickfont1" > Third Title</h1>
</div>
</a>
</div>
</div><!-- Wide Display Container -->
CSS:
.wide-display {
min-width:33%;
position: relative;
width: 100%;
height:100%;
margin-top:6px;
overflow: hidden;
height:366px;
}
/*! First img Holder */
#firstholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
margin-left:1px;
margin-right:0px;
}
.item1 {
width: 24%;
margin: auto;
position:relative;
}
#secondholder {
width: 450px;
height: 100%;
float:left;
display:inline-block;
margin-right:0px;
}
#thirdholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
}
You have to create Bootstrap Grid to make it work. You can just read the documentation here: http://getbootstrap.com/css/ it's pretty easy to understand. The divs that wrap you images need to have grid classes applied to them.