My jumbotron is not working as intended. This is my code:
<div class="jumbotron fill-jumbotron">
<div class="container" id="outer">
<h1 align="center" id="mapsHead">Google Maps Filter</h1>
<div id="map"></div>
</div>
</div>
And here is my css:
.fill-jumbotron{
height:100%;
background: url('../assets/images/city2.jpg') no-repeat center center;
}
I've tried forcing body to 100%, margins to 0 and padding:0!important; . Div #map contains a google map loaded from api. According to this bootply, my jumbotron should be working correctly but it is not:
http://www.bootply.com/MlRhkzU5GR
My viewport initial-scale is set to 1 and I've tried loading my webpage from different browsers. Chrome developer shows that in top of the jumbotron there is a blank space outside the jumbotron (body).
EDIT:
Solved issue by updating bootstrap libraries.
Try setting top to 0 in your CSS the div should adhere to the top.
Related
I've got an htmx-indicator in my project that I use to display when reloading a portion of the page. However, I am noticing that the loading indicator renders during the initial page render, and then fades out:
Shouldn't the htmx-indicator's start out hidden? What do I need to add to them to make sure it starts hidden, and only gets displayed on my htmx load?
Here is the snippet of html (the project uses django and bootstrap) (I've got many of the styles just hard coded in the html while I'm tweaking):
<div class="spinner-wrapper position-absolute htmx-indicator" style="top:0; left:0; width:100%; height:100%; z-index: 1000; pointer-events:none;">
<div class="d-flex justify-content-center align-items-center position-relative" style="height:100%;">
<div class="spinner-border text-info" style="width: 4rem; height: 4rem;" role="status">
</div>
</div>
</div>
I have not made adjustments to the default htmx CSS styles.
On slow connections and/or with weak(er) CPUs it takes some time to load and parse/evaluate the CSS/JS files. In this case the spinner is created with Boostrap CSS, but the class definition that hides the .htmx-indicator class elements is injected later with HTMX, so until that the spinner will be visible. To solve this issue we can manually add the class definition of htmx-indicator before Bootstrap CSS stuff, so when the spinner starts its div will be already invisible:
<head>
<style>
.htmx-indicator {
opacity: 0;
transition: opacity 200ms ease-in;
}
</style>
<!-- Bootstrap -->
<!-- HTMX -->
</head>
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;
}
Currently I'm embedding Youtube videos with the following HAML code in a Twitter Bootstrap based site:
.row
.span12
%iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }
Unfortunately, this doesn't respond well when resizing the browser or on mobile devices because of the static height.
What would be a better (more dynamic and responsive) way to implement this embedded iframe for Youtube?
Try this "Responsive video CSS", it works perfect for me: https://gist.github.com/2302238
<section class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
</div>
<div class="span6">
...
</div>
</section>
I implemented a pure CSS solution which works great.
Here is an example of code in my view using the iframe code generated in YouTube.
<div class="video-container">
<iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>
Here is an example of code in another view where instead of using iframe I used the body field generated from the AutoHtml gem, which is used for embedding different types of video links into a web page. This is good if you have a model where a link needs to be dynamically embedded into the same web page.
<div class="video-container">
<span style="text-align: center;"><%= #livevideo.body_html %></span>
</div>
Here is the CSS code:
.video-container {
position: relative; /* keeps the aspect ratio */
padding-bottom: 56.25%; /* fine tunes the video positioning */
padding-top: 60px; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Here is the YouTube video which explains in great detail how the code works and give one or two blog posts to check out.
http://www.youtube.com/watch?v=PL_R3zEjqEc
Bootstrap 3.2.0 comes with a several improvements and a large number of bug fixes. A framework for building websites with a responsive design, Bootstrap was missing support for responsive , and elements, feature added in this latest version.
The HTML for a responsive YouTube 16:9 video that adjusts its size based on the width of the page it is displayed in looks like this:
On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"
This is probably best done with jQuery: http://www.seanmccambridge.com/tubular/ or http://okfoc.us/okvideo/
Just to automatize #Bart's answer, I've created a simple Javascript snipped that automatically wraps iframe elements within <div class="flex-video">
$(document).ready(function() {
$('iframe').each(function() {
$(this).wrap('<div class="flex-video"></div>');
});
});
If using bootstrap, the method below is without a doubt the easiest way to implement a responsive embed:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Documentation can be found here: http://getbootstrap.com/components/#responsive-embed.
I am using AnythingSlider to place content on this dev for a new site:
http://sitedev.lcadfiles.com/interactive_barrett.html
When the slider first loads on a given page, there is a slight jump (the entire slider, arrows, etc. moves a few pixels before settling into the correct position). After landing, it all appears to work fine. The shift doesn't appear to be browser specific, as it occurs on my older and newer machines with 4 different browsers (and various browser versions).
Is there something I have set wrong? I assume it might be somewhere global, like the anythingSlider.js (or perhaps the .css - though this seems less likely), but didn't see anything that stood out.
Had the same problem. A quick workaround (works for me).
eg. you have html code like below, add a style="visibility:hidden;" to your anythingslider container.
<div id="slider_nest" style="visibility:hidden;">
<ul id="your_anythingslider">
...
</ul>
</div>
in the js code, change the style to visible when document ready. eg.(JQuery)
jQuery(document).ready(function($) {
$('#slider_nest').css('visibility', 'visible');
...
$('#your_anythingslider').anythingslider();
...
}
Hope it helps!
Update: add a slider mask with a loader gif.
eg. in the html, you will have something like below:
<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center; display:block; height:568px; width:1050px; margin:0 auto;">
</div>
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;">
<ul id="your_anythingslider">
...
</ul>
</div>
Now in the js (JQuery):
jQuery(document).ready(function($) {
$('#slider_mask').hide();
$('#slider_nest').css({'display':'block'});
...
OMG, this finally solved our problem! Thank you.
Since I'm using the Wordpress plugin on a custom theme, I had to adjust it a bit like this:
Add this before the shortcode in the header.php file:
<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;">
</div>
Add this in the section of header.php file:
<script type="text/javascript">
$(document).ready(function(){
$('#slider_mask').hide();
$('.anythingSlider').css({'display':'block'});
}
Add this to the CSS file:
.anythingSlider {display:none;}
I'm trying to create a website with a background-size:100% 100% css rule. It's an image that sits behind the content and is designed in such a way that no matter the dimensions of the browser window it still works well.
I think the rule I have (as below) is clashing with Blueprint somehow.
body {
background:url('../img/bg.jpg') no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}
This should generate a perfect 100% background image, however, the results I'm getting is that the background finishes where the content finishes, regardless of the browser window size.
Here are two images of what I want and what I'm getting:
EXPECTED
WHAT I'M GETTING (regardless of browser size)
Please help me, I'm not sure how to proceed with this.
Here is my HTML setup for the page:
<body>
<div class="container">
<div id="navbar" class="span-6 last">
<div id="logo" class="span-6 last"></div>
<div id="menu">
<ul>
<li class="menu-current">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="content" class="span-18 last">
</div>
</div>
</body>
If the container is 550px high then the background ends 550px down the page with an empty white space beneath that area.
I was able to replicate the effect on JSFiddle:
http://jsfiddle.net/danhanly/TurW5/4/
Would be nice if you can show us your HTML and CSS that way maybe I can pin point what your doing wrong.
You can write.
html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
margin:20px auto;
width:960px;
overflow:hidden}
Adding a min-height to the body that is equal to the height of the background-image will ensure that the body is large enough to display the entire background.