I am writting an article on my Drupal 7 site directly with HTML source code.
When i save my content and want to modify it again, all my HTML source code has changed structure.
The display is what i want but the html source code is more complex then mine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Ligne (collapse) -->
<a class="row ligne" data-toggle="collapse" href="#ligne-collapse-19">
<!-- Titre ligne -->
<div class="col-md-5 col-xs-12 titre-ligne">Transport en commun<i class="glyphicon glyphicon-info-sign"></i></div>
<!-- Contenu ligne -->
<div class="col-md-7 col-xs-12">
<div class="vals">
<div class="col-xs-4"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-4"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-4"><i class="glyphicon glyphicon-ok"></i></div>
</div>
</div>
</a>
<!-- Contenu caché (collapse) -->
<div class="row collapse" id="ligne-collapse-19">
<div class="ligne-detail">
<div class="col-md-8 col-xs-10 col-center">
Profitez d'un mois gratuit* sur votre assurance auto pour toute nouvelle souscription.
</div>
</div>
</div>
<!-- Fin Ligne -->
Becomes
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-md-5 col-xs-12 titre-ligne"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1">Responsabilité civile<i class="glyphicon glyphicon-info-sign"></i></a></div>
<a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1">
<!-- Contenu ligne -->
</a>
<div class="col-md-7 col-xs-12">
<div class="vals">
<div class="col-xs-4"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"><i class="glyphicon glyphicon-ok"></i></a></div>
<div class="col-xs-4"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"><i class="glyphicon glyphicon-ok"></i></a></div>
<div class="col-xs-4"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"><i class="glyphicon glyphicon-ok"></i></a></div>
</div>
</div>
<a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"> </a>
<!-- Contenu caché (collapse) -->
<div class="row collapse" id="ligne-collapse-1">
<div class="ligne-detail">
<div class="col-md-8 col-xs-10 col-center">Elle couvre les dommages occasionnés par votre véhicule impliqué dans l'accident et constitue le minimum exigible de tout contrat d'assurance auto.</div>
</div>
</div>
<!-- Fin Ligne -->
All my links <a href="..." are splitted... what can i do to avoid this ?
As we can see in comments, there are no simple way to avoid Drupal from modifying custom HTML :
With a module hook into the core (thanks #headmax)
With Text format attribute put on "PHP Code"
I chose Text format because i have no time to spare on a new module.
Thanks for your answers
If you're using the WYSIWYG module, there's a setting called "Apply simple source formatting" (at /admin/config/content/wysiwyg/) that will reformat your code, even if you are editing the source directly.
Related
i am trying to show the content pages (for example index.vbhtml) in my template (_layout.vbhtml) but it is not working. in plain html content pages it's working fine.
i am not sure where i am getting wrong. Shots:≥≥≥
_layout index out-true out-wrong
Do you have anything in your ViewStart file that's designating layout?
I think you are missing to add bellow code
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
place your code to review
I think it's a problem with the code _layout.vbhtml. Because when I replaced with another _layout, the problem was resolved.
This is my _layout file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>صفحه شروع | کنترل پنل</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="dist/css/bootstrap-theme.css">
<!-- Bootstrap rtl -->
<link rel="stylesheet" href="dist/css/rtl.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.css">
<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
#RenderSection("scripts", False)
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini">پنل</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>کنترل پنل مدیریت</b></span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">علیرضا حسینی زاده</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
علیرضا حسینی زاده
<small>مدیریت کل سایت</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
صفحه من
</div>
<div class="col-xs-4 text-center">
فروش
</div>
<div class="col-xs-4 text-center">
دوستان
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
پروفایل
</div>
<div class="pull-right">
خروج
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<i class="fa fa-gears"></i>
</li>
</ul>
</div>
</nav>
</header>
<!-- right side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="جستجو">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">تیتر</li>
<!-- Optionally, you can add icons to the links -->
<li class="active"><i class="fa fa-link"></i> <span>لینک</span></li>
<li><i class="fa fa-link"></i> <span>لینک ۲</span></li>
<li class="treeview">
<a href="#">
<i class="fa fa-link"></i> <span>چند سطحی</span>
<span class="pull-left-container">
<i class="fa fa-angle-right pull-left"></i>
</span>
</a>
<ul class="treeview-menu">
<li>لینک سطح ۱</li>
<li>لینک سطح ۱</li>
</ul>
</li>
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
عنوان صفحه
<small>توضیحات</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> خانه</li>
<li class="active">صفحه</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
<!--------------------------
| Your Page Content Here |
-------------------------->
#RenderBody()
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer text-left">
<strong>Copyleft © 2014-2017 Almsaeed Studio & Alireza Hosseinizadeh</strong>
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="active"><i class="fa fa-home"></i></li>
<li><i class="fa fa-gears"></i></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane active" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">فعالیت ها</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">تولد غلوم</h4>
<p>۲۴ مرداد</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">پیشرفت کارها</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<h4 class="control-sidebar-subheading">
آپدیت لاراول
<span class="pull-left-container">
<span class="label label-danger pull-left">70%</span>
</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">تب وضعیت</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">تنظیمات عمومی</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
گزارش کنترلر پنل
<input type="checkbox" class="pull-left" checked>
</label>
<p>
ثبت تمامی فعالیت های مدیران
</p>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
</body>
</html>
problem solved . The address of the scripts in the _layout file and in the link tags must start with / ~
like this:
href="~/dist/...."
problem solved . The address of the scripts in the _layout file and in the head tag must start with / ~
like this:
href="~/dist/...."
When using standard examples with Material Design Lite, I see that the header and tabs bars looks very small. How come?
How to solve this?
This is the code:
<!doctype html>
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.content-grid {
max-width: 480px;
}
</style>
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">
<div>MzFaster</div>
</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" />
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item">About
</li>
<li class="mdl-menu__item">Categories</li>
<li class="mdl-menu__item">ContactUs</li>
<li class="mdl-menu__item">
Legal information</li>
</ul>
</div>
<div class="mdl-layout__header-row">
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Featured
Featured Music
Social
Trending
</div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
</div>
</main>
</div>
</body>
</html>
#Niet the Dark Absol -- answered the question as a comment. #Niet, when you create the answer (as suggested above) I will remove this text. The credit is yours!
The next line should be in the header section of the HTML file.
<meta name="viewport" content="width=device-width" />
Why does my .container main_container div hang on the header? (Its not because the 2 php error message, i tried)
If i give the div about 100px margin-top, it will be okay, but that isn't a good method.
After the header, I added a clearfix div, but it did nothing.
Fiddle
<nav class="navbar navbar-default navbar-fixed-top mainHeader">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="<?php echo $host; ?>"><?php echo $siteName; ?></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<?php
$top_menuDown = mysqli_query($kapcs, "SELECT * FROM top_menu WHERE top_menu_id IN (1,3,4,5,6,7) ORDER BY top_menu_sorrend ASC");
if(mysqli_num_rows($top_menuDown) > 0 )
{
while($top_nav = mysqli_fetch_assoc($top_menuDown))
{
echo '<li><a class="top_menu_to_link" href="'.$host.'/'.$top_nav['top_menu_seo'].'" title="'.$top_nav['top_menu_nev'].'">'.$top_nav['top_menu_nev'].'</a></li>';
}
}
?>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
This is because you use navbar-fixed-top class in your navbar. That's a Bootstrap class which makes your navbar position: fixed in CSS. Therefore you have to add margin-top or padding-top to your main_container. Clearfix has nothing to do with your issue in this case. When you use position: fixed browser get this element out of the normal document flow.
position: absolute/fixed:
The element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.
You have to use padding-top/margin-top to the body element. The reason is explained by #makshh. So just try to customize it based on screen size using Javascript.
Updated Fiddle
Here is an example--
$(window).resize(function() {
if ($(".navbar.navbar-default.navbar-fixed-top.mainHeader").height() > 100) {
$("html, body").css("padding-top", "150px");
}
});
<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>Főoldal</title>
<body style="padding-top:100px;">
<nav class="navbar navbar-default navbar-fixed-top mainHeader">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="https://kemenyem.hu">Nemzeti Reptéri Parkoló</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="top_menu_to_link" href="https://kemenyem.hu/" title="Kezdőlap">Kezdőlap</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/informaciok" title="Információk">Információk</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/erdekessegek" title="Hírek, érdekességek">Hírek, érdekességek</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/kapcsolat" title="Kapcsolat">Kapcsolat</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/arlista" title="Árlista">Árlista</a></li>
<li><a class="top_menu_to_link" href="https://kemenyem.hu/galeria" title="Galéria">Galéria</a></li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
<div class="container main_container">
<div class="homepage_slideshow hidden-xs">
<div class="home-slider-wrapper hidden-xs">
<ul class="bxslider">
<li><img src="https://kemenyem.hu/images/homepage_slideshow/93-3.jpg" title="Teszt kép 1" alt="Teszt kép 1" /></li>
<li><img src="https://kemenyem.hu/images/homepage_slideshow/393-1.jpg" title="Teszt kép 2" alt="Teszt kép 2" /></li>
</ul>
</div>
</div>
<!--Slider end-->
<div class="col-md-9 left_side">
<div class="left_title_div">
<h3 class="left_title">Parkolóhely foglalás online</h3>
</div>
<div class="content">
<h3><strong>A megrendelés, árajánlatkérés menete</strong></h3>
<p>Amennyiben árajánlatot szeretne kérni, azt a termékeknél a "Még jobb árat szeretnék" gombra, vagy a menüben az "Ajánlatkérés" menüpontra
való kattintással teheti meg.</p>
<p>A megjelenő ajánlatkérő ablakban / oldalon kérjük töltse ki az összes mezőt, és küldje el részünkre.</p>
<p>Munkatársaink 2 munkanapon belül felveszik Önnel a kapcsolatot az Ön által megadott elérhetőségek valamelyikén.</p>
<h3><strong>Fizetés</strong></h3>
<p>Megrendelését előre utalással, vagy személyesen valamelyik telephelyünkön készpénzzel tudja fizetni. A budapesti telephelyünkön lehetőség van bankkártyás fizetésre
is.</p>
<h3><strong>Szállítás</strong></h3>
<p>A részletes szállítási információkat megtekintheti a "Szállítás" menüpontban.</p>
<h3><strong>Árak</strong></h3>
<p>A weboldalon feltüntetett árak gyári árak, tartalmazzák a 27% ÁFÁ-t, de nem tartalmazzák a raklapok díját, a szállítást, és a lerakást.</p>
</div>
<div class="left_title_div">
<h3 class="left_title">Legfrissebb hírek</h3>
</div>
<div class="news_box news_list">
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/th_remy-metailler-hafjell_147-82712.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Jobb lett az instant futtatás az új Android Studio 2.3-ban">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Jobb lett az instant futtatás az új Android Studio 2.3-ban</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:27</span>
<p class="main_hir_box_desc">A Google a napokban új kiadást jelentett be integrált mobilos fejlesztőkörnyezetéből. Az új Android Studio 2.3 sok stabilitási fejlesztés mellett néhány érdekes funkcionális fejlesztést is hoz, amik az app-ok tervezését, tesztelését és a bennük
történő hibakeresést egyaránt segítik majd.</p>
</div>
</div>
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/thumb_ne-style-001-2532861600.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:27</span>
<p class="main_hir_box_desc">A bemutató feltételezi, hogy a gépeden már fel van telepítve a PHP, az SQL Server Express kiadása, valamint a Microsoft SQL Server meghajtói a PHP-hez és a Git verziókezelő is. A cikk során a következőket fogjuk megtanulni:</p>
</div>
</div>
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/th_s1600_0815_km_01-12894.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:25</span>
<p class="main_hir_box_desc">A Microsoft a hét elején Visual Studio blogjában egy olyan, általa poszternek hívott dokumentumot tett közzé, amelyben múlt héten bemutatott új integrált fejlesztői környezete legfontosabb újdonságait mutatja be. A máshol csak infografikának
hívott összeállításban az általános, produktivitást javító fejlesztések mellett unit-tesztelést segítő újdonságok, sőt, a C++, a C# és az ASP.NET újdonságai is említésre kerülnek.</p>
</div>
</div>
<div class="row main_hir_box">
<div class="col-md-3 main_hir_box_thumb_div">
<img src="https://kemenyem.hu/images/news/th_p-dsc04186-81966.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Új korszakot nyit a most elkészült LLVM és a Clang 4.0">
</div>
<div class="col-md-9 main_hir_box_data_div">
<h2 class="main_hir_title_list">Új korszakot nyit a most elkészült LLVM és a Clang 4.0</h2>
<span class="main_hir_box_date">HÍREK | 2017-03-15 16:24</span>
<p class="main_hir_box_desc">Az LLVM fejlesztői a napokban "final" jelöléssel látták el az LLVM és a Clang következő, 4-es verzióját. Bár a hivatalos bejelentés és a csomagok közzétételére vélhetően csak ezen a héten kerül majd sor, a fordító-infrastruktúra
és a hozzá kapcsolódó C/C++ fordító legújabb kiadása ezzel elkészültnek tekinthető.</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 right_side">
<div class="left_title_div">
<h3 class="left_title">Hírlevél</h3>
</div>
<div class="sidebar_data_div">
<div class="sidebar_data">
<p class="sidebar_text">Iratkozzon fel hírlevelünkre, hogy mindíg értesüljön az újdonsgokról, friss hírekről.</p>
<form action="files/newsletter.php" method="post" id="SidebarNewsletterForm">
<input type="text" id="newsletterName" name="NewsletterName" placeholder="Az Ön neve" class="form-control sidebar_input">
<input type="text" id="NewsletterEmail" name="NewsletterEmail" placeholder="E-mail címe" class="form-control sidebar_input">
<button type="button" id="NewsletterButton" name="NewsletterButton" class="sidebar_button"><i class="fa fa-envelope-o" aria-hidden="true"></i> Feliratkozás</button>
</form>
</div>
</div>
</div>
</div>
<footer class="footer-basic-centered">
<p class="footer-links">
<a class="footer_menu_to_link" href="https://kemenyem.hu/" title="Kezdőlap">Kezdőlap</a><a class="footer_menu_to_link" href="https://kemenyem.hu/informaciok" title="Információk">Információk</a><a class="footer_menu_to_link" href="https://kemenyem.hu/erdekessegek"
title="Hírek, érdekességek">Hírek, érdekességek</a><a class="footer_menu_to_link" href="https://kemenyem.hu/kapcsolat" title="Kapcsolat">Kapcsolat</a><a class="footer_menu_to_link" href="https://kemenyem.hu/arlista" title="Árlista">Árlista</a>
<a
class="footer_menu_to_link" href="https://kemenyem.hu/galeria" title="Galéria">Galéria</a>
</p>
<p class="footer-company-name">2017 <br />
<b>Notice</b>: Undefined index: k_nev in <b>/home/grashu/public_html/kemenyem.hu/files/footer.php</b> on line <b>15</b><br /> © - Minden jog fentartva!</p>
</footer>
<div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Bezárás</span></button>
<h4 class="modal-title" id="myModalLabel">Értesítés</h4>
</div>
<div class="modal-body">
<p id="newsletterResult"></p>
</div>
</div>
</div>
</div>
<i class="fa fa-chevron-up scrollToTopIcon" aria-hidden="true"></i></body>
Hope this helps!
I have a problem with Internet Explorer and HTML code. With Chrome, Edge and firefox all work fine, but in Explorer I have this
instead of
In debug mode I see some error into html code only with explorer:
-Translate:
It has been found tag in excess. In a document is allowed only one body tag.
element or end not expected. All the elements opened have to be closed before the second document end.
Token not expected
The body tag is added by browser. All other page works fine. Do you see something wrong in my code?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- Spring csrf -->
<meta name="_csrf" th:content="${_csrf.token}" />
<!-- default header name is X-CSRF-TOKEN -->
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fleets & cars</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Bootstrap Core CSS -->
<link th:href="#{/static/assets/bootstrap/css/bootstrap.css}"
rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
th:href="#{/static/assets/component/font-awesome-4.4.0/css/font-awesome.min.css}">
<!-- DataTables -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/dataTables.bootstrap.css}">
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css}">
<!-- Theme style -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/AdminLTE.min.css}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/skins/_all-skins.min.css}">
<!-- Select2 angular -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/select2Angular/select.css}">
<!-- jQuery 2.1.4 -->
<script th:src="#{/static/assets/plugins/jQuery/jQuery-2.1.4.min.js}"
type="text/javascript"></script>
<!-- Bootstrap 3.3.5 -->
<script th:src="#{/static/assets/bootstrap/js/bootstrap.min.js}"
type="text/javascript"></script>
<!-- DataTables -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/dataTables.bootstrap.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js}"></script>
<!-- Slimscroll -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/fastclick/fastclick.min.js}"></script>
<!-- Bootstrap-growl -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/notify/jquery.bootstrap-growl.js}"></script>
<!-- AdminLTE App -->
<script type="text/javascript"
th:src="#{/static/assets/dist/js/app.min.js}"></script>
<!-- Angularjs -->
<script th:src="#{/static/assets/js/angular.min.js}"
type="text/javascript"></script>
<!-- Select2 angular -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/select2Angular/select.js}"></script>
<!-- Waiting modal -->
<script
th:src="#{/static/assets/plugins/waiting-modal/waiting-modal.js}"
type="text/javascript"></script>
<script type="text/javascript"
th:src="#{/static/assets/js/fleetAndCar.js}"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="myApp">
<input type="hidden" id="role"
th:value="${#authentication.getAuthorities()}">
<div class="wrapper" data-ng-controller="createFleetController"
id="createFleetControllerId">
<!-- Header nd menu fragment -->
<div th:replace="../fragments/dashboard-header :: dashboard-header"></div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Fleets Management</h1>
<ol class="breadcrumb">
<li><a th:href="#{/}"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Fleets management</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Fleets</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Fleets table -->
<table id="fleetsTable"
class="table table-bordered table-striped">
<thead>
<tr>
<th>Application</th>
<th>Cubic</th>
<th>Power</th>
<th>Euro class</th>
<th>Engine Type</th>
<th>Traction</th>
<th>Transmission</th>
<th>Managed by</th>
<th>Cars</th>
<th>Add User</th>
<th>Delete</th>
</tr>
</thead>
</table>
<!-- Create two equals button because when I am on desktop I show the text add fleet otherwise the + and the tooltip.
This is need because otherwise the text goes out the button -->
<button id="addFleetButton" type="button"
class="btn btn-primary visible-lg col-lg-1 col-lg-offset-11"
data-toggle="modal" data-target="#addFleetModal">Add
fleet</button>
<button id="addFleetButton" type="button"
class="btn btn-primary hidden-lg col-xs-1 col-xs-offset-11"
data-toggle="modal" data-target="#addFleetModal">
<span class="glyphicon glyphicon-plus" data-toggle="tooltip"
title="Add fleet"></span>
</button>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- Modal to add car -->
<div class="modal" id="addFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Fleet parameters</h4>
</div>
<div class="modal-body">
<!-- form start -->
<form novalidate class="simple-form" name="newFleetForm">
<div class="box-body">
<div class="form-group">
<label>Application</label> <input
data-ng-model="newFleet.application" id="application"
type="text" class="form-control" placeholder="Application"
name="application" required>
</div>
<div class="form-group">
<label>Cubic</label> <input id="cubic"
data-ng-model="newFleet.cubic" type="text"
class="form-control" placeholder="Cubic" required>
</div>
<div class="form-group">
<label>Power</label> <input data-ng-model="newFleet.power"
id="power" type="number" min="0" step="1" class="form-control"
placeholder="Power" required>
</div>
<div class="form-group">
<label>Euro class</label> <input
data-ng-model="newFleet.euroClass" id="euroClass" type="text"
class="form-control" placeholder="Euro Class" required>
</div>
<div class="form-group">
<label>Engine type</label> <input
data-ng-model="newFleet.engineType" id="engineType"
type="text" class="form-control" placeholder="Engine type"
required>
</div>
<div class="form-group">
<label>Traction</label> <input
data-ng-model="newFleet.traction" id="traction" type="text"
class="form-control" placeholder="Traction" required>
</div>
<div class="form-group">
<label>Transmission</label> <input
data-ng-model="newFleet.transmission" id="transmission"
type="text" class="form-control" placeholder="Transmission"
required>
</div>
<div class="form-group">
<label>Note </label>(optional)
<textarea data-ng-model="newFleet.note" class="form-control"
rows="3" maxlength="1000"></textarea>
</div>
<div class="form-group" id=existingEcu>
<label>Ecu</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newFleet.ecu" required> <ui-select-match
placeholder="Select ecu">
{{$select.selected.note}}</ui-select-match> <ui-select-choices
repeat="ecu.idEcu as ecu in (ecuList | filter: $select.search) track by ecu.note">
<span data-ng-bind="ecu.note"></span> </ui-select-choices> </ui-select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Close</button>
<button data-ng-disabled="newFleetForm.$invalid"
data-ng-click="createFleet(newFleet)" id="createFleetButton"
type="button" class="btn btn-primary">Create fleet</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal delete Fleet -->
<div class="modal" id="deleteFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Delete fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">Are you sure? The fleet will be
deleted permanently, you won't be able to recover it.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-danger btn-ok"
data-ng-click="deleteFleet()" id="deleteFleetButton">Delete</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal delete User from Fleet -->
<div class="modal" id="deleteUserFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Delete user from fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">
Are you sure to remove <label data-ng-bind="user"></label>
management from fleet <label data-ng-bind="fleetApplication"></label>?
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-danger btn-ok"
data-ng-click="deleteUserFleet(user,fleetId)"
id="deleteUserFleetButton">Delete</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal add User from Fleet -->
<div class="modal" id="addUserFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Add user to fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div class="form-group" id=fleetUser>
<label>Select user</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="username" required> <ui-select-match>
{{$select.selected}}</ui-select-match> <ui-select-choices
repeat="username in (fleetUserList | filter: $select.search) track by username">
<span data-ng-bind="username"></span> </ui-select-choices> </ui-select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-primary btn-ok"
data-ng-click="addUserFleet(username)" id="addUserFleetButton">Add</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
I am building a SPA with AngularJS, everything is working as I hoped except that I am running into issues regarding its appearance on mobile (I am using twitter bootstrap 3). The two issues in particular are:
Vertical scrolling on mobile is very jerky and sometimes gets stuck
On some pages the users mobile screen automatically zooms in on an input field, which is fine. However, I want to undo this zoom when they change partial; because otherwise when the user gets to the next partial everything is too zoomed.
I have had a look around and can't see an answer to these. I haven't put code in here, as it pretty much effects the whole site :) However, for a demonstration of the issue you can see on the site itself: www.objectivemoney.co.za.
Any help would be much appreciated!
UPDATE TO INCLUDE CODE
Index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="omApp">
<head>
<title>OM</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Find your perfect planner | Quickly search for and compare verified, customer reviewed planners in your area with OM">
<meta name="keywords" content="search,financial,planner,compare,verified,planners">
<!-- load bootstrap and fontawesome via CDN -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css" />
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='toaster/toaster.css' rel='stylesheet' type='text/css'>
<!-- load CSS files locally -->
<link rel="stylesheet" href="style-min.css" />
<link rel="stylesheet" href="angular-slider-master/slider.css" />
<link rel="stylesheet" href="animate.min.css" />
<!-- sharethis -->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXXXXXXX", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-X', { 'cookieDomain': 'none' });
</script>
</head>
<body>
<!-- create a navbar that is collapsable in a mobile view -->
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="searchController">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<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="#/"> <img id="navbarlogo" src="./img/logo/logo-white.png"></a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Search</li>
<li>Resources</li>
<li>Planner Registration</li>
</ul>
</ul>
<!-- create a logout sign that shows when a user is logged in, position this on the right of the navbar -->
<ul ng-show="authenticated === true" class="nav navbar-nav pull-right logoutlink ng-cloak">
<ul class="nav navbar-nav navbar-right">
<li><a ng-controller="searchController" ng-click="logout(); changeAuth()">Logout</a></li>
</ul>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Create container for app views -->
<div class="wrapper">
<!-- set empty div for views, autoscroll means that page scrolls to top when user clicks through -->
<div ng-view autoscroll="true"></div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<div>
<div id="footershare" class="col-sm-6">
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_email_large' displayText='Email'></span>
</div>
<div id="footercontact" class="col-sm-6">
<p>Contact: xxx#xxx.co.za | Copyright ©</p>
</div>
</div>
</footer>
</div>
<div class="ng-cloak" ng-controller="searchController">
<div ng-show="showBar" class="signupBox">
<p id ="signupBox-text"><span ng-click="setCloseBar();setShowBar()" class="signupBox-close pull-right"><b>×</b></span><a id ="signupBox-text" href="#/mailinglist" ng-click="setCloseBar();setShowBar()">Join Our Mailing List To Stay Up To Date With The Latest Planning Advise And News.</a></p>
</div>
</div>
<!-- load angular and additional precompiled services -->
<script src="//code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.4.1/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-messages.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-resource.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="vs-google-autocomplete.min.js"></script>
<script src="angulartics.min.js"></script>
<script src="angulartics-ga.min.js"></script>
<script src="toaster/toaster.js"></script>
<script src="ui-bootstrap-0.13.0.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="angular-slider-master/slider.js"></script>
<script src="bower_components/ng-optimizely/ng-optimizely.js"></script>
<!-- load angular app -->
<script src="modules/omApp.js"></script>
<!-- load custom services -->
<script src="services/services.min.js"></script>
<script src="services/data.min.js"></script>
<!-- load angular controllers -->
<script src="controllers/minified/searchController.js"></script>
<script src="controllers/minified/resourcesController.js"></script>
<script src="controllers/minified/plannerRegController.js"></script>
<!-- directives -->
<script src="directives/directive.min.js"></script>
</body>
<!-- toaster-container that shows when a user log ins and log out [CURRENTLY THE TOASTER SHOWS FOR TOO LONG AND TIME OUT FUNCTION DOES NOT CHANGE TOASTER DISPLAY TIME] -->
<toaster-container toaster-options="{'time-out': 2000}"></toaster-container>
</html>
Home Partial
<div class="jumbotron">
<div class="container">
<div class="homepage-jumbo-info col-sm-offset-7 col-sm-5">
<div class="homepage-jumbo-info-header">
<h1>We'll help you find a <br><b> planner</b>, hassle-free</h1>
</div>
<div class="homepage-jumbo-info-box">
<h2 class="homepage-jumbo-info-boxheader"><b>Compare verified planners</b> in your area</h2>
<input vs-google-autocomplete="options"
ng-model="searchquery.address.name"
vs-street-number="searchquery.address.streetNumber"
vs-street="searchquery.address.street"
vs-city="searchquery.address.city"
vs-state="searchquery.address.state"
vs-country-short="searchquery.address.countryCode"
vs-country="searchquery.address.country"
vs-latitude="searchquery.lat"
vs-longitude="searchquery.long"
type="text"
name="address"
id="address"
class="form-control homepage-jumbo-info-boxinput"
placeholder="In which city / suburb do you live?">
</div>
<div class="form-group homepage-searchbutton homepage-jumbo-info-boxbutton">
<p id="homepage-searchbutton-text">SEARCH NOW <i class="fa fa-search"></i></p>
</div>
</div>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>Find The Right Planner With 3 Simple Steps</b></h2>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/search.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SEARCH</b></h3>
<p class="homepage-body-icons-text">Search for independently verified planners in your local area that can meet your requirements.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/compare.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>COMPARE</b></h3>
<p class="homepage-body-icons-text">Compare planners based on their offerings, qualifications and actual customer reviews.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/schedule.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SCHEDULE</b></h3>
<p class="homepage-body-icons-text">Click to automatically schedule a meeting with your chosen planner at a time that suits you.</p>
</div>
</div>
<div class="row homepage-body-carousel-header">
<div class="col-sm-12 homepage-body-header">
<h2><b>Our Planners Partner With The Biggest Companies In South Africa</b></h2>
</div>
</div>
<div class="row homepage-body-carousel">
<carousel interval="myInterval" disable-animation="true">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="img/sitephotos/{{slide.image}}.png" alt="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
<div class="container-fluid homepage-body-video">
<p class="homepage-body-video-text">Watch our short video to see how it works in more detail</p>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/-rsr45s2mws" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>How OM Helps You</b></h2>
</div>
<div class="row">
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/independent.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>INDEPENDENT</b></h3>
<p class="homepage-body-icons-text">All of our advisers have been independently verified, helping you to avoid any sharks.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/user-review.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>USER REVIEWED</b></h3>
<p class="homepage-body-icons-text">All of our advisers are reviewed by genuine users, helping you make sure that the adviser is the right match for you.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/tailored.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>TAILORED</b></h3>
<p class="homepage-body-icons-text">Search functionality lets you specify your ideal adviser.</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/quick.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>QUICK</b></h3>
<p class="homepage-body-icons-text">No need for lengthy internet research, enquiry calls or getting hold of friends and family to help you.</p>
</div>
<div class="col-sm-offset-right-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/free-2.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>FREE</b></h3>
<p class="homepage-body-icons-text">Our service is entirely free of charge.</p>
</div>
</div>
</div>
Jack