I want to place the footer at bottom of the window if the content of window has no scrollbars otherwise put the footer at the end of content
here is my html code
<div class="container-fluid">
<div class="header"></div>
<div class="con"></div>
<div class="footer">Copyright msg</div>
</div>
The effect you are looking for is known as a 'sticky footer', I believe -- where the footer will always appear pinned to the bottom of the page, even if the content is very short? You can find the solution here.
.footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
Related
Im using vs-popup in order to display the contents when ever the button is clicked, but the size of vs-popup is fixed, and my contents looks clumsy, so I want someone to tell me how I can change width of the popup as per my requirement.
<vs-button class="btn" #click=" showModal=true" color="#7367F0" > Click me</vs-button>
<vs-popup class="helundo" title="How will i resize popup" :active.sync="showModal">
<div class="vx-row">
<div class="vx-col w-full md:w-1/2 mb-base">
<p> I want this content in the left</p>
</div>
<div class="vx-col w-full md:w-1/2 mb-base">
<p> I want this content in the right</p>
</div>
</div>
</vs-popup>
<script>
export default {
data () {
return {
showModal: false
}
}
}
</script>
<style>
<!-- what should I add in order to resize the popup -->
</style>
And the output I'm obtaining is sent below:
I want the popup bigger and it should be flexible such that what ever content I add must fit accordingly.
Please do help me, as I am unable to change the width of the popup, what ever I do it is same, but if I add too many contents the width increases for a extend and it becomes scrollable.
I found out the answer myself, i am posting so that it can help others. If you are using vuesax library you might find out _fixesVuesax.scss
so just place this code there:
.con-vs-popup {
z-index: 53000;
.vs-popup {
width: 200px !important; //You can change the width according to your content
height: auto;
}
.vs-popup--content {
width: auto !important;
padding: 1rem;
font-size: 1rem;
}
}
<div id="abc">
<div id="bac" ngIf="show">
<!-- Content -->
</div>
<div id="cde">cds</div>
</div>
I have a div want to add or remove from DOM slowly(show and hide) using *ngIf and likewise adding or removing of div.id ="bac" should cause div.id='cde' to move left or right slowly like it is animating.
*ngIf probably is not he best thing you are looking for, instead of this, use ngClass and define the css transitions and positions for these animations.
*ngIf fully hides/shows a node from/in DOM, it's like display: none/block which is not able to be animated through css-transitions
here is an example
<div class="animated" [ngClass]=" { 'show': show, 'hide': !show }">
content
</div>
then in the css
.animated {
display: inline-block;
width: 100%;
height: 80px;
background: gray;
transition: 1.5s linear margin-left;
}
.animated.show {
margin-left: 0;
}
.animated.hide {
margin-left: -120vw;
}
Height also can be changed, depends on which effect you expect.
Here is stackblitz with working code
I've been searching high and low for some examples of a Bootstrap 3 Alert box flying in from to top of screen and ending at center screen on top of all elements.
I'm finding lots re. modals, but how do i accomplish this behavior for a alert box?
You can take a look at this answer by chipChocolate.py, and the fiddle he provided here.
It is not exactly what you are looking for since the div is moving from bottom to top but the idea is the same.
Create three divs: main-container, alert-container, alert-content
<div class="main-container">
<div class="alert-container">
<!-- placeholder image -->
<img class="inner_img" src="http://placehold.it/1000x1000" />
<div class="alert-content">
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
</div>
</div>
Then apply this css
.main-container{
position: relative; /* Set to absolute */
}
.alert-container {
position: absolute; /* Set to absolute and positioned at top corner*/
top: 0;
left: 0;
}
.alert-content {
position: absolute; /* This moves it to the bottom (initial state) */
bottom: 90%;
width: 100%;
height: 10%;
transition: bottom 1s;
}
.main-container:hover .alert-content {
bottom: 50%; /* This moves it to the middle (only on hover) */
}
i have made a fiddle here with bootstrap alerts and made the transition from top to the middle of the page. You can adjust it accordingly.
I want my page's content to take up the full width of the screen with a little padding on the right and left and be fluid, but when I wrap my div.row and div.col-md-x in a <div class="container-fluid"> the page's content touches the sides of the screen.
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
What is the proper, Bootstrap way to have a 100% width, fluid layout, and 15px padding on the left and right?
As per the Bootstrap docs:
Use .container-fluid for a full width container, spanning the entire width of your viewport.
If you want 15px padding then add to your CSS:
.container-fluid {
padding: 15px;
}
However you may want to use a percent (padding: 2%) or media queries since 15px will look different on different screen resolutions.
Another option: use <div class="container"> instead of <div class="container-fluid">. This will give you built in padding.
Bootply demo
You can try an id to <div id="bd" class="container-fluid"> and if add this script after add Jquery you can padding when window resize, and can add more resolutions px with more "if" or only add padding-left or right.
<script>
$(document).ready(function(){
function paddingbd(){
if($(window).width()>800){
$("#bd").css("padding","30px");
}else{
$("#bd").css("padding","");
}
}
paddingbd();
$(window).on("resize",paddingbd);
});
<script>
the .row has a negative margin of 15px. try to add
.container-fluid {
padding: 15px 30px;
}
I'm using dompdf to generate a PDF. I've grabbed the code from the dompdf website to add a Header to the pdf and it's working, but I would like to put the header on every page except for the first. Any suggestions?
You can do this by inserting the header and footer elements after the elements that appear in the first page.
For example :
<style>
.flyleaf {
page-break-after: always;
}
.header, .footer {
position: fixed;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
</style>
<div class="flyleaf">
Some big title
</div>
<div class="header">
my header
</div>
<div class="footer">
my footer blah, blah
</div>
<p>The content</p>
Edit: added the style tag
Because when you set header, header will appear of every page of the document,
you can use div element to hide header from first page. Div with white background color and z-index greater then header and you will put that div on the top of the page and set position exactly over first page header.
<div style="background-color: white; z-index: 2;"></div>
I have tested this and its worked.
I wish this will help.
Same issue, explained by a DOMPDF Project Member
https://github.com/dompdf/dompdf/issues/347
Worked for me, my first page is a cover (no header no footer)