I'm creating a Santa letter writing website and I'm trying to get a graphic of Santa to look like it is riding on top of the snow. The issue is I cannot seem to get it to work responsively. For reference below is a mockup image of how I would like the Santa graphic placed with everything else I have. How can I make this work?
The container needed bit restructuring to make it work. On the image set following classes img-fluid w-50 h-50 align-self-end
<!DOCTYPE html>
<html lang="en" referrerpolicy="no-referrer">
<head referrerpolicy="no-referrer">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- remove following in production-->
<meta name="referrer" content="no-referrer">
<title>Reindeer Express</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- link rel="stylesheet" href="css/style.css" -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://kit.fontawesome.com/1463370ce3.js" crossorigin="anonymous"></script>
<style>
.bg-img {
background-image: url("https://i.imgur.com/9L54Zdw.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.custom-shape-divider-bottom-1637548946 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1637548946 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 70px;
}
.custom-shape-divider-bottom-1637548946 .shape-fill {
fill: #FFFFFF;
}
#stop-btn {
display: none;
}
#how-to-mail {
display: none;
}
#hidden-template {
display: none;
}
.img-anim {
transform-origin: 25% 75%;
animation: ride 2s ease-in-out 0s infinite alternate;
}
#keyframes ride {
0% {
transform: rotateZ(356deg);
}
100% {
transform: rotateZ(359deg);
}
}
</style>
</head>
<body onload=display_countdown; referrerpolicy="no-referrer">
<div class="bg-img">
<nav class="navbar navbar-dark navbar-expand-sm">
<div class="container-fluid position-relative">
<a class="navbar-brand position-absolute fixed-top" style="left:12px" href="#">
<img src="https://i.imgur.com/vavioW9.png" alt="" width="24" height="29"
class="d-inline-block align-text-top">
Reindeer Express
</a>
<div class="navbar-collapse collapse flex-grow-0 mx-auto">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="#"><u>Home</u></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><u>Nav Item</u></a>
</li>
<li class="nav-item ">
<a class="nav-link text-white" href="#"><u>Nav Item</u></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container col-xxl-8 px-4 py-5">
<div class="d-sm-flex justify-content-between">
<img class="img-fluid w-50 h-50 align-self-end img-anim" src="https://i.imgur.com/4n4uujr.png">
<div class="col flex-lg-row-reverse align-items-center g-5 p-5">
<div class="col-10">
<h1 class="fw-bold lh-1 mb-3 text-white">Reindeer Express</h1>
<p class="lead text-white" id="welcome">Welcome Friends to the Reindeer Express! Have you ever wanted to
write
a letter
to Santa Clause? Well now you can! Fill out the form below to let Santa know what you would like for
Christmas!
But that is not all! You can also download a copy of your letter once you send it! How cool is that?</p>
</div>
<div class="">
<h1 class="text-white" id="countdown_days"></h1>
</div>
</div>
</div>
</div>
<div class="custom-shape-divider-bottom-1637548946">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25" class="shape-fill"></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5" class="shape-fill"></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
class="shape-fill"></path>
</svg>
</div>
</div>
<section id="form-area" class="py-3">
<div class="container">
<div class="row py-5">
<div class="col text-center">
<h2>Write a letter to Santa</h2>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-12 ">
<img class="img-fluid d-block mx-auto w-75" src="https://i.imgur.com/ZeukS4C.png"
alt="santa standing by a reindeer">
</div>
<div class="col-md-7 col-sm-12">
<form id="form" onsubmit="handleSubmit(event)">
<div class="mb-3 form-floating">
<input type="email" placeholder="ex: parent#mail.com" class="form-control" id="parentEmail"
oninput="handleChange(event)" required>
<label for="parentEmail" class="form-label">Parent's Email Address</label>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3 ">
<input type="text" placeholder="ex: Sally Smith" class="form-control" id="name"
oninput="handleChange(event)" required>
<label for="name" class="form-label">Name</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3 ">
<input type="number" placeholder="3" class="form-control" id="age" oninput="handleChange(event)"
required min="0" max="150">
<label for="age" class="form-label">Age</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="gender" aria-label="select gender" oninput="handleChange(event)"
required>
<option>Pick boy or girl</option>
<option value="boy">Boy</option>
<option value="girl">Girl</option>
</select>
<label for="gender" class="form-label">Gender</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="behavior" aria-label="select naughty or nice"
oninput="handleChange(event)" required>
<option>Select option</option>
<option value="nice">Nice</option>
<option value="naughty">Naughty</option>
<option value="okay">Okay</option>
</select>
<label for="behavior" class="form-label">Behavior</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="wishlistOne" class="form-label">Name three things you would like for Christmas:</label>
<input type="text" placeholder="1." class="form-control" id="wishlistOne" oninput="handleChange(event)"
required>
</div>
<div class="mb-3">
<input type="text" placeholder="2." class="form-control" id="wishlistTwo" oninput="handleChange(event)"
required>
</div>
<div class="mb-3">
<input type="text" placeholder="3." class="form-control" id="wishlistThree" oninput="handleChange(event)"
required>
</div>
<div class="mb-3 form-floating">
<textarea class="form-control textbox" id="message" oninput="handleChange(event)" rows="10"
required></textarea>
<label for="message" class="form-label">Write a message for Santa</label>
<div class="row mt-1">
<div class="col">
<p id="instructions" class="text-muted"></p>
</div>
<div class="col d-flex flex-row-reverse">
<button class="btn btn-outline-primary btn-sm" id="start-btn">
<i class="fas fa-microphone"></i>
Start Voice to Text
</button>
<button class="btn btn-outline-primary btn-sm" id="stop-btn">
<i class="fas fa-microphone-slash"></i>
End Voice to Text
</button>
</div>
</div>
</div>
<div class="col-12">
<button id="send-letter-btn" class="btn btn-danger" type="submit" value="submit">
<i class="fas fa-paper-plane"></i> Submit
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section id="how-to-mail" class="py-3">
<div class="container">
<div class="row">
<div class="col text-center">
<h3>How to mail your letter</h3>
<p class="fw-light">Instructions from the USPS</p>
</div>
</div>
<div class="row">
<div class="col mail-instructions">
<p>
<span class="number">1. </span>Print downloaded PDF with your letter
</p>
<p>
<span class="number">2. </span>Place letter in envelope
</p>
<p>
<span class="number">3. </span>Address letter to "Santa Claus, North Pole"
</p>
<p>
<span class="number">4. </span>Place First-Class Mail stamp to envelope
</p>
<p>
<span class="number">5. </span>Have parent mail your letter!
<br>
<small class="fw-light">Additional instructions for parents</small>
</p>
</div>
</div>
</div>
</section>
<footer class="py-5 bg-light">
<p>footer</p>
</footer>
<!-- hidden template goes here -->
<div id="hidden-template">
<div class="container">
<div class="row">
<div class="col">
<p id="letter-name"></p>
<p id="letter-age"></p>
<p id="letter-gender"></p>
<p id="letter-behavior"></p>
<p id="letter-wishlist-one"></p>
<p id="letter-wishlist-two"></p>
<p id="letter-wishlist-three"></p>
<p id="letter-message"></p>
</div>
</div>
</div>
<div id="elementH"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/bootstrap.bundle.js"></script>
<script src="./js/form.js"></script>
<script src="./js/speech.js"></script>
<script>
var display_countdown = setInterval(function () {
countdown();
}, 10)
function countdown() {
var currentDate = new Date();
var christmasDate = new Date("12/25/2021 12:00:00");
var timeLeft = christmasDate.getTime() - currentDate.getTime();
var days_Left = Math.round(timeLeft / (1000 * 60 * 60 * 24));
if (currentDate.getTime() !== christmasDate.getTime()) {
days_Left - 1;
document.getElementById('countdown_days').innerHTML = "Christmas is in " + days_Left + " Days!";
} else {
document.getElementById('countdown_days').innerHTML = "MERRY CHRISTMAS!";
}
display_countdown;
}
</script>
</body>
</html>
Note: In order to make your code work in my environment I had to made some changes. Like putting entire style.css in <style> tag, added meta referer tag, added bootstrap cdn link. Remove the animation if you don't like it.
Compress the background image it's too big 1.77mb. Convert it to jpg, because the png is not transparent.
That should work just great if you add img-fluid to the image Class.
<img src="https://i.imgur.com/4n4uujr.png" class="img-fluid">
I am developing a registration page for an online shopping site.
in my form I have a select tag, it displays very well in the browser but it has a small width as you can see in this picture:
as you can see the width of my select is too small compared to the other inputs, so I want to increase it for which it is equal to those of the input.
I put is code css but it does not work the width of the select does not change :
style="width: 5000px;"
I want to specify that I use the template aroma I suspect that this template that gives restrictions that prevents me from applying my css but I'm not very sure
here is my code in more detail :
<div class="col-md-12 form-group" >
<select class="form-control" name="role" style="width: 5000px;">
<option value="Simple_utilisateur">Simple utilisateur</option>
</select>
</div>
and this is my all code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bougrine - Login</title>
<link rel="icon" href="img/Fevicon.png" type="image/png">
<link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendors/linericon/style.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="vendors/nice-select/nice-select.css">
<link rel="stylesheet" href="vendors/nouislider/nouislider.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--================ Start Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand logo_h" href="Acceuil_marjane"><i class="fas fa-shopping-cart"></i>Bougrine</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto mr-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Liste des produits</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="Jus_marjane">Jus</a></li>
<li class="nav-item"><a class="nav-link" href="Biscuits_marjane">Biscuits</a></li>
<li class="nav-item"><a class="nav-link" href="Yaourt_marjane">Yaourts</a></li>
<li class="nav-item"><a class="nav-link" href="Pc_marjane">Pc portable</a></li>
<li class="nav-item"><a class="nav-link" href="Tel_marjane">Téléphones portables</a></li>
<li class="nav-item"><a class="nav-link" href="Legume_marjane">Légumes</a></li>
<li class="nav-item"><a class="nav-link" href="Fruit_marjane">Fruits</a></li>
<li class="nav-item"><a class="nav-link" href="Danape_marjane">Danapes</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="Contact">Contact</a></li>
</ul>
<ul class="nav-shop">
<li class="nav-item"><button><i class="ti-search"></i></button></li>
<li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li>
<li class="nav-item"><a class="button button-header" href="#">Se connecter</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Menu Area =================-->
<!-- ================ start banner area ================= -->
<section class="blog-banner-area" id="category" >
<div class="container h-100">
<div class="blog-banner">
<div class="text-center">
<h1>Register</h1>
<nav aria-label="breadcrumb" class="banner-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Acceuil</li>
<li class="breadcrumb-item active" aria-current="page">Register</li>
</ol>
</nav>
</div>
</div>
</div>
</section>
<!-- ================ end banner area ================= -->
<!--================Login Box Area =================-->
<section class="login_box_area section-margin">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="login_box_img">
<div class="hover">
<h4>Already have an account?</h4>
<p>There are advances being made in science and technology everyday, and a good example of this is the</p>
<a class="button button-account" href="login.html">Login Now</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="login_form_inner register_form_inner">
<h3>Create an account</h3>
<form class="row login_form" action="#/" id="register_form" >
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Entre votre nom" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Username'">
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="email" name="prenom" placeholder="Entrez votre prénom" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address'">
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="password" name="adresse" placeholder="Entrez votre adresse" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'">
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="confirmPassword" name="date_naissance" placeholder="Entrez votre date de naissance" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Confirm Password'">
</div>
<div class="col-md-12 form-group">
<input type="email" class="form-control" id="confirmPassword" name="email" placeholder="Entrez votre email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Confirm Password'">
</div>
<div class="col-md-12 form-group">
<input type="password" class="form-control" id="confirmPassword" name="password" placeholder="Entrez votre mot de passe" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Confirm Password'">
</div>
<div class="col-md-12 form-group">
<input type="password" class="form-control" id="confirmPassword" name="confirmation_password" placeholder="Confirmer votre mot de passe" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Confirm Password'">
</div>
<div class="col-md-12 form-group" >
<select class="form-control" name="role" style="width: 5000px;">
<option value="Simple_utilisateur">Simple utilisateur</option>
</select>
</div>
<div class="col-md-12 form-group">
<div class="creat_account">
<input type="checkbox" id="f-option2" name="selector">
<label for="f-option2">Keep me logged in</label>
</div>
</div>
<div class="col-md-12 form-group">
<button type="submit" value="submit" class="button button-register w-100">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--================End Login Box Area =================-->
<!--================ Start footer Area =================-->
<footer>
<div class="footer-area footer-only">
<div class="container">
<div class="row section_gap">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets ">
<h4 class="footer_title large_title">Our Mission</h4>
<p>
So seed seed green that winged cattle in. Gathering thing made fly you're no
divided deep moved us lan Gathering thing us land years living.
</p>
<p>
So seed seed green that winged cattle in. Gathering thing made fly you're no divided deep moved
</p>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Quick Links</h4>
<ul class="list">
<li>Home</li>
<li>Shop</li>
<li>Blog</li>
<li>Product</li>
<li>Brand</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-6">
<div class="single-footer-widget instafeed">
<h4 class="footer_title">Gallery</h4>
<ul class="list instafeed d-flex flex-wrap">
<li><img src="img/gallery/r1.jpg" alt=""></li>
<li><img src="img/gallery/r2.jpg" alt=""></li>
<li><img src="img/gallery/r3.jpg" alt=""></li>
<li><img src="img/gallery/r5.jpg" alt=""></li>
<li><img src="img/gallery/r7.jpg" alt=""></li>
<li><img src="img/gallery/r8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget tp_widgets">
<h4 class="footer_title">Contact Us</h4>
<div class="ml-40">
<p class="sm-head">
<span class="fa fa-location-arrow"></span>
Head Office
</p>
<p>123, Main Street, Your City</p>
<p class="sm-head">
<span class="fa fa-phone"></span>
Phone Number
</p>
<p>
+123 456 7890 <br>
+123 456 7890
</p>
<p class="sm-head">
<span class="fa fa-envelope"></span>
Email
</p>
<p>
free#infoexample.com <br>
www.infoexample.com
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row d-flex">
<p class="col-lg-12 footer-text text-center">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!--================ End footer Area =================-->
<script src="vendors/jquery/jquery-3.2.1.min.js"></script>
<script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="vendors/skrollr.min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="vendors/nice-select/jquery.nice-select.min.js"></script>
<script src="vendors/jquery.ajaxchimp.min.js"></script>
<script src="vendors/mail-script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I see that you are using bootstrap. In bootstrap > 4 you can use the class "d-block" so the select box is displayed full width like so:
<select class="form-control d-block" name="role">
<option value="Simple_utilisateur">Simple utilisateur</option>
</select>
I would suggest not to use inline css. Why is your width 5000px anyway?
this is what i get when i add d-block :
I put d-block it works but now I have 2 select one with the right width and the other with a small but I do not understand normally I put a single select why there are two that appear in my Navigator ??
If I use Bootstrap 3, I would use div.row a lot and it would give me a nice spacing between rows vertically. However, when migrating to Bootstrap 4 I noticed the rows don't have any spacing anymore.
This is Bootstrap 4.
This is Bootstrap 3.
This is my Bootstrap 4 code:
<div class="container">
<div class="page-header col-8 offset-2">
<h1>{{ title }}</h1>
</div>
<div class="row">
<div class="col-8 offset-2">
<ul class="list-group" *ngIf="showCities">
<li class="list-group-item"
*ngFor="let city of cities">{{ city.name }}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-8 offset-2">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Nieuwe stad.."
#newCity
(keyup.enter)="addCity(newCity.value)">
<span class="input-group-btn">
<button class="btn btn-success"
type="button"
(click)="addCity(newCity.value)">Toevoegen</button>
</span>
</div>
</div>
</div>
</div>
How do I get the same spacing? I put bootstrap in my package.json and it compiles in a new ng-cli project. I also use sass, so can I override some variables, or?
Or is my Bootstrap 4 code just wrong?
In Bootstrap 3, the list-group has margin-bottom: 20px, but in 4.x it the list-group has no margin-bottom.
You can use the new spacing utils in 4.x to add a margin to the list-group. For example, mb-4 will add a bottom margin of 1.5rem;...
<div class="row">
<div class="col-12">
<ul class="list-group mb-4">
<li class="list-group-item">Bootply</li>
<li class="list-group-item">One itmus ac facilin</li>
<li class="list-group-item">Secondp t eros</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Nieuwe stad..">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Toevoegen</button>
</span>
</div>
</div>
</div>
http://www.codeply.com/go/FmUSjJJX3V
I'm having this problem where the picture stays to the left, I've already initialized it in my js, I tried changing the size of the picture, used different browsers, and it has the same result. Can somebody help me in solving this?
HTML
<nav class="#607d8b blue-grey">
<div class="nav-wrapper container">
<!-- Interaq-->
<ul class="left hide-on-med-and-down">
<li>HOME</li>
<li>GAMELIST</li>
<li>REVIEWS</li>
<li>NEWS</li>
<!-- Dropdown Trigger -->
<!-- <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>-->
</ul>
<!--Search bar-->
<form class="right hide-on-med-and-down">
<div class="input-field">
<input id="search" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
<div class="parallax-container">
<div class="parallax"><img src="<?php echo base_url();?>materialize/img/banner1.jpg"></div>
</div>
Result
Try this out. Mistake was equal sign after width property in Krushio Vida's answer.
<div style="width:100%;" class="parallax-container">
<div class="parallax">
<img src="<?php echo base_url();>materialize/img/banner1.jpg">
</div>
</div>
Here is, jsfiddle
Try to set width style to 100% directly at the divs e.g.
<div style="width:100%" class="parallax-container">
<div style="width:100%" class="parallax"><img style="width=100%" src="<?php echo base_url();?>materialize/img/banner1.jpg"></div>
</div>
You should make your image responsive with a class="responsive-img"
<img class="responsive-img" alt="parallax" src={img} />
float:right is applied to the form instead of input-field.
<form class="right hide-on-med-and-down">
<div class="input-field">
Change this to
<form class="hide-on-med-and-down">
<div class="input-field right">
Materialize Css Parallax Codepen
I am trying to align 7 items in a grid layout so that each element is fixed in it's place currently I am able to achieve like below screenshot. Here is the plunker for the same code (but some how it does not look good on plunker).
The problem in my current state is minutes is wrapped to 2nd line. Also how can I utilise extra space from Agent: label area and Reset button area so that the space gets utilised?
Code
<div class="row">
<div class="col-md-1" style="padding-right:0px; padding-left:0px; margin-top:5px">
<div ng-show="!loadinga">
<b>Agent: </b>
</div>
</div>
<div class="col-md-2" style="padding-left:0px;">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2" style="padding-left:0px;">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2" style="padding-right: 0px; padding-left:0px;">
<div ng-show="!loadinga">
<input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text" ng-blur="" />
</div>
</div>
<div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px; margin-right:0px" align="right">
<input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
<label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running < </label>
<input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
</div>
<div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px;" align="centr">
<input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
<label for="datalabels" style="font-weight:normal;">Show Task Labels</label>
</div>
<div class="col-md-1 divGridImage" ng-show="!loadinga" align="center" style="padding-right: 0px; padding-left:0px;">
<button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
</div>
</div>
Update
Or is there a way to keep Agent: label and drop down in same line without giving separate div with col-md-1 class to label?
Need something like below screenshot
Right so my attempts at solving this are below, I'm not going to give you the same body of text because you can review that in the previous post.
Here is the completed grid with all the parts you have requested, it's also laid out better. (Its not really device friendly as requested).
I updated the example to work correctly
Code:
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#1.x" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<div class="container-fluid">
<div class="row">
<div class="hidden-xs col-sm-2 sidebar">
<div class="sidebar-nav" style="height:100% !important;min-height: 100% !important">
<div class="navbar navbar-custom" role="navigation">
<ul class="nav recommendation-nav">
<li class="active">
<img style="padding-right: 5px" /> Side bar
</li>
<li >
<img style="padding-right: 5px" />Side bar
</li>
<li >
<img style="padding-right: 5px" />Side bar
</li>
<li >
<img style="padding-right: 5px" />Side bar 1
</li>
<li >
<img style="padding-right: 5px" />Side bar 2
</li>
<li >
<img style="padding-right: 5px"/>Side bar 3
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-sm-offset-1 report-area">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-2">
<div class="dropdown" ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-2">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-2">
<div ng-show="!loadinga">
<input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text"
ng-blur="" />
</div>
</div>
<div class="col-xs-12 col-sm-4 divGridText" ng-show="!loadinga">
<input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
<label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running < </label>
<input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
</div>
<div class="col-xs-12 col-sm-1 divGridText" style="width:9.33%" ng-show="!loadinga" >
<input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
<label for="datalabels" style="font-weight:normal;">Task Labels</label>
</div>
<div class="col-xs-1 col-sm-1 divGridImage" ng-show="!loadinga">
<button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Preview:
Your parent divs (the columns) should be set to 0 padding and 0 margin, and the childs should have whatever padding/margin you want. This prevents an overflow.
For example, if you have 4 columns (which equal to 25% width each) and even one of them has a left or right padding of like 10px, then the 4th column will be pushed to the next line because they are now exceeding the 100% width.
Bad example:
HTML:
<div class="col-1">
//content
</div>
<div class="col-2">
//content
</div>
CSS:
.col-1, .col-2 { width: 50%; display: inline-block; padding-left: 15px }
The above code will have the second column flow to the next line because of that padding-left of 15px, which you also use in your own code.
Good example:
HTML:
<div class="col-1">
<div class="inner-col-1">
//content
</div>
</div>
<div class="col-2">
<div class="inner-col-2">
//content
</div>
</div>
CSS:
.col-1, .col-2 { width: 50%; display: inline-block }
.inner-col-1, .inner-col-2 { padding: 0 15px }
The above code will ensure that your columns are on the same line, and the inner content can now use whatever padding/margins you want because they won't affect the width of the parents.
If you don't need to use the application on another screen size, you could try to align Agent: to the right of his container and the reset button to the left of the container. You could the set negative margins to the row, that would give you more place for your content.
Otherwise, bootstrap gives you the possibility to subdivise each column into 12 new columns, you could try something like this :
<div class="row">
<div class="col-md-6">
<!-- you can put here the 4 first elements as you like, on a 12 columns layout -->
</div>
<div class="col-md-6">
<!-- you have again a 12 columns layout for the 3 lasts elements -->
</div>
</div>
look at http://getbootstrap.com/examples/grid/ in the section "Two columns with two nested columns" for a visual example
Easy but no very attractive solution
<span>minutes</span>
PS: I am not sure I have fully understood your question