When I want to change plugin in admin site or edit existing one (no matter which one I open). Properties in popup aren't shown or if they are, they aren't on right positions.
When pop up shows to edit plugin I can't click save. I must scroll out page (ctr and -) to see save button. It's not only save button, most of properties aren't shown properly.
if I add any more placeholders, I am not able to see save button, even with zooming out. The problems only appears in django admin site, where I want to add plugins.
Without bootstrap template I can't place a lot of placeholders without affect djangoadmin popups.
How can I fix this?
base.html :
{% load cms_tags sekizai_tags %}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>{% page_attribute "page_title" %}</title>
{% render_block "css" %}
</head>
<body>
{% cms_toolbar %}
{% block base_content %}{% endblock %}
{% render_block "js" %}
<footer>
{% static_placeholder 'footer' %}
</footer>
</body>
</html>
template_two.html :
{% extends "base.html" %}
{% load cms_tags %}
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
{% block base_content %}
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>SERVICES</li>
<li>PORTFOLIO</li>
<li>PRICING</li>
<li>CONTACT</li>
{% if user.is_authenticated %}<li>Messages</li>
{% else %}aa{% endif %}
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> {% if user.is_authenticated %}<li><a href="/logout">Log Out
<li>{{request.user.username}}</li>
</li>
{% else %}
<li>Log In</li>
{% endif %}</a></li>
</ul>
</ul>
</div>
</div>
</nav>
{% placeholder aa %}
<div class="jumbotron text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email Address" required>
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>
<!-- Container (About Section) -->
<div id="about" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About Company Page</h2><br>
<br><button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-globe logo slideanim"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2><br>
<h4><strong>MISSION:</strong> {% placeholder mission %}</p>
</div>
</div>
</div>
<!-- Container (Services Section) -->
<div id="services" class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row slideanim">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row slideanim">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center bg-grey">
<h2>Portfolio</h2><br>
<h4>What we have created</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York" width="400" height="300">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco" width="400" height="300">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div><br>
<h2>What our customers say</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>"This company is the best. I am so happy with the result!"<br><span style="font-style:normal;">Michael Roe, Vice President, Comment Box</span></h4>
</div>
<div class="item">
<h4>"One word... WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler Bing, Actor, FriendsAlot</span></h4>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Container (Pricing Section) -->
<div id="pricing" class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works for you</h4>
</div>
<div class="row slideanim">
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Pro</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Premium</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail#something.com</p>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
<div id="googleMap" style="height:400px;width:100%;"></div>
<!-- Add Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Bootstrap Theme Made By www.w3schools.com</p>
</footer>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
})
</script>
</body>
{% endblock
%}
</html>
I would recommend using the developer console to see if any files are missing during the plugin load. There you should be able to see if any static files are missing.
Also, please make sure that your static files are configured properly - i.e. that you have ran manage.py collectstatic and the static URL points to the right location.
Related
I have a page with a fullheight hero element and I want to "stick" the content that is in <div class="hero-body"> on the top of its container beacuse as now it centers automatically and I don't want that (it's a dashboard...).
How I can do?
Thanks in advance.
This is like what I want:
This is currently my code:
<link href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css" rel="stylesheet"/>
<section class="hero is-fullheight-with-navbar">
<!-- Hero head: will stick at the top -->
<div class="hero-head">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
<nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ url_for('home') }}">
<img src="{{ url_for('static', filename='images/logo-m.png') }}" alt="logo">
<span class="has-text-grey-dark"> by Artemis™</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasic" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item has-text-grey" href="{{ url_for('home') }}">Home</a>
<div class="navbar-item">
<a class="button is-primary is-rounded" href="{{ url_for('auth.login') }}">
<strong>Login</strong>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-narrow">
<aside class="menu">
<p class="menu-label">Servizi Arc</p>
<ul class="menu-list">
<li>
<i class="fas fa-project-diagram"></i> Actions™
<ul style="{{ 'display: block;' if 'actions' in request.path else 'display: none;' }}">
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
</ul>
</li>
<a><i class="fas fa-shield-alt"></i> Security™ <span class="tag is-primary is-rounded">In arrivo</span></a>
</ul>
</aside>
</div>
<div class="column is-7">
<div class="box">
<h1 class="title has-text-weight-light">
Hello, <span class="has-text-weight-bold">username</span>.
</h1>
<p class="subtitle is-5 has-text-grey">Seleziona un servizio per continuare...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<footer style="border-top: 1px solid hsl(0, 0%, 93%); padding-top: 1.7rem;">
<div class="container">
<div class="columns is-vcentered is-centered has-text-centered-mobile">
<div class="column is-narrow">
<img src="{{ url_for('static', filename='images/logo-s.png') }}" alt="logo">
</div>
<div class="column is-3">
<h5 class="title is-5 has-text-grey-light has-text-weight-normal is-italic">
Arc ha come obiettivo il creare un'ecosistema semplice ma potente per aiutarti a gestire tutte le tue operazioni.
</h5>
</div>
<div class="column is-4 is-narrow">
© 2020 RGBCraft & Artemis™.
<br>
<i>Tutti i diritti riservati.</i>
</div>
<div class="column is-narrow">
Sitemap
<ul>
<li><a class="has-text-grey" href="{{ url_for('home') }}">Home</a></li>
<li><a class="has-text-grey" href="{{ url_for('auth.login') }}">Login</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</section>
Add the following classes like below:
<div class="hero-body is-align-items-stretch"> <!-- the important class is here -->
<div class="container is-flex">
<div class="columns is-centered is-flex-grow-1">
<div class="column is-narrow">
....
</div>
<!-- the below one (is-align-self-center) is not mandatory if you don't want to center the banner -->
<div class="column is-7 is-align-self-center">
....
</div>
Full code
<link href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css" rel="stylesheet" />
<section class="hero is-fullheight-with-navbar">
<!-- Hero head: will stick at the top -->
<div class="hero-head">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
<nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ url_for('home') }}">
<img src="{{ url_for('static', filename='images/logo-m.png') }}" alt="logo">
<span class="has-text-grey-dark"> by Artemis™</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasic" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item has-text-grey" href="{{ url_for('home') }}">Home</a>
<div class="navbar-item">
<a class="button is-primary is-rounded" href="{{ url_for('auth.login') }}">
<strong>Login</strong>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body is-align-items-stretch">
<div class="container is-flex">
<div class="columns is-centered is-flex-grow-1">
<div class="column is-narrow">
<aside class="menu">
<p class="menu-label">Servizi Arc</p>
<ul class="menu-list">
<li>
<i class="fas fa-project-diagram"></i> Actions™
<ul style="{{ 'display: block;' if 'actions' in request.path else 'display: none;' }}">
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
</ul>
</li>
<a><i class="fas fa-shield-alt"></i> Security™ <span class="tag is-primary is-rounded">In arrivo</span></a>
</ul>
</aside>
</div>
<div class="column is-7 is-align-self-center">
<div class="box">
<h1 class="title has-text-weight-light">
Hello, <span class="has-text-weight-bold">username</span>.
</h1>
<p class="subtitle is-5 has-text-grey">Seleziona un servizio per continuare...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<footer style="border-top: 1px solid hsl(0, 0%, 93%); padding-top: 1.7rem;">
<div class="container">
<div class="columns is-vcentered is-centered has-text-centered-mobile">
<div class="column is-narrow">
<img src="{{ url_for('static', filename='images/logo-s.png') }}" alt="logo">
</div>
<div class="column is-3">
<h5 class="title is-5 has-text-grey-light has-text-weight-normal is-italic">
Arc ha come obiettivo il creare un'ecosistema semplice ma potente per aiutarti a gestire tutte le tue operazioni.
</h5>
</div>
<div class="column is-4 is-narrow">
© 2020 RGBCraft & Artemis™.
<br>
<i>Tutti i diritti riservati.</i>
</div>
<div class="column is-narrow">
Sitemap
<ul>
<li><a class="has-text-grey" href="{{ url_for('home') }}">Home</a></li>
<li><a class="has-text-grey" href="{{ url_for('auth.login') }}">Login</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</section>
Basically what you are trying to achieve , pushing contents from bottom to top is by not displaying the top content
rather than setting the visibility of top portion to invisible
Try this out ,( in your class="hero-head")
<div class="hero-head display is-hidden-mobile">
Please refer this documentation for more clarification
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 ??
Here is my issue, I would like to get a closed collapse on each project (h3) I know the first one has to be open, but I would like all the others to be closed. Actually, the collapse is working, but they are all "open"
I tried to minimize the code to let you see the most relevant so as you can see there is only 2 project but I can have more than a hundred I removed the php because he build what you can see there.
<div class="categorie">
<div class="row">
<div class="col-xs-12">
<div class="well-header" data-toggle="collapse" data-target=".collapse-csnm" aria-expanded="false" aria-controls="livraison_1_0 ">
<h3>CSNM</h3>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</div>
<div class="well well-white test collapse-csnm in" id="livraison_1_0"
<div class="well-content">
<div class="row">
<blockquote class="recap">
<p class="labels">
<span class="label label-primary">Développement</span>
<span class="label label-default">Url</span>
<span id="state-projetcheklist-1" class="state state-nosmile"></span>
</p>
<p data-toggle="collapse" href="#site-1" aria-expanded="false" aria-controls="site">
Content
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categorie">
<div class="row">
<div class="col-xs-12">
<div class="well-header" data-toggle="collapse" data-target=".collapse-salt-travel" aria-expanded="false" aria-controls="livraison_3_0 ">
<h3>Salt Travel</h3>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</div>
<div class="well well-white test collapse-salt-travel in" id="livraison_3_0" <div class="well-content">
<div class="row">
<blockquote class="recap">
<p class="labels">
<span class="label label-primary">Intégration</span>
<span class="label label-default">Url</span>
<span id="state-projetcheklist-3" class="state state-nosmile"></span>
</p>
<p data-toggle="collapse" href="#structure-accueil-3" aria-expanded="false" aria-controls="structure-accueil">
Content
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
So do you know what to do to get the first one opened and all others closed ?
Thanks for you help.
There is a little mistake in your HTML replace all in class with collapse at div who has class well
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="categorie">
<div class="row">
<div class="col-xs-12">
<div class="well-header" data-toggle="collapse" data-target=".collapse-csnm" aria-expanded="false" aria-controls="livraison_1_0 ">
<h3>CSNM</h3>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</div>
<div class="well well-white test collapse-csnm collapse" id="livraison_1_0"
<div class="well-content">
<div class="row">
<blockquote class="recap">
<p class="labels">
<span class="label label-primary">Développement</span>
<span class="label label-default">Url</span>
<span id="state-projetcheklist-1" class="state state-nosmile"></span>
</p>
<p data-toggle="collapse" href="#site-1" aria-expanded="false" aria-controls="site">
Content
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categorie">
<div class="row">
<div class="col-xs-12">
<div class="well-header" data-toggle="collapse" data-target=".collapse-salt-travel" aria-expanded="false" aria-controls="livraison_3_0 ">
<h3>Salt Travel</h3>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</div>
<div class="well well-white test collapse-salt-travel collapse" id="livraison_3_0" <div class="well-content">
<div class="row">
<blockquote class="recap">
<p class="labels">
<span class="label label-primary">Intégration</span>
<span class="label label-default">Url</span>
<span id="state-projetcheklist-3" class="state state-nosmile"></span>
</p>
<p data-toggle="collapse" href="#structure-accueil-3" aria-expanded="false" aria-controls="structure-accueil">
Content
</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
My website contains this simple menu home, about me and contact.
It's single page website, I want to make it easy for user's when visiting my page, user can scroll down the page to check the contact or about me etc or user can just simply click About me or Contact and the window will pop up and show only About me or Contact [using modals in bootstrap], I am able to do that ,but all things event containing modals are hidden on my page , how can I make those things containing modals visible on my page ?
Here is simple contact page codes with modals.
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav" id="nav">
<li>
<a href="#">Home
</a>
</li>
<li>
<a href="#abt_modal" data-toggle="modal" data-target="#abt_modal">About me
</a>
</li>
<li>
<a href="#modal1" data-toggle="modal" data-target="#myModal"> Contact
</a>
</li>
<li>
</ul>
</div>
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog">
<footer class="f7" id="modal1">
<button type="button" class="btn btn-default" data-dismiss="modal" id="close1">Close</button>
<div class="container-fluid">
<div class="row" id="ft">
<div class="ft">
<h3> SAY HELLO </h3>
<span>get in touch</span>
</div>
<div class="col-md-4 a">
<p>
<i class="fa fa-mobile-phone fa-5x"></i> <br><br>
<span> Call us at </span><br>
<span> +467i7292518347</span><br>
</p>
</div>
<div class="col-md-4 a" >
<p>
<i class="fa fa-map-marker fa-5x"></i> <br><br>
<span> Ul.Zagórze 27A </span> <br>
<span>05-098 Sadowata,<br> Poland </span>
</p>
</div>
<div class="col-md-4 a">
<p>
<i class="fa fa-envelope fa-5x"></i><br><br>
<span> Email us at</span> <br>
<span>Hotbong20376gównoJebanye#gmail.com</span><br>
</p>
</div>
</div>
</div>
</footer>
</div>
</div>
Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
function openModalDynamic() {
var message = $('#content-div');
BootstrapDialog.show({
title: 'Default Title',
message: $('#content-div'),
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}],
onhide: function(dialog) {
$('#content-container').append(message);
}
});
};
function openModalDynamic2() {
BootstrapDialog.show({
title: 'Default Title',
message: $('#content-div').clone(true),
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}],
onhide: function(dialog) {}
});
}
<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<button type="button" onclick="openModalDynamic()">Type 1</button>
<button type="button" onclick="openModalDynamic2()">Type 2</button>
<br> Type 1 : This code will cut the div from original location and put it into your modal.<br> Type 2 : This code will copy the div from original location and put it into your modal. So you will see same div at both the place.<br> This will work great
until and unless you have any activity depending upon id's of elements.
<div style="height : 250px">
</div>
<div id="content-container">
<div id="content-div">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="row">
<div class="col-sm-6">
About US will go here.
</div>
<div class="col-sm-6">
Contact US will go here.
</div>
</div>
</div>
</div>
</div>
I have a project where a user stores product information and creates articles. On my home view i have two divs. The one on the left is a ng-repeat which retrieves the articles of the products. The one on the right is a ng-repeat also, which shows my product list.
My problem is when i GET my articles, the right one div, breaks the line and shows up on my last result of my article.
this is the position of the right div i want
this is the position of the right div i dont want
here is my home view:
<!DOCTYPE html>
<html>
<head>
<style>
.col-md-4 {
float: right;
}
</style>
</head>
<body>
<br/>
<br/>
<div class="container" ng-controller="HomeCtrl">
<br/>
<div class="row">
<div class="col-md-8" ng-repeat="article in articles" >
<div class="panel panel-white post panel-shadow">
<div class="post-heading">
<div class="pull-left meta">
<div class="title h5">
<b>{{article.title}}</b>
</div><br/>
<ul class="list-unstyled list-inline">
<li><i class="glyphicon glyphicon-calendar"></i> {{article.published}}</li>
<li><i class="glyphicon glyphicon-user"></i> {{article._creatorname}}</li>
<li><button class="btn btn-danger btn-xs" ng-click="remove(article._id)"><span class="glyphicon glyphicon-trash"></span></button></li>
</ul>
</div>
</div>
<div class="post-description">
<p>{{article.body}}</p>
</div>
<div class="post-footer">
<div class="input-group">
<input type="text" id="userComment" ng-model="comment" class="form-control input-sm chat-input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" ng-click="addComment(article._id, comment)"><span class="glyphicon glyphicon-comment"></span> Add Comment</button>
</span>
</div>
<ul class="comments-list">
<li class="comment" ng-repeat="comment in article.comments">
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{comment._commentorname}}</h4>
<h5 class="time">{{comment.date}}</h5>
<div class="pull-right meta">
<button class="btn btn-danger btn-xs" ng-click="removeComment(article._id, comment._id)"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</div>
<p style="width: 350px;">{{comment.content}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<section class="panel panel-default mail-categories">
<div class="panel-heading">
<strong><span class="fa fa-th"></span>
Resources</strong>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="resource in resources">
{{resource.name}}, Model Number: {{resource.modelno}}
</li>
</ul>
</section>
</div>
</div>
</div>
</body>
</html>