I've been stuck on this for ages now. I'm building a FAQ section which, on desktop, has to have 2 columns on which it fills it's FAQ items. The items have a dropshadow and the whole is made with Bootstrap 4.
I've tried Flexbox, CSS columns. Now i've tried CSS Grid, however i still have the problem that whenever i open an accordion the item on the other side also expands it's body. I included a pen to demonstrate this.
Update: Forgot an important detail. It's a Wordpress website, with the Advanced Custom Fields (ACF) plugin i created a repeater field. Which outputs the FAQ items as an array. Therefore the amount of items is always dynamic. They need to fill out 2 columns, unless there is only 1 item ofcourse.
The html is:
<ul id="faq-accordion" class="list-unstyled">
<li class="card-faq" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
<div class="card-header" id="heading1">
<h3>
<button class="btn btn-link">Accordion 1</button>
</h3>
</div>
<div id="collapse1" class="collapse multi-collapse" aria-labelledby="heading1" data-parent="#faq-accordion">
<div class="card-body">contents
</div>
</div>
</li>
</ul>
My SCSS:
#faq-accordion{
padding: 40px 30px 60px 30px;
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(2, 50%);
grid-template-rows: auto;
grid-auto-flow: row;
height: auto;
width: 500px;
.card-faq{
margin: 0 15px 20px 15px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 3px rgba(0,0,0,.1);
}
The codepen: https://codepen.io/LemonNick/pen/NEjJPQ
Any help or suggestions would be appreciated! Been stuck on this for too long now.
if the only problem is, that the shadow is expanding, just wrap the contents of .card-faq in another div and move the shadow to there
#faq-accordion {
padding: 40px 30px 60px 30px;
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(2, 50%);
grid-template-rows: auto;
grid-auto-flow: row;
height: auto;
width: 500px;
}
.card-faq {
margin: 0 15px 20px 15px;
}
.shadow {
border: none;
border-radius: 5px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, .1);
}
<ul id="faq-accordion" class="list-unstyled">
<li class="card-faq" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
<div class="shadow">
<div class="card-header" id="heading1">
<h3>
<button class="btn btn-link">Accordion 1</button>
</h3>
</div>
<div id="collapse1" class="collapse multi-collapse" aria-labelledby="heading1" data-parent="#faq-accordion">
<div class="card-body">contents
</div>
</div>
</div>
</li>
<li class="card-faq" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
<div class="shadow">
<div class="card-header" id="heading1">
<h3>
<button class="btn btn-link">Accordion 1</button>
</h3>
</div>
<div id="collapse1" class="collapse multi-collapse" aria-labelledby="heading1" data-parent="#faq-accordion">
<div class="card-body">contents
</div>
</div>
</div>
</li>
</ul>
working in you codepen like so : https://codepen.io/anon/pen/gQWywr?editors=0100
Second isn't expanding it's body. But rather li is following height as it's in grid. You just need to replace shadow from li element to card-body. So from this one
#faq-accordion .card-faq
. I just checked body stays collapsed. But shadow from li element is making illusion.
Btw I have adjusted your pen
Perhaps you should consider using a couple of divs with a float on them:
<html>
<head>
<style>
.faq {
float:left;
}
</style>
</head>
<body>
<div class="faq"><!--Put your first column cards here--></div>
<div class="faq"><!--Put your second column cards here--></div>
</body>
</html>
Related
Im styling multiple boxes, it's only the first box whose top outline is not working. Here's my code. I'm using bootstrap in React. Border works. I have attached the relevent css.
EDIT: I hacked it by setting my outline-offset to negative the amount of pixels. so -3. Worked fine for me, and am wondering how it happened and how to avoid it.
.savedMeme--card {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100%;
padding: 10px;
}
.savedMeme--card:hover {
background-color: #e3e3e3c4;
outline: 3px solid var(--blue);
}
<div className="offcanvas offcanvas-end" tabIndex="-1" id="sidebar" aria-labelledby="sidebar--header">
<div className="offcanvas-header">
<h2 className="offcanvas-title" id="sidebar--header">Your saved memes</h2>
<button className="btn-close" data-bs-dismiss="offcanvas" type="button" aria-label="Close"></button>
</div>
<div className="offcanvas-body p-0">
<div className="savedMeme--card">
<!-- this is an imported component -->
<div className="savedMeme--header">
<span className="bi bi-bookmark-x-fill"></span>
<img src={props.url} style={{ width: "80px", height: "80px" }} alt="meme" />
</div>
<div className="savedMeme-body">
<p>
{props.topText}...
</p>
<p className="savedMeme--view-meme">view meme</p>
</div>
</div>
</div>
</div>
</div>
</div>
I have fixed your closing div tag issue and changed className to class and just defined css variable
:root {
--blue: blue;
}
Everything seems to works fine on hover.
:root {
--blue: blue;
}
.savedMeme--card {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100%;
padding: 10px;
}
.savedMeme--card:hover {
background-color: #e3e3e3c4;
outline: 3px solid var(--blue);
}
<div class="offcanvas offcanvas-end" tabIndex="-1" id="sidebar" aria-labelledby="sidebar--header">
<div class="offcanvas-header">
<h2 class="offcanvas-title" id="sidebar--header">Your saved memes</h2>
<button class="btn-close" data-bs-dismiss="offcanvas" type="button" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0">
<div class="savedMeme--card">
<!-- this is an imported component -->
<div class="savedMeme--header">
<span class="bi bi-bookmark-x-fill"></span>
<img src={props.url} style={{ width: "80px" , height: "80px" }} alt="meme" />
</div>
<div class="savedMeme-body">
<p>
{props.topText}...
</p>
<p class="savedMeme--view-meme">view meme</p>
</div>
</div>
</div>
</div>
I'm trying to make special title treatment Div go over a little bit or give the illusion of going out of its parent div like in the second picture I have tried many things but I need someone who can help me I'm too dumb in this case scenario :(
What I want:
What I have:
The current code:
<header class="bgg">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="card text-white border-light bg-dark col-lg-3">
<div class="cattitle">
<center><a href="<?php echo URL; ?>forsale" class="cata">
FOR SALE</a></center>
</div>
<div class="card-body">
<ul class="">
<li>Automobiles</li>
<li>Appliances</li>
<li>Baby & Kids</li>
<li>Books & Magazines</li>
<li>Cell Phones & Tablets</li>
<li>Computers</li>
<li>Electronics</li>
<li>Furniture</li>
<li>Motorcycles</li>
<li>Tools</li>
</ul>
</div>
More
</div>
<div class="card text-center col-lg-12 mt-4 selectionbox">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
Go somewhere
</div>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<div class="row">
Here is a demo of how it can be done. In between the top div (.bgBlue) and the bottom div (.theCards), I added a .flyover div that sits atop the other two divs, as you requested.
The magic is to style the middle (flyOver) div as follows:
z-index: 1 ==> raises the flyover div up above the other two divs (which both have the default z-index value of 0)
float: left ==> this takes it out of the flow, allowing the bottom .theCards div to nestle up against the top div
top: -50px ==> moves up the flyOver div by 50px (overlapping the top div)
height: 50px ==> this is important. The div INSIDE this one (.flyIn) is 100px - so it will spill out of this div by 50px, overlapping the bottom div by 50px. Since this div already was moved up 50px (to overlap the top div), and the inner div (.flyIn) is 50px longer than this div, the over-all effect is as you requested.
* {position: relative;}
span{display:inline-block;width:90vw;color:white;text-align:right;padding-right:30px;border:1px solid yellow;}
.flex-parent{
display:flex;
width: 85%;
margin:0 auto;
}
.bgBlue{
height:250px;
background: rgb(0,92,93);
background: linear-gradient(0deg, rgba(0,92,93,1) 0%, rgba(9,9,121,1) 150%);
}
.inline-box{
width:21.25vw;
height:200px;
border: 1px solid #ccc;
background:darkblue;
}
.thecards{
background: pink;
text-align:center;
}
.inline-card{
width: 18vw;
height: 100px;
margin: 0 2vw;
text-align: center;
color: white;
border: 1px solid #ccc;
background: grey;
}
.flyover{
z-index:1;
top: -50px;
float:left;
height: 50px; /* <=== 50px less than the .inFly div */
width: 100vw;
border: 1px solid green;
}
.inFly{
width: 85vw;
height: 100px; /*<== overflows the parent .flyover div by 50px */
margin: 0 7.5vw;
background:red;
border:1px solid purple;
color:white;
}
.centerText{
display:flex;
align-items: center;
justify-content: center;
}
<div class="bgBlue"><span>Click FULL PAGE at top right...</span>
<div class="flex-parent">
<div class="inline-box"></div>
<div class="inline-box"></div>
<div class="inline-box"></div>
<div class="inline-box"></div>
</div>
</div>
<div class="flyover"><div class="inFly centerText">Flyover Div</div></div>
<div class="thecards">Cards DIV
<div class="flex-parent">
<div class="inline-card">Image Here</div>
<div class="inline-card">Image Here</div>
<div class="inline-card">Image Here</div>
<div class="inline-card">Image Here</div>
</div>
</div>
I'm using ngbootstrap and angular, but I think the problem here is more of html/css matter.
I want to make a container to scroll horizonstally, I've found few threads about it, but cannot make it work in my case...
Here's my code
html:
<div style="width: 100%; background-color: rgb(177, 177, 177);">
<div class="container" >
<div class="my-container">
<h1>Usługi</h1>
<p>Nasza firma posiada uprawnienia UDT w zakresie montażu i konserwacji urządzeń dźwigowych, w tym:</p>
<div class="col-12 horizonstall-scroll" style="margin-left: auto; margin-right: auto; padding: 0;">
<div class="row">
<div class="card-container d-flex justify-content-center" *ngFor="let item of items">
<div class="card my-card" style="width: 18rem;">
<img class="card-img-top" src="{{item.smallImg}}" alt="lift">
<div class="card-body">
<h5 class="card-title">{{item.name}}</h5>
<p class="card-text">{{item.shortDesc}}</p>
<a class="btn btn-primary" (click)="openModal(item)" >Czytaj więcej</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
css:
.my-container {
padding-left: 15px;
padding-right: 15px;
background-color: rgb(216, 209, 209);
box-shadow: 0px 10px 25px 13px rgba(0,0,0,0.75);
}
.horizonstall-scroll > .row {
overflow-x: auto;
white-space: nowrap;
}
.horizonstall-scroll > .row > .card-container {
display: inline-block;
float: none;
}
Hi maybe this might help because I have had this problem before and I fixed it using this solution and its using bootstrap which is better in your case
Horizontal scrollable div's in a bootstrap row
hope this solution helps your needs, Cheers :)
I have a template of handlebars in which there are multiple div which i need to make clickable.
However, in my div the text is dynamic, how will i be able to make whole div clickable. Here is the code
<div class="row">
{{#each event}} {{#is this.event ../eventName }}
<div class="col s12 m3 13 al">
<div class="card ">
<div class="card-image">
<img src="/Small/{{this.imageId}}.JPG">
<span class="imageClick"></span>
</div>
<div class="card-action sp1">
<div class="action-time">
<a href="/{{this.imageId}}/love" class="like sp">
<i class="material-icons fav">favorite</i>
</a>
<span id="{{this.imageId}}" class="like-text">{{this.love}}</span>
</div>
<div class="action-time">
<a href="/{{this.imageId}}/laugh" class="haha sp">
<i class="material-icons laugh">sentiment_very_satisfied</i>
</a>
<span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>
</div>
<div class="action-time">
<a href="/{{this.imageId}}/sad" class="downvote sp">
<i class="material-icons down">trending_down</i>
</a>
<span id="{{this.imageId}}sad" class="downvote-text">{{this.sad}}</span>
</div>
{{!-- {{this.imageId}} --}}
</div>
<div class="card-action">
<a class="waves-effect waves-light btn share">button</a>
</div>
</div>
</div>
{{/is}} {{/each}}
I want to make my div action-time clickable with the link in the a tag. I tried to use the popular <span> solution like this but no use. It works for the last action-time making first two not working. How can i solve this.
Css code for action-time and card is:
.action-time{
display: inline-block;
border: 1px solid rgba(202, 202, 202, 0.733);
width: 32%;
padding-top:2px;
padding-left: 4px;
border-radius:8px;
}
and for card :
.card {
margin: 10px;
padding: 5px;
border-radius: 8px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card-action {
padding: 5px 0px !important;
/* padding-right: 5px !important; */
}
Here is what my webpage looks like, I have multiple of those cards
I want to make the whole area in border of heart clickable, rather than just the image to heart.
You can update your html so that the <span> is inside your <a>.
<a href="/{{this.imageId}}/laugh" class="haha sp">
<i class="material-icons laugh">sentiment_very_satisfied</i>
<span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>
</a>
Displaying your <a> as a block element will have it fill up the entire <div>. Then you can float your <span> to the right and style it accordingly until it's where you want it exactly.
.action-time a {
display: block;
}
.action-time span {
float: right;
}
You can write some javascript to handle the operation
$(" .action-time").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
Looks for a link inside div with class of "action-time". Redirects to that links value when anywhere in div is clicked.
I am using Bootstrap and I know how to make the buttons appear side by side but having issues achieving what I want.
When the buttons are side by side in a 100% width container everything is fine. However, if the second button is removed I would like the first button to fill 100%.
Is there a CSS only approach?
When the buttons are side by side in a 100% width container everything
is fine. However, if one of those buttons are gone I would like the
other button to fill 100%.
Is there a CSS only approach?
Yes. You can easily accomplish this with the flex-grow property of CSS Flexbox.
From MDN:
The flex-grow CSS property specifies the flex grow factor of a flex
item. It specifies what amount of space inside the flex container the
item should take up.
Basically, you can tell an element to take up all available width. So if there are two elements, they will share the space equally. If one element is removed, the other expands to fill the width.
Here's all the code you need to make this work:
HTML
<div id="container">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
</div>
CSS (relevant parts)
#container {
display: flex;
justify-content: space-around;
width: 100%;
height: 75px;
}
button {
flex-grow: 1; /* this one line tells button to stretch across all available width */
}
DEMO (click buttons for effect): http://jsfiddle.net/rjy6nvj2/1/
Note: Flexbox is supported by all major browsers, except IE 8 & 9.
CSS only solution would be to use only-child pseudo selector
* {
box-sizing: border-box;
}
.container {
width: 340px;
border: 1px solid rgba(0,0,0,0.1);
padding: 5px;
}
.btn {
margin: 0 5px 0 0;
padding: 4px 8px;
background: #5d4ca5;
color: #fff;
text-decoration: none;
text-align: center;
width:157px;
display: inline;
}
.container .btn:only-child {
width: 100%;
}
<div class="container">
<button class="btn">Button One</button>
<button class="btn">Button Two</button>
</div>
<div class="container">
<button class="btn">Button One</button>
</div>
See the working Fiddle here - http://jsfiddle.net/sjpx5c34/1/ (remove the second button and your only button will have 100% width.)
Trick named display:table-cell:
div { width:300px; border:1px solid; display:table; }
div > span { display:table-cell; border:1px solid red; width:50%; }
<div>
<span>First</span>
<span>Second</span>
</div>
<div>
<span>First</span>
</div>
Anthony Russo Hi there.
This code below will show how to first center what and when you need to center.
Because you have a reason why one button will be removed.
I set up a little sample jquery to remove the Second Button when you mouse over it, for this example.
When you mouse over, it also adds the class centerthis to the First Button to center it.
Hope this helps to get you started.
Updated
I see you have added to your post, so I have made added a small change to the my code.
When you have the second button removed, you also want the remaining button width to go 100%.
My code now does this for you too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Remove button and center</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 200px;
background-color: darkorange;
}
.block3 {
height: 40px;
width:550px;
padding-top: 3px;
background-color: blueviolet;
}
.centerthis {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.remove-on-hover {
display: none;
}
.change-width {
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12 block">
<div class="col-sm-6 block3 centerthis">
<div class="col-xs-6 centerthis" >
<div type="text" id="firstbutton" class="col-xs-6 btn btn-warning">First Button</div>
<div type="text" id="whenchanged" class="col-xs-6 btn btn-warning">Second Button</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
jQuery(function () {
var myMenu = $('#whenchanged');
myMenu.mouseenter(function () {
$('#firstbutton').addClass("centerthis change-width");
$("#whenchanged").addClass("remove-on-hover");
});
})
</script>
</body>
</html>