I am trying to fixed the menu in the template, but every time when I use the fixed function in the menu, an error occurs because the menu is misplaced to the right off the page.
The example is here: http://jsfiddle.net/ecram/ddbvg532/1/
Reviewing the code and I think the problem is on the Grid.
<div class="ui inverted page grid masthead segment">
<div class="column">
<div class="ui fixed inverted pointing menu">
<div class="header item"><i class="home icon"></i> Principal
</div>
<div class="right menu">
<a class="item"> About</a>
<a class="item"> People</a>
<a class="item"> Projects</a>
</div></div></div>
</div>
I resolve the problem using:
<style type="text/css">.fijo {position:fixed !important; top:0px; z-index:10 !important} </style>
<div class="fijo">
Content
</div>
Related
I need to place a transparent bootstrap 4 navbar over a full screen image utilising flexbox. I need to be able to expand a carousel container (swiper.js) to fill the view port.
I have managed to expand the carousel container to fill the view port but the navbar does not appear transparently over it. To view what it currently does [click here][1]. To view what I would like to achieve [click here][2]
<nav class="navbar navbar-expand-md navbar-light bg-transparent">
<div class="navbar-brand pr-5">
<a class="d-inline-block" routerLink="/home">
<img src="assets/logo-dark.png" alt="" height="43">
</a>
</div>
<div class="navbar-collapse collapse navbars" id="navbar-navigation">
<div class="navbar-nav">
<a class="nav-item nav-link text-uppercase" href="#>Home</a>
<a class="nav-item nav-link text-uppercase" href="#>Service</a>
<a class="nav-item nav-link text-uppercase" href="#>Product</a>
</div>
</nav>
</div>
<div class="d-flex flex-fill">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 1</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 2</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<main class="page-content content-boxed">
Page content goes here ...
</main>
[1]: https://i.stack.imgur.com/1eB42.png
[2]: https://i.stack.imgur.com/2fr9H.png
To make your image overlap to the navbar, you just have to give position:absolute property to the navbar.
.navbar{
position:absolute;
}
this is simple. I'm trying to align-items-bottom a gear svg image to the bottom center of a div. However, it always keeps at the top of the div.
I tried both align-items-center and also align-bottom options.
What happens
How it should be
.gear {
height: 50px;
}
.banner {
height: 70px;
}
<footer>
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>
There is no align-items-bottom class. The class name is align-items-end..
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
<img class="gear d-flex" src="//placehold.it/300x70">
</div>
https://www.codeply.com/go/ub6hNpd9TL
Rows and column are your friends in Bootstrap.
So, create a pair, put your image/SVG inside, apply the class d-flex to the column and mt-auto (margin-top:auto) to the image.
Click the "run code snippet" button below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer>
<div class="container-fluid bg-warning banner d-flex justify-content-center">
<div class="row" style="height: 60px;">
<div class="col d-flex">
<img class="gear mt-auto" src="https://placehold.it/30">
</div>
</div>
</div>
</footer>
I'm using Bootstrap 4, and have a div with the card class on it, which has a fixed height. This is what I'm trying to get:
The code I'm using is
<div class="card">
<div class="card-block d-flex flex-column">
<h2 class="card-title h4 align-self-start">Top Left</h2>
<div class="align-self-center">
Middle Middle
</div>
<aside class="align-self-end">Bottom Right</aside>
</div>
</div>
but the lines are all squashed together, presumably because the card-block is not expanding to the full height of the card.
Is there a way to get the card-block to fill the card, or otherwise get this to display correctly?
You can use justify-content-between on the card-block..
<div class="card">
<div class="card-block d-flex flex-column">
<h2 class="card-title h6 align-self-start flex-grow d-flex">Top Left<br>Top Left</h2>
<div class="align-self-center flex-grow d-flex">
Middle Middle
</div>
<aside class="align-self-end flex-grow d-flex align-items-end">Bottom Right</aside>
</div>
</div>
.flex-grow {
flex: 1 0 0;
}
Demo: https://www.codeply.com/go/5dIgA0ul2q
Update 2018 Bootstrap 4 (stable)
card-block is now card-body
I am trying to show flot plot in a bootstrap panel, utilizing the full height available, starting with the panel closed. When I open the panel the graph keeps growing in height.
<div class="container">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title ">
<a data-toggle="collapse" data-target="#panel1" >
<h3>Flot Example - fill height when opened</h3>
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="panel1">
<div class="panel-body">
<div id="placeholder"></div>
</div>
</div>
</div>
</div>
This jsfiddle demonstrates the issue: http://jsfiddle.net/65w5xor5/13/
I am trying to draw two google treemaps and keep them in tabs and am getting the error:
A negative value for svg attribute <width> is not allowed
Only one of the treemaps is visible. I am assuming the other one is not able to finish drawing. There is no other description of the error in the console. (Google chrome).
My code:
http://jsfiddle.net/tTqjr/
Solved the problem. The div element on which Google Annotated timeline was being created had display:none property. Just made sure that display:none is changed to display:block before calling the draw function.
Appreciate this wasn't the OP's issue, but I had the same error, and setting display: block; didn't make any difference for me, but I had padding-top: 50px; on the div for the chart, and removing that resolved the issue for me!
I wrapped my two divs in a boostrap row/col pair to solve and togglke them with hide()/show()/toggle() buttons.
From
<div class="row">
<div class="col-md-12" id="chart_div">
</div>
</div>
<div class="row">
<div class="col-md-12" id="chart_div2">
</div>
</div>
to:
<div class="row">
<div class="col-md-12">
<div id="chart_div">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="chart_div2">
</div>
</div>
</div>