I'm working on Django project with Materializecss design - Built a page with floating button for example.
Why is it not working?
I started using exactly the template from the website: https://materializecss.com/getting-started.html
and updated from the CDN part in the page:
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
And added at the bottom:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Thanks a lot!
The full HTML:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
After reading some posts, I use a suggestion to add the below, and it worked:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
If someone know to explain the below, it'll be great:
Why the updated version of the files is not working?
What's the right way to install it for production?
The full HTML with the 'ADDED PART THAT MAKE IT WORK':
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<i class="material-icons">add</i>
<ul>
<li><a href="#" class="btn-floating btn-large blue">
<i class="large material-icons">filter_drama</i></a></li>
<li><a href="#" class="btn-floating btn-large green">
<i class="large material-icons">insert_chart</i></a></li>
</li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
ADDED PART THAT MAKE IT WORK:
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
Related
I was writing an html page with bootstrap and then I come across some sort of kind of error the navbrand is too long. It takes up a whole lot of space in my navbar at the point when I view it on mobile It takes up a whole line and the hamburger icon goes to the bottom. This problem doesn't occur with text only with images.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Urci</title>
<!-- BOOTSTRAP -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- CSS -->
<!-- CSS -->
<link rel='stylesheet' href="{% static 'home/css/custom.css' %}">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Oswald:wght#300&family=Roboto+Condensed&display=swap" rel="stylesheet">
<!-- W3 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
<div class="container-fluid">
<a class="navbar-brand urci-brand" href="{% url 'home' %}"><img class="branding "src="{% static 'home/images/Urci-Logo.png' %}" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav custom-navbar">
<a class="nav-link" href="{% url 'bod' %} ">Board of Directors</a>
<a class="nav-link" href="#">Events</a>
{% if user.is_authenticated %}
<div class="navbar-nav ml-auto">
<a class="nav-link" href="{% url 'announcement:create' %}">Create Announcement</a>
<a class="nav-link" href="#">Create Events</a>
{% endif %}
</div>
</div>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
enter image description here
In your home/css/custom.css add the following...
.urci-brand{
width: fit-content !important;
}
This would mean that the width of the anchor tag would be the width of the content within it.
And the !important is used to overwrite some bootstrap styling.
I'm struggling with initializing the vue instance from separate js file (I don't ant to keep the code inside each template html).
template:
<html>
<head>
<title>Cinema project</title>
<meta name="viewport" content="width=device-width, initail-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
{% load static %}
</head>
<body>
<div class="container">
<ul class="list-group mt-2">
{% for x in huj%}
<li class="list-group-item">{{x}}</li>
{% endfor %}
</ul>
[[rate]]
</div>
<script src="{% static 'js/vue.js' %}" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
js_file:
new Vue({
delimiters: ['[[', ']]'],
el:".container",
data: {
rate: "test",
},
})
The staticfiles_dir works - I tested it with some random js code. In the above vue instance simply can't hook with my template. Is there any way to fix it ?
Vue requires each component to have ONE single root node. Your code example has two because you've placed [[rate]] outside the ul.
Maybe this works better:
<div class="container">
<div>
<ul class="list-group mt-2">
{% for x in huj%}
<li class="list-group-item">{{x}}</li>
{% endfor %}
</ul>
[[rate]]
</div>
</div>
I followed the documentation for off-canvas use and it didn't work at all. F6 Forum returned 403 when I tried to create a post at theri forum :(.
Here is the HTML code I tried:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="app.css"/>
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
Welcome !
</div>
</div>
<!-- Compressed JavaScript -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
There is only "Welcome' displayed, no off-canvas. What am I doing wrong here ? Thank you.
Are you sure there is nothing there?
It looks like you are just missing a click handler to open your off canvas content - as per the docs.
Try and adding:
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
within your
<div class="off-canvas-content" data-off-canvas-content>
I found an example how to copy text to clipboard with ZeroClipboard. However, I tried to convert the original code to flask and I run into TemplateSyntaxError: expected token 'end of statement block', got 'onload' because of {% block body onload="init();"%}. How is it possible to use onload="init();" with Jinja?
Here is app.py
#app.route("/table/", methods=["GET"])
def table():
return render_template('table.html')
Here is base2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flask-bootstrap example</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap/css/bootstrap.css')}}" >
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='web.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='tooltip.css') }}">
<style>
.clip_button {
background:#063;
padding:4px;
width:100px;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url_for('index') }}">test</a>
</div>
<!--/.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home-url">Home</li>
<li id="about-url">About</li>
<li id="contact-url">Contact</li>
</ul>
<!--/.navbar-nav -->
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
<div class="container">
{% block body %}{% endblock %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="{{url_for('static', filename='bootstrap/js/bootstrap.js')}}"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript" >
$("a.my-tool-tip").tooltip();
$('.selectpicker').selectpicker();
$("#reference_select").selectpicker("refresh");
</script>
<script type="text/javascript" src="{{url_for('static', filename='ZeroClipboard/ZeroClipboard.js')}}"></script>
<script language="JavaScript">
////copy to clip
var clip = null;
function $(id) { return document.getElementById(id); }
function init()
{
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
}
function move_swf(ee)
{
copything = document.getElementById(ee.id+"_text").value;
clip.setText(copything);
if (clip.div)
{
clip.receiveEvent('mouseout', null);
clip.reposition(ee.id);
}
else{ clip.glue(ee.id); }
clip.receiveEvent('mouseover', null);
}
</script>
<script type="text/javascript">
{% block js %}{% endblock %}
</script>
</body>
</html>
Here is the (table.html):
{% extends 'base2.html' %}
{% block body onload="init();"%}
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table">
<tbody>
<tr>
<td><input type='text' id='textid5_text' value='your text 5' /></td>
<td><div id='textid5' onload="init();" onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
</tr>
</tbody>
</table>
</div>
</div>
{% endblock %}
onload is an HTML attribute. It has nothing to do with Jinja. You can simply place it right on your <body> tag.
<body onload="init();">
If you don't need it in every page where you use this base template, you'll need to add a block inside the <body> tag
<body {% block body_attrs %}{% endblock %}>
And then override it in your child template
{% block body_attrs %} onload="init();" {% endblock %}
I am trying to use zurb foundation 5 reveal modal. But it's not working and not open when I click on button.
I am using this html code.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="css/foundation.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<title>index</title>
</head>
<body>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a> </div>
<a class="button" href="#" data-reveal-id="myModal">Click for a modal</a>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script type="text/javascript">
$('#myModal').foundation();
</script>
</body>
</html>
Change the last script tag to this:
<script type="text/javascript">
$(document).foundation();
</script>
You also forgot to add the modal trigger:
Click Me For A Modal
See documentation here: http://foundation.zurb.com/docs/components/reveal.html
You may be running into this issue if you have called $(document).foundation(); twice on the same page.
Its works for me
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
in footer i used this snippet
<script>
jQuery(document).ready(function(){
jQuery(document).foundation();
jQuery('#dd').click(function(){
jQuery('#myModal').foundation('reveal', 'open');
});
});
</script>