Ok, this is a strange one.
I asked a question before about this, but I mistook this for a CSS issue but it appears to be something to do with ui-router / ngRoute (As this was happening before I switched to ui-router).
I was getting an issue with spacing which I mistook for a child margin issue.
So here is my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>document.write('<base href="' + document.location + '" />');</script>
<!-- Keep the scale and disable zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<link href="content/foundation/normalize.min.css" rel="stylesheet" />
<link href="content/foundation/foundation.min.css" rel="stylesheet" />
<link href="content/font-awesome.min.css" rel="stylesheet" />
<link href="content/animate.min.css" rel="stylesheet" />
<link href="content/angular-toastr.min.css" rel="stylesheet" />
<link href="content/core.min.css" rel="stylesheet" />
<script src="scripts/modernizr-2.8.3.min.js"></script>
</head>
<body ng-app="test" metro>
<div>
<nav class="top-bar" role="navigation">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home">Test site</a></h1>
</li>
</ul>
<section class="profile right" profile></section>
</nav>
</div>
<section class="page" ui-view></section>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-cookies.min.js"></script>
<script src="scripts/angular-ui-router.min.js"></script>
<script src="scripts/angular-touch.min.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<script src="scripts/angular-animate.min.js"></script>
<script src="scripts/mm-foundation-tpls-0.5.1.js"></script>
<script src="scripts/angular-toastr.tpls.js"></script>
<script src="app/app.js"></script>
<script src="app/common/common.js"></script>
<script src="app/common/api/handler.js"></script>
<script src="app/common/models/models.js"></script>
<script src="app/common/options/options.js"></script>
<script src="app/components/components.js"></script>
<script src="app/components/metro/metro.js"></script>
<script src="app/components/tiles/tiles.js"></script>
<script src="app/components/profile/profile.js"></script>
<script src="app/components/draggable/draggable.js"></script>
<script src="app/components/loadingButton/loadingButton.js"></script>
<script src="app/components/backgroundSwitcher/backgroundSwitcher.js"></script>
<script src="app/home/home.js"></script>
<script src="app/error/error.js"></script>
<script src="app/account/account.js"></script>
<script src="app/account/stock/stock.js"></script>
<script src="app/security/security.js"></script>
<script src="app/security/profile/profile.js"></script>
<script src="app/customerServices/customerServices.js"></script>
<script src="app/customerServices/viewOrder/viewOrder.js"></script>
</body>
</html>
I commented out all the css file and was still getting the issue. The spacing problem appears between the ui-view and the child page.
An example of a child page is this:
<div class="row slide-in-right">
<section class="tile-column large-2 columns" id="{{ container.id }}" ng-repeat="container in controller.menu" tile-column>
<h1 class="column-title">{{ container.name }}</h1>
<a class="tile box-shadow {{ tile.classes }}" id="{{ tile.id }}" ui-sref="{{ tile.action }}" ng-repeat="tile in container.tiles" coloured-tile="{{ tile.colour }}" tile>
<i class="fa {{ tile.icon }}"></i>
<span class="title">{{ tile.name }}</span>
</a>
</section>
</div>
I tried removing all the HTML (except one div inside the ui-view) using chrome developer tools and the problem still remained.
If I look at the dev tools, I can see this:
As you can see, the highlight bit shows the space that seems to be included.
If I edit the HTML I can see this:
If I remove that red dot, the spacing issue goes away.
I have no idea what is causing it.
Does anyone else?
Related
Here is my code. I am currently building a website and got stuck in the first step itself.
According to the tutorial that I am following, two icons should show up in the window but I just get a blank white screen.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Eventors | Events</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<div class="hamburger-menu">
<i class="fas fa-bars toggle"></i>
<i class="fas fa-times toggle"></i>
</div>
<nav>
<a href="index.html">
<img src="images/logo.jpg" alt="">
</a>
</nav>
</div>
</header>
<script src="https://kit.fontawesome.com/ba33ab971e.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>
Your FontAwesome link is not working.
Change <script src="https://kit.fontawesome.com/ba33ab971e.js"></script> with a correct import tag and it'll be fine.
I've tried with mine and everything else works as expected.
It's due to the restricted link you are using for fontawesome.
Try to replace the "https://kit.fontawesome.com/ba33ab971e.js" with "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js".
Thank you for your help everyone.
The problem was in the way FontAwesome was called in the code, just like you guys pointed out.
I followed this article https://www.w3schools.com/icons/fontawesome_icons_intro.asp to make corrections.
I added in the head of my HTML code.
I a having a hard itme to get some text next to an icon. Here is my current code:
<html>
<head> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<i class="pull-left glyphicon glyphicon-envelope">
<h3>some email address</h3> </i>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/E|#
heAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWr|#
WCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX|#
4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
The result can be seen here here
As you can see the email adress is on the next line in stead of next to the envelope icon. How can I put the side by side?
Thanks
jsfiddle: http://jsfiddle.net/1dov5ea4/2/
I tried this :
<h3>
<i class="pull-left glyphicon glyphicon-envelope"></i>
some email address
</h3>
Put the <i> tag inside the <h3> tag
This should work for you. you need to watch out becouse your closing li tag was somewhere off screen.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
</head>
<body>
<h3> <i class="pull-left glyphicon glyphicon-envelope"></i>some email address</h3>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/E|#
heAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWr|#
WCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX|#
4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
</script>
</body>
try to add <i> tag inside <h3> like this http://jsfiddle.net/1dov5ea4/30/
<h3> is a block element so it's put on its own line automatically...
to fix it use <i> instead of <h3> and play with it's style to make the font size bigger
or wrap the whole thing in a div without the h3
Does anyone know, why when I try previewing my site, it doesn't show anything? Something wrong with my code?
When I check the source code, it won't tell me accurately enough what the problem is?
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
Try to close explicitly the script tag
<script src="script.js" />
Should be
<script src="script.js" ></script>
If you need more explanations you can check this question.
You are missing the <HTML> and the <!DOCTYPE> tags. Your code code should be like this:
<!DOCTYPE html>
<html>
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div class="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
</html>
Note that you also have a wrong div tag <div="row">, which I'm assuming might be the div class property that's why I set it as class attribute on the above example.
It is also recommended to add the type attribute and explicit closing tag on the JavacScript import, like this:
<script type="text/javascript" src="script.js"></script>
Code(In head):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="js/boootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
</head>
Code(In body):
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="d" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown Menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="d">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</div>
I looked and tried in many way from stackoverflow to solve this problem.But nothing worked for me.This code is working in https://jsfiddle.net/DTcHh/10972/ but when i open it with browser it is not working.
#AlexG's answer is correct (i haven't enough reputation to comment).
The very first line in the bootstrap.js is to check for jquery
if(typeof jQuery==='undefined'){throw new Error('Bootstrap\'s JavaScript requires jQuery')}
Because you load jquery after bootstrap, it will throw an exception. So even if this doesn't solve your problem with the drop down, you still must include it first.
<script type="text/javascript" src="js/boootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
here seems to be the problem. include jquery before bootstrap
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/boootstrap.min.js"></script>
jQuery after Bootstrap
jQuery before Bootstrap
Problem solved:
1)There was a console error.(Solved by Abhishek Ghosh)
2)The jquery script should be before bootstrap(Solved by AlexG)
I tested your code and found a console error. Then i tried with below CDN'S and it worked. Use these CDN and it would work fine
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
I am building a huge one-page site, so I wanted to keep my code clean. I decided to part it into several HTML files and include them in one main index.html. So I wrote a snippet of code in index.html and everything worked fine. However, as I tried to include this snippet from another file, my web page did not appear properly.
Here is the snippet I wrote:
<div class="hidden-sm hidden-xs" id="containerStart">
<div id="left" class="start">
<img src="../pics/svg/Logo%20links.svg" class="logoStart hidden img-responsive" id="logoLeft">
</div>
<div id="right" class="start">
<img src="../pics/svg/Logo%20rechts.svg" class="logoStart hidden img-responsive" id="logoRight">
</div>
<div id="captions">
<h3 class="hidden" id="mivalStart">Mival</h3>
<h5 class="hidden" id="mivalMotto">Innovative Vertriebskonzepte</h5>
</div>
</div>
Here is my index.html:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!--Start animation css-->
<link rel="stylesheet" href="../css/start.css">
<link rel="stylesheet" href="../css/letterFx.css">
<title>Mival</title>
</head>
<body ng-app>
<!--Intro-->
<div ng-include src="'intro.html'"></div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-letterfx.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/start.js"></script>
</body>
</html>
Maybe you know any solutions for my problem?