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%'
}
);
},
I had four containers with four inner divs, floated left with auto height.
<div class="box">
<div class="head">
Heading text
</div>
<div class="image">
Image
</div>
<div class="text">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</div>
<div class="link">Link text</div>
.box{
width: 150px;
float: left;
}
Complete jsFiddle:
http://jsfiddle.net/H8w32/
To make the inner divs height the same througout all of the four containers, I changed the floated layout, and used display:table instead.
<div class="table">
<div class="row head">
<div class="cell">Heading text</div>
<div class="cell">Here is a lot longer heading text to examplify</div>
<div class="cell">Heading text</div>
<div class="cell">Heading text</div>
</div>
<div class="row image">
<div class="cell">Image</div>
<div class="cell">Image</div>
<div class="cell">Image</div>
<div class="cell">Image</div>
</div>
<div class="row text">
<div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
<div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
<div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante. Dapibus posuere velit aliquet.</div>
<div class="cell">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
</div>
<div class="row link">
<div class="cell">Link text</div>
<div class="cell">Link text</div>
<div class="cell">Link text</div>
<div class="cell">Link text</div>
</div>
</div>
-
.table{
display: table;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
width: 150px;
}
http://jsfiddle.net/Wh7Pm/1/
This looks exactly like I wanted it to. But now I lost the perks from using float, specifically the ability to add more containers and that they automatically got pushed in to the next "row", or that they get pushed to a new row if the viewport is too small to fit them. The containers are added to the same "row" if I add more containers to my display:table layout.
Is this possible to solve? I want the behaviour from both display:table (equal height of heading divs and text divs) and float:left.
Not possible currently without using javascript to set heights. You may want to look into the spec for CSS flexible boxes, which is the real CSS-only solution to this problem.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Adoption of flexbox is still in the early stages, but if you're building a cutting edge app that targets mostly modern browsers, you may be able to get away with it.
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.
See the notes in the blue areas on the page below to see what I am trying to achieve.
http://www.a3financial.com/subtitleproblem.php
Here I have 2 p's which are subtitles, illustrated in blue, which I'm wanting to fluidly be as wide as possible within the fixed-width content area, while respecting any float:left image's padding/margin.
From what I understand this is the expected behavior when you don't set any width for the p and do have one set for the float:left.. but for some reason my subtitles' background are going behind the image and not respecting its' margins. Perhaps I'm wrong on my expectation. I know liquid widths with floats are difficult/impossible to achieve. Is there any way to do this?
For clarity, I want the page to look like this. I've added borders for additional clarity.
http://a3financial.com/images/clarity.png
To my knowledge, this is all that is being applied to the float:right:
#content .subtitle {
padding-top: 2px;
float: right;
background-color: #8FD2E3;
letter-spacing: -1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #969696;
}
And here is the code for the float:left:
img.alignleftimg {
float: left;
width: 163px;
/*margin-right: 30px;F*/
padding-right: 30px;
}
HTML (apologies for long latin, text is needed to illustrate flow):
<p class="subtitle">Subtitle 1 - should be as wide as possible, respecting the image's padding/margin.</p>
<img src="images/homepage09.jpg" alt="" width="163" height="163" class="alignleftimg" />
<p>nunc nisl velit, fringilla ut ornare non, iaculis in ipsum. Vivamus volutpat quam et dui vestibulum ultricies. Fusce vitae sapien sed ipsum hendrerit dignissim. Lorem ipsum dolor at tellus. Etiam vitae ligula non ante iaculis. Curabitur elementum diam nec etiam lorem ipsum mauris dapibus arcu, sed bibendum libero elit et sem. Nunc at nunc tortor, ut aliquam augue. Etiam ut sem quis tellus iaculis convallis. Nulla viverra, metus eget accumsan. Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo.Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. </p>
<p class="subtitle">Subtitle 2 - should also be as wide as possible, pushing text out of the way in this case, to fill 100% of body width.</p>
<p>Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet.</p>
edit: starting to think i'm using the wrong element for this.. perhaps an h2 would function as i'm intending.. continuing to research.
edit 2: it doesn't appear h2 has any discernible difference from using p.
edit 3: added an image to clarify what i'm after.
final edit: Found what I was looking for and answered the question myself! Adding overflow:auto; to the subtitle class made its' background respect the float's margin and padding! See the accepted answer. Cleaned up the question for those searching in the future, as initially I didn't understand how to use floats correctly. Here's a link to the final product:
http://www.a3financial.com/subtitletest.php
OK, a couple of things first:
float applies to how a block elment is rendered with respect to the text of the main document. Float is not intended to be a way to control the size or positions of the actual elements themselves.
The best way to see this is an example:
<div id="A" style="float:right;background-color:#0f0;height:20px;">
my title
</div>
<div id="B" style="background-color:#00f;height:35px;">
my impressive language skills
</div>
Then this means that div A will float left of the content(text) in the document's main flow (div B is in the main flow). This does not affect the physical size of either div A or div B. You will see that in this example, div B is 100% wide (the backgrounds mark the container's actual size). Div's default behavior is to take up 100% of the available width of its container.
Div A is only as big as it needs to display it's content, so it may seem that its behavior is differnet. This is not really the case though. Because div A floats, it is rendered in its own virtual container outside of the main document. The fake container is set to be the minimum size possible, which is basically 0% wide. So, like any 0% continer, it stretches as much as necessary to accomidate the contents within). In effect, div A is 100% wide in a container that is 0% wide (by default).
You should also note that in this example, div A is not just floating to the right of the content within div B, but it is floating right in regards to ALL content in the main document flow. This is where a div with the "clear:both;" css attribute comes in handy, as this ensures that things that are floating stop floating at a specific point in the document (content that would have floated is pushed down).
Now, when we look at your document in particualr, what your were effectivly trying to do was stack 3 floats with each other... A floating right of B, and B floating left of C. But the containers themselves will just be however big they need to be. This gets very hard to manage, and can be unpredictable on different browsers... and you end up trying to manage everyting's width, height, padding, and margin plus doing all kinds of other still just to keep the containers from overlapping and piling up on top of each other.
The best bet when using floats for positioning, is to ensure that within any one container, you have no more than one thing floating. So in your document's case, something like this:
.subtitle {
padding-top: 2px;
background-color: #8FD2E3;
letter-spacing: -1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #969696;
}
img.alignleftimg {
float: left;
width: 163px;
/*margin-right: 30px;F*/
padding-right: 30px;
}
Note that in this CSS, only the image is setup to float. The subtitle doesn't need to float because you always want it 100% wide relative to whatever container contains it.
Then for HTML:
<img src="images/homepage09.jpg" alt="" width="163" height="163" class="alignleftimg" />
<div class="section">
<p class="subtitle">Subtitle 1</p>
<p>
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
</p>
</div>
<div style="clear:both;"></div>
<div class="section">
<p class="subtitle">Subtitle 2</p>
<p>Aliquam libero. and some other stuff</p>
</div>
Note here that we used a div to group the subtitles and the text to which that subtitle applies into one content container (section). The image is set to float left starting at the first section, so all the text will slide out of the way. We use a clear div to make sure that we stop floating at this point, then we start the container for the next subtitle and text.
As with anything in HTML, the less you specify the better off you are. Instead of managing sizes, floats, positions, and all that junk I recommend that you specify as little as is possible in CSS. It's a subtle art, but it pays off.
Now, in the example I give, the content area's container and the image actually overlap. So if you try background styles, or borders, etc. it can get ugly. So, this is when you might want to specify widths and margins to control the containers themselves; but this is easier is you are careful to keep floating down to just one element within any one container.
You could elminiate container overlap in the above by adding in this CSS (in addition to what was already there):
img.alignleftimg + div.section{
margin-left: 170px;
}
This is an unusual css selector called the adjacent sibling selector... basically it says, "Applies to all div elements with a class-name of "section", that is also an immediate sibling to an img element with a class-name of "alignleftimg".... blah! Anyway, I just set the margin to a value a little bigger than the width of the image, and overlap is eliminated ONLY in the very specific case we want.
You might want to look at the HTML 5 section element; but I didn't use it here because it is a semantic element and so cross-browser support requires a bit more than just replacing the div tags with section tags.
Also, I want to point out that this entire discussion is the fault of the W3C. We needed real layout mechanisms that did the job of HTML layout tables way back in 1994... 18 years later, CSS grid is STILL not finalized and is probably another 10 years from being widly supported in shipping browsers.
Turns out this is possible!
By adding overflow: auto; to the subtitle class, it forces it to respect the image's margin and padding! Additionally, adding it to unordered lists has the added benefit of making sure the list stays in-line horizontally until it's complete before word-wrapping around the image.
See my final product here:
http://www.a3financial.com/subtitletest.php
Thanks to the following thread for pointing me in the right direction. I'd given up but happened to stumble upon it looking for a somewhat different issue:
Floated image to left of a ul is ignoring margin/padding
To make HTML elements fluid widely, You must set CSS width to:
width:**percent**%
While percent keyword is number between 0 and 100.
This is a calculation. Calculate the padding and margin to set the correct width percent.
For example:
Setting 3 fluid divs with no Padding or Margin:
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
CSS
.first, .second, .third{
float:left;
width:33%;
}
Hope this helps you.
I have been trying to make a DIV box appear in front of the text/tables that I have on a webpage.
The DIV is made visible via a button press; but when visible it automatically moves the text/table downward and includes the DIV content above it.
Can anyone help?
You can use the stacking index of the div to make it appear on top of anything else. Make it a larger value that other elements and it well be on top of others.
use z-index property. See Specifying the stack level: the 'z-index' property and
Elaborate description of Stacking Contexts
Something like
#divOnTop { z-index: 1000; }
<div id="divOnTop">I am on top</div>
What you have to look out for will be IE6. In IE 6 some elements like <select> will be placed on top of an element with z-index value higher than the <select>. You can have a workaround for this by placing an <iframe> behind the div.
See this Internet Explorer z-index bug?
z-index only works on absolute or relatively positioned elements. I would use an outer div set to position relative. Set the div on top to position absolute to remove it from the flow of the document.
.wrapper {position:relative;width:500px;}
.front {
border:3px solid #c00;
background-color:#fff;
width:300px;
position:absolute;
z-index:10;
top:30px;
left:50px;
}
.behind {background-color:#ccc;}
<div class="wrapper">
<p class="front">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="behind">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<table>
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
It moves table down because there is no much space, try to decrease/increase width of certain elements so that it finds some space and does not push the table down. Also you may want to use absolute positioning to position the div at exactly the place you want, for example:
<style>
#div_id
{
position:absolute;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
If you want to appear it over something, you also need to give it z-index, so it might look like this:
<style>
#div_id
{
position:absolute;
z-index:999;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
You may add a div with position:absolute within a table/div with position:relative. For example, if you want your overlay div to be shown at the bottom right of the main text div (width and height can be removed):
<div style="position:relative;width:300px;height:300px;background-color:#eef">
<div style="position:absolute;bottom:0;right:0;width:100px;height:100px;background-color:#fee">
I'm over you!
</div>
Your main text
</div>
See it here: http://jsfiddle.net/bptvt5kb/
make these changes in your div's style
z-index:100; some higher value makes sure that this element is above all
position:fixed; this makes sure that even if scrolling is done,
div lies on top and always visible
Use the display property in CSS:
<body>
<div id="invisible" style="display:none;">Invisible DIV</div>
<div>Another DIV
<button onclick="document.getElementById('invisible').style.display='block'">
Button
</button>
</div>
</body>
When the the display of the first div is set back to block it will appear and shift the second div down.