This is my Vue code and I am using bootstrap-vue, I am using the sidebar inside the card body Ideally it should only appear inside the card-body but it's not working. How can I make it fit either inside the outer div or b-card body?
<template>
<div class="">
<div>
<b-card title="Card Title" body-class="text-center" header-tag="nav">
<template v-slot:header>
<b-nav card-header tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</template>
<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>
<b-card-body>
<b-sidebar visible="true" title="Sidebar" shadow>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img
src="https://picsum.photos/500/500/?image=54"
fluid
thumbnail
></b-img>
</div>
</b-sidebar>
</b-card-body>
<b-button variant="primary">Go somewhere</b-button>
</b-card>
</div>
</div>
</template>
The sidebar wasn't really designed to be inside a container. but instead be used as an off-canvas menu for the entire page.
However, you can hack it a bit to fit your needs with a little CSS.
The sidebar is position: fixed by default, so that it is fixed to the viewport.
You need to change this to position: absolute, so that it will be positioned based on the closest parent that is position: relative. In this case that's the card.
In the snippet the sidebar goes over the title. If you want it only inside the body, all you need to be is wrap it in another element with position: relative
new Vue({
el: "#app"
});
body {
padding: 1rem;
}
.my-sidebar.b-sidebar-outer {
position: absolute !important;
height: 100% !important;
}
.my-sidebar .b-sidebar {
position: absolute !important;
height: 100% !important;
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<!-- The height is only here for the example -->
<b-card style="min-height: 300px;" class="overflow-hidden" no-body>
<b-card-header>
<b-card-title>Title</b-card-title>
</b-card-header>
<b-sidebar id="sidebar-1" title="Sidebar" shadow class="my-sidebar">
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
</div>
</b-sidebar>
</b-card>
</div>
I solved by modifying the style of the element by using JQuery where top': '60px' is going to be the hight of the navbar.
mounted() {
$('#sidebar-1').css(
{'top': '60px',
'opacity': '80%'
}
);
},
Related
I have a Parent class component and a child. The child is going to be a footer component within a <Modal /> (MS Fabric UI).
The problem is that the prev and next buttons which I'm attempting to keep static at the bottom of the modal, move in relation to the content in the modal. To elaborate, they hug the bottom of the lowest field of whatever page they are on, so when pages are changed, they jump up and down. I want them fixed. I've managed to do this on another web part I made but because this is a modal I think it's slightly different in regards to the div blocks and CSS.
The <Footer />component is within a div block that houses the <Modal /> and a div block that houses the entire render(). There is no styling CSS on either of the 2 housing <divs>. The form that I have created allows a user to click on an item and then this shows the modal with the items details. The modal has several pages which can be changed with prev/next button. These are the buttons that I want to fix. This description is necessary for you to understand how the JSX is laid out.
I don't want to use position: fixed or absolute, for obvious reasons.
Below is the end of the render, I'm not sure if this is enough for you to understand....
<div className={styles.footerContainer}>
<Footer
handler={this.handler}
CurrentStep={this.state.CurrentStep}
/>
</div>
</Modal>
</div>
</div>
);
}
Here's the footer render:
export class Footer extends React.Component<any, any > {
public render(): React.ReactElement<{}> {
return (
<div>
<div className={styles.previousButtonContainer}>
<DefaultButton className={styles.previousButton}
disabled={false}
checked={true}
text="Previous"
onClick={this._prev}
/>
</div>
<div className={styles.nextButtonContainer}>
<DefaultButton className={styles.nextButton}
disabled={false}
checked={true}
text="Next"
onClick={this._next}
/>
</div>
</div>
And here's the footers styling (the entire webparts styling comes from one CSS file):
.footerContainer{
display: flex;
position: relative;
justify-content: space-evenly;
bottom: 0%;
height: 60px;
flex-grow: 0;
overflow: hidden;
}
.nextButtonContainer{
float: right;
}
.nextButton {
position: relative;
border-radius: 8px;
}
.previousButtonContainer {
float: left;
}
.previousButton {
position: relative;
border-radius: 8px;
}
Sorry if this isn't enough info.
This related to CSS inherit usually.
Try to add custom CSS out side of webpart contanier.
For example:
import * as React from 'react';
import styles from './ReactSpfx.module.scss';
import { DefaultButton } from 'office-ui-fabric-react';
export default class Footer extends React.Component {
render() : React.ReactElement{
return (
<div>
<div className={styles.previousButtonContainer}>
<DefaultButton className={styles.previousButton}
disabled={false}
checked={true}
text="Previous"
//onClick={this._prev}
/>
</div>
<div className={styles.nextButtonContainer}>
<DefaultButton className={styles.nextButton}
disabled={false}
checked={true}
text="Next"
//onClick={this._next}
/>
</div>
</div>
);
}
}
Parent component
<Modal
titleAriaId={this._titleId}
subtitleAriaId={this._subtitleId}
isOpen={showModal}
onDismiss={this._closeModal}
isModeless={true}
containerClassName={contentStyles.container}
>
<div >
<div className={contentStyles.header}>
<span id={this._titleId}>Lorem Ipsum</span>
<IconButton
styles={iconButtonStyles}
iconProps={{ iconName: 'Cancel' }}
ariaLabel="Close popup modal"
onClick={this._closeModal as any}
/>
</div>
<div id={this._subtitleId} className={contentStyles.body}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in
leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum
vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a
odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus,
maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat
eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
efficitur.{' '}
</p>
</div>
</div>
<Footer />
</Modal>
.module.scss
.webpartcontaner{
web part css
}
.footerContainer{
display: flex;
position: relative;
justify-content: space-evenly;
bottom: 0%;
height: 60px;
flex-grow: 0;
overflow: hidden;
}
.nextButtonContainer{
float: right;
}
.nextButton {
position: relative;
border-radius: 8px;
}
.previousButtonContainer {
float: left;
}
.previousButton {
position: relative;
border-radius: 8px;
}
Sample test demo:
I'm new to CSS and have a question about expanding the content of an inner DIV to fill the entire outer div.
I have been researching an answer to my problem for hours and have found dozens of similar questions, but none of the suggested solutions work for me. I'm sure it's that I'm misunderstanding something fundamental, but I can't seem to put my finger on it.
I need to have the blue background cover the entire block between "Some other stuff" and "More different stuff" and the text must be centered vertically and horizontally in the blue block - and maintain the same hover qualities and text-decoration rules.
<div>
<span>Some other stuff</span>
</div
<div class="outer-container">
<h2>
<a class="inner-container" href="https://www.google.com" target="_blank">
Lorem ipsum
</a>
</h2>
</div>
<div>
More different stuff
</div>
I have so much trouble with CSS because I don't know how to gracefully describe what I'm wanting - I'm a developer not a designer!
.outer-container {
background-color: #337AB7;
text-align: center;
vertical-align: middle;
position: relative;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
&:focus, &:hover, &:link {
background-color: #286090;
color: #fff;
text-decoration: none;
}
}
If I put the focus, hover CSS stuff in the outer-container the hover mechanics are not consistent.
I hope I'm making sense...like I said, I have a horrible time explaining design stuff.
Any suggestions?
You just need to set background color to outer-container.
When you set background-color to <a> tag, the background color is assigned to the text only.
Here is you updated fiddle.
Here is the snippet.
.outer-container {
text-align: center;
vertical-align: middle;
position: relative;
background: #337AB7;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
}
<div> <span>Some other stuff</span>
</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>
</div>
<div>More different stuff</div>
Why can you not change the background colour to be on the parent .outer-container?
This would solve your immediate issue.
See http://jsfiddle.net/n1gva5b4/
If a was you i would make a div-container and inside the div(innerContainer) insert the a-link-tag. So the Conainer does what its called (contain-something), applies the color as you want it and the link also works fine.
like this:
<div class="outer-container">
<div class="inner-container" >
Lorem ipsum dolor sit
</div>
</div>
Just in case the outer-container responses don't help, an alternative is to set display: block on inner-container. Block-level elements are the ones that take up all available horizontal space on their parent by default (an example might be, one of these answers), and "inline-level" elements like a (by default anyway) can be placed in the middle of a block of text, only affecting its own text without re-flowing any layout around it.
I am writing a basic website in HTML5, i have all the site structure in place and so far everything has been working well.
However I have one section that seem to go off on its own a bit.
as soon as I had a height to the section the sections moves to the top of the article behind the top two section where the actual content within the section stays in place.
<article><section class="welcome-box">
<section class="welcome-wrapper">
<div class="welcome-hello">
<div class="welcome-hellotext">HELLO, WELCOME TO SAA RECRUITMENT </div>
</div>
<div class="welcome-line"></div>
<div class="welcome-textbox">
<div class="welcome-textboxtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
</div>
<div class="welcome-button">
<div class="welcome-buttontext">READ MORE</div>
</div>
</section>
</section>
<section class="home-slider">
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
<img src="images/slide_1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/slide_2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/slide_3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/slide_4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
</section>
<!-- Slider Script -->
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
<!-- End Slider Script -->
<section class="about-box">
<div class="about-boxtitle">TITLE HERE</div>
<div class="about-boxline"></div>
<div class="about-boxtext"></div>
</section>
<section class="news-box">
<div class="news-boxtitle">NEWS</div>
<div class="news-boxline"></div>
<div class="news-boxtext"></div>
</section>
<section class="clients-box">
<div class="clients-boxtitle">CLIENTS</div>
<div class="clients">client</div>
<div class="clients">client</div>
<div class="clients">client</div>
</section>
</article>
The section I am having trouble with is the one with a class of "clients-box" (very last section)
Here is the CSS:
.clients-box {
width: 960px;
margin-top: 10px;
background-color: #FFF;
}
ul.clients {
width: 940px;
height: 40px;
margin: 0 auto 0;
}
ul.clients li.client {
width: 150px;
height: 40px;
display: inline-block;
background-color: #039;
clear: both;
The website is live here: http://dev.saarecruitment.com/
.clients-box needs either float: left or float: right. You can add margin: 10px auto to center it with 10px top/bottom margins.
You have used float on all the above <sections> which means that they are not occupying space. Thus this box got to the top, under the floated elements.
Easiest way would be to apply a float: left to this box as well.
An alternative method, inspired by #Mr. Alien would be to just apply clear:left to this block.
i've been going over this one for about two days.
example
it's a fairly complicated design, so to reduce code pasted here i've recreated the main structure on this jsfiddle and included the simplified code at the end of this post:
http://jsfiddle.net/rwone/zwxpG/10/
scenario
i have a container with numerous <li>'s containing a div (containing dynamic content from a database) that initially has the property display: none.
on hovering over an image in these <li>'s however, i wish to show the div.
it is working, however the div appears to be beneath other elements in the container which has a fixed height and overflow-y: auto.
what i've tried
i have tried combinations of z-index's and absolute and relative positioning, but i haven't been able to find a solution yet.
i've isolated two causes in the code below and the jsfiddle (shown as /* comments */) but these do not work on the live test site.
question
my question is therefore, is there another way to enforce that the hover state div is shown on top of and outside of the container that is enclosing it?
it is not an ideal solution that i can fix these issues in the jsfiddle but not the live site, but i just thought i'd ask if there was another way to approach this altogether?
thank you.
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<ul>
<li>
hover me #1
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
<li>
hover me #2
<div id="container_c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla porttitor ante ut varius. Fusce volutpat velit ut orci porttitor cursus. Donec est eros, tempor ac elementum et, volutpat sit amet lorem. Mauris iaculis eros nec sapien hendrerit at sodales nibh iaculis. Morbi imperdiet porta est vitae suscipit. Curabitur sit amet diam in nulla consectetur placerat. Etiam in sapien ac mi scelerisque congue eu id lectus. Proin fermentum auctor turpis vel adipiscing. Maecenas at convallis sapien.
</div>
</li>
</ul>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 50px;
/* cause one - on its own, this causes the undesired 'underneath' effect */
overflow-y: auto;
}
ul li {
display: inline;
/* cause two - on its own, this causes the undesired 'underneath' effect */
position: relative;
}
#container_c {
display: none;
}
ul li:hover #container_c {
background: #00AFF0;
display: block;
width: 200px;
height: 200px;
position:absolute;
top: -20px;
left: 50px;
z-index: 999;
overflow: hidden;
}
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
update
in response to answer below, here is further information on the actual content that is being displayed upon hover (everything within the #container_c div). each <li> has its own unique content:
<li class=".class1 .class2">
<img src="http://path/to/image.jpg">
<div id="container_c">
<h4>title</h4>
<div id="container_c_left">
<span id="cl1">text</span>
<span id="cl2">text</span>
<span id="cl3">text</span>
</div>
<div id="container_c_right">
<span id="cr1">text</span>
<span id="cr2">text</span>
</div>
<span id="cc1">text</span>
<span id="cc2"><a class= "linkclass" href="http://path/to/link.html">link</a></span>
</div>
</li>
You only want to display one of these hover elements at a time?
Put a single DIV outside of the main body and make it hidden.
Then use javascript to adjust its position and content every time you hover over an LI.
No need to give every LI its own DIV.
Store the contents inside a data attribute
<li id=something data-some-content="Hello joe">
Then you can retrieve it with jQuery like so
$("#something").data('some-content')
Your CSS styles are correct but in your HTML you have two <div> elements with the id='container_c' and that's invalid, IDs are unique and you can't give same id to two or more elements. If you two ore more elements to be given same style then try class='container_c' and in the CSS change the #container_c to .container_c
Check this fiddle for the fixed version
http://jsfiddle.net/DeepakKamat/zwxpG/13/
the solution was a mixture of #NoPyGod's jquery suggestion and to have a better understanding of how absolute and relative positioning work.
basically, when absolute and relative positioning are applied to a div, this position is relative to the position of the last element that had absolute or relative positioning defined and is a 'container' of the div you are working with.
to escape from the 'container' that had overflow: auto and a fixed height and width, i had to remove erroneous positioning back till a parent div that was not constrained by overflow and height and width restraints that were impacting on the hover state div.
a working jsfiddle is here:
http://jsfiddle.net/rwone/eeaAr/
i also implemented #Deepak Kamat's suggestion to only have one id per page and change the rest of the div's to be identified by classes.
i subsequently read the article below that made more sense to me this time and after working in this context:
http://css-tricks.com/the-difference-between-id-and-class/
thank you to all for your assistance!
html
<div id="wrapper">
<div id ="hbar_one"></div>
<div id="hbar_two"></div>
<div id="container_a">
<div id="container_b">
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
some amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
more amazing html
</div>
</div>
<div class="class1 class2 magic" data-unique-content=".hidden_db_data_div">
<img src="http://lorempixel.com/g/50/50/">
<div class="hidden_db_data_div">
even more amazing html
</div>
</div>
</div>
</div>
<div id="hbar_three"></div>
<div id="hbar_four"></div>
</div>
css
#wrapper {
width: 300px;
}
#hbar_one {
background: #cc0000;
height: 50px;
}
#hbar_two {
background: #ffcc00;
height: 50px;
}
#container_b {
height: 100px;
overflow-y: auto;
}
.hidden_db_data_div {
display: none;
background: #00AFF0;
width: 120px;
height: 150px;
color: red;
position:absolute;
overflow: hidden;
z-index: 999;
}
img {
width: 50px;
height: 50px;
}
.magic {
display: inline;
}
#container_a { position:relative; }
#hbar_three {
background: #cccccc;
height: 50px;
}
#hbar_four {
background: #000000;
height: 50px;
}
script
$(".magic").hover(
function () {
$(this)
.find('.hidden_db_data_div')
.css({'left':$(this).position().left+20 + "px", 'top':'-20px'})
.fadeIn(200);
},
function() {
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}
);
Ok, I am new with CSS and this is just causing me trouble. How do I add a background color to multiple columns but not all columns.
I want one background color on span2 and a different color on span10. The problem I run into is issues with padding. When I apply the background to certain columns it won't have a nice even padding around the content. Does this make sense? How do I add a background to certain columns with nested columns and still maintain nice even padding?
HTML
<div class="row bg">
<div class="span10">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="sidebar">
<div class="hero-unit">
<h1>Join</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Register Now »</a></p>
</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span5">
<div class="bot-pad">
<h2>We are Fun!</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<div class="span5">
<div class="right-pad bot-pad">
<h2>Learn more about yourself</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</div>
</div>
</div>
CSS
.bg
{
background: url('/assets/img/grid.png');
.border-radius(5px); //LESS mixin for creating border radius
}
.right-pad
{
padding-right: 20px;
}
.bot-pad
{
padding-bottom: 20px;
}
Explanation
So the bg class is applying the background. Then my nested columns have weird padding, so I went through and added classes like right-pad to the columns that need right padding and bot-pad to columns that need padding on the bottom. I know how incredibly wrong this is semantically, I just don't know how else to get my needed results. Thanks.
Here is another example of what I am trying to do... however they do not provide a solution either
https://github.com/twitter/bootstrap/issues/1446
It's not a good idea setting the background-color on the span# level. Why? Because span# is a positioning helper and if you change paddings or margins the entire grid will break.
So, what's the native Twitter Bootstrap element for rendering a coloured background wrapper? It's well.
How to use it?
First, insert the well element inside the span#:
<div class="span5">
<div class="well well-red">
<!-- Your content -->
</div>
</div>
And second, assign properties through an extension of the .well class (I've used .well-red):
.well-red {
background-color: #ff0000;
}
This way you have always available the parent class .well but you can apply different properties at will.