I have a simple navigation bar:
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<li class="submenu">
<a href="index.php">
<i a href="index.php" class="glyphicon glyphicon-edit"></i> Idmancilar
<span class="caret pull-right" href="index.php"></span>
</a>
<ul>
<li>Qeydiyyat sorgulari</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-edit"></i>Mesqciler</li>
<li><i class="glyphicon glyphicon-edit"></i> Klublar</li>
<li><i class="glyphicon glyphicon-edit"></i>Yarislar</li>
<li><i class="glyphicon glyphicon-edit"></i> Qeydiyyat sorgulari</li>
<li><i class="glyphicon glyphicon-edit"></i> Logout</li>
</ul>
</div>
</div>
When I open the submenu the player_requests is opened, but from there I can not navifate back to the parent index.php page. When I click on element the span and submenu are opened again and no redirection to the required index.php page.
The problem is likely due to the fact that you have invalid HTML.Only the <a>, <area>, <base> and <link> tags can have the href attribute.
Both <i a href="index.php" ... > and <span ... href="index.php"> are invalid.
You'll need to remove href from both your <i> and your <span> tags,as can be seen in the following:
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<li class="submenu">
<a href="index.php">
<i class="glyphicon glyphicon-edit"></i> Idmancilar
<span class="caret pull-right"></span>
</a>
<ul>
<li>Qeydiyyat sorgulari</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-edit"></i>Mesqciler</li>
<li><i class="glyphicon glyphicon-edit"></i> Klublar</li>
<li><i class="glyphicon glyphicon-edit"></i>Yarislar</li>
<li><i class="glyphicon glyphicon-edit"></i> Qeydiyyat sorgulari</li>
<li><i class="glyphicon glyphicon-edit"></i> Logout</li>
</ul>
</div>
Related
Hello I am trying to put a carousel in my modal. everything was working fine until I put it. can someone please tell me what's wrong?
gallery.html
{% for photo in gallery %}
×
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="{{photo.imageURL}}" alt="First slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
please change below photo url path
<img src="{{photo.image.url}}" alt="First slide">
So, here is what I have in my app.py file:
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
app = Flask( __name__)
Bootstrap(app)
#app.route('/')
def hello():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
Here is what I have in my index.html file:
{% extends "bootstrap/base.html" %}
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
{% endblock %}
{% block content %}
{% endblock %}
First picture is what I expect to see, second picture is what I actually get. I've cleared all cache on my browsers, tried Google Chrome and Mozilla Firefox. Please advise.
Flask boostrap is dead i think the last commit was made over 3 years ago...
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Use that starter template as your base.html and add the navbar there.
I have the following page: http://mindspyder.com/newline/my-account.html
And the following code on that page:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="btn btn-primary btn-sm" href="#" role="button"><i class="fa fa-search-plus"></i> View</a> </li>
<li class="nav-item"> <span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span></li>
<li class="nav-item"> <a class="btn btn-primary btn-sm" href="#download" role="tab" data-toggle="tab">Settings</a> </li>
</ul>
<!-- /Nav tabs -->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="review"></div>
<div role="tabpanel" class="tab-pane" id="edit"></div>
<div role="tabpanel" class="tab-pane" id="delete">hello</div>
<div role="tabpanel" class="tab-pane" id="download">
<p>
<form>
<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Invoice" id="CheckboxGroup1_0">
Invoice</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Establishment Kit" id="CheckboxGroup1_1">
Establishment Kit</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Declaration of Custody Trust" id="CheckboxGroup1_2">
Declaration of Custody Trust</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Trustee Minutes" id="CheckboxGroup1_3">
Trustee Minutes</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Compliance Letter" id="CheckboxGroup1_4">
Compliance Letter</label>
<br>
</p>
</form>
</p>
<p>
<button type="button" class="btn btn-success btn-sm">Download Selected <i class="fa fa-arrow-down"></i></button>
</p>
</div>
</div>
<!-- /Tab panes -->
Now, if you go to the page and click the blue Delete button, everything works perfectly. Now if you click Cancel, and click on one of the other tabs, it still works as it should. The problem is you click Delete again, it doesn't switch back to the Delete tab when opening the modal, but leaves it on the previous tab.
What am I doing wrong?
I figured it out, by changing the nesting, so:
<span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span>
becomes:
<a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><span data-toggle="modal" data-target="#myModal"><i class="fa fa-times"></i> Delete</span></a>
and now it works as it should.
I am working with django and bootstrap3. I've downloaded a template from from http://startbootstrap.com/template-overviews/landing-page/ . The github repo is https://github.com/IronSummitMedia/startbootstrap-landing-page/blob/gh-pages/index.html
This contains The following in the index.html:
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Landing Page</h1>
<h3>A Template by Start Bootstrap</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
How is the introductory photo included here. I see the stock photo at https://github.com/IronSummitMedia/startbootstrap-landing-page/blob/gh-pages/img/intro-bg.jpg . I assume this is some bootstrap3 magic?
put the correct url in the landing-page.css
.intro-header {
background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover;
}
thats it
I´ve implemented the Foundation Off-Canvas Menu as a Multilevel Menu. When I use the original code example from the documentation, I´ve the problem, that the submenu isn´t working. It´s shown but it´s not formated (sub-levels not hidden) and the click event to open the submenu is also not triggered.
To me it looks like some parts are not compiled although I compile the whole foundation framework, not only specific modules.
Has anybody an idea where I can start searching? The other parts of the menu work great.
Here´s the HTML code:
<aside class="left-off-canvas-menu" aria-hidden="true">
<ul class="off-canvas-list">
<li><label>Navigationsmenü</label></li>
<li><i class="fa fa-shopping-cart"></i> Mein Warenkorb</li>
<li><i class="fa fa-arrow-right"></i> Zur Kasse</li>
<li><label>Mein Konto</label></li>
<li class="my-account">
<div class="avatar">
<img src="<?php echo "http://www.gravatar.com/avatar/" . md5( strtolower( trim( 'mail#mail.com' ) ) ) . "?s=100";?>" class="avatar" alt="Avatar" />
</div>
<div class="user">
<span class="title">John Doe</span>
<span class="email">email#email.com</span>
</div>
<div class="clearfix"></div>
<i class="fa fa-user"></i> Meine Daten ändern
</li>
<li><i class="fa fa-home"></i> Adressbuch bearbeiten</li>
<li><i class="fa fa-truck"></i> Meine Bestellungen</li>
<li><i class="fa fa-lock"></i> Passwort ändern</li>
<li><i class="fa fa-envelope"></i> E-Mail Adresse ändern</li>
<li><i class="fa fa-power-off"></i> Ausloggen</li>
<li><label>Produktkategorien</label></li>
<li class="has-submenu">Aktionen
<ul class="left-submenu">
<li class="back">Zurück</li>
<li><label>Level 1</label></li>
<li>Sonderangebote der Woche</li>
<li>Monatsaktionen</li>
<li>Spezialaktionen
<li>Maximal sparen</li>
</ul>
</li>
<li>Gutscheine</li>
<li class="has-submenu">Ernährung
<ul class="left-submenu">
<li class="back">Zurück</li>
<li><label>Level 1</label></li>
<li>Nahrungsergänzungsmittel</li>
<li>Vitamine & Mineralstoffe</li>
<li>Spezialnahrung
<li>Gesund abnehmen</li>
<li>Sportlernahrung</li>
</ul>
</li>
</ul>
</aside>
And that´s the SCSS file (app.scss):
#import "compass/css3/border-radius";
#import "compass/css3/box-shadow";
#import "settings";
#import "foundation";
Thanks,
Michael