Why does image has that padding? - image
I'm trying out to squeeze the columns into two while the page is xs size. I did the necessary logic, and also tried to implement the same with an using img. However while using an image, I'm unable to force the image to take the full size of the block. I've tried all necessary css editing and stuff, maybe I'm missing something please help.
Take help of the jsfiddle link to understand it better. I've included the css in fiddle file
Js Link!
<html>
<style>
</style>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid ">
<div class="navbar-header ">
<button type="button" class="navbar-toggle pull-left " data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<form class="navbar-form pull-left my-searchmain" role="search">
<div class="input-group ">
<input type="text" class="form-control " placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse " id="myNavbar">
<ul class="nav navbar-nav navbar-right col-lg-12 col-md-12 col-sm-12">
<li class="active col-lg-1 col-xs-6 col-md-1 col-sm-1"><img id="imgnew" src="http://www.affordable-templates123.com/wp-content/uploads/2015/05/fancy-label-templates-nh8tgtgq.jpg" ></li>
<li class="dropdown col-lg-1 col-xs-6 col-md-1 col-sm-1">
<a class="dropdown-toggle " data-toggle="dropdown" href="#">Page 2 </a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 3</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 4</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 5</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 6</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 7</li>
<li class=" col-lg-1 col-xs-6 col-md-1 col-sm-1">Page 8</li>
<li class="col-xs-push-1">
<form class="navbar-form my-search " role="search">
<div class="input-group ">
<input type="text" class="form-control " placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Afsan Abdulali Gujarati, I think for what I understand here, you want the xs view menu text to all stay on the right in one vertical line.
To stop the text wrapping around below the image. The image being responsive is full width of the col-xs-6. But it looks like you are trying or meaning to have the image the same height of the text links on the right.
Hopefully the way it lines up now is ok.
Have a look at this Fiddle.
All I did here was to add padding-bottom:200px; to the litht holds the image.
See if this does what you want.
.keepclear{
padding-bottom:200px;
}
Added
To remove any padding around a image in a navbar add this to your custom css to override Bootstrap css classes.
.navbar-nav > li > a {
padding-top: 0;
padding-bottom: 0;
padding-left:0;
padding-right:0;
}
Related
In Laravel how can I make a side bar when pressed goes to the page content link but still is the current page
I want to have the same mechanism like this https://www.w3schools.com/html/default.asp but in laravel application
This is my code on routes/web.php
Route::get('tutorial', function(){
$tutorial = Tutorial::get();
return view('tutorial.index')->with('tutorial', $tutorial);
})->name('index-tutorial');
// Show one Tutorial by Id
Route::get('tutorial/{id}', function($id){
$tutorial = Tutorial::findOrFail($id);
return view('tutorial.show')->with('tutorial', $tutorial);
})->name('show-tutorial');
for my Blade template
tutorial/show.blade.php
<div class="container">
#foreach($tutorial as $tutorial)
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3" role="group">
<form class="mx-3" action="{{route('delete-tutorial', $tutorial->id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('edit-tutorial', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
#endforeach
</div>
tutorial/index.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-
auto text-white text-decoration- none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($tutorial as $link)
<li class="nav-item">
<a href="{{route('show-tutorial', $link->id)}}" class="nav-
link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
I been researching a lot about having this mechanism
This one is different from other questions because i don't use controllers for this
Have you tried using example tamplates from Bootstrap?
Check here https://getbootstrap.com/docs/5.3/examples/
it's quite easy actually, you just need to copy the html code from bootstrap tamplate and tweak here and there. use
#include to add your desired components, #yield for your desired content page. and use #extends and #section inside your content pages.
roughly like this.
your main blade view
<!doctype html>
<html lang="en">
<head>
</head>
<body>
#include('partials.adminNav')
<div class="row">
#include('partials.adminSideBar')
</div>
<div class="container">
#yield('container')
</div>
</body>
#include('partials.footer')
</html>
for your side bar you just need to put links for your desired page
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
//Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="file" class="align-text-bottom"></span>
//links name
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="edit" class="align-text-bottom"></span>
//Links name
</a>
</li>
</ul>
</div>
</nav>
in like this in your content pages
#extends('layouts.adminMain')
#section('container')
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="py-4">
// your content here
</div>
</main>
#endsection
make use of the #include and #yield build in function. this way you'll have a consistent navbar/sidebar but can changes the content within.
Hope this works for you :)
Instead of using route closures, I manage to convert them to a TutorialController
Route::resource('tutorial', TutorialController::class);
for the aside bar routes/web
view()->composer('layout.sidebar', function($view){
$tutorial = Tutorial::all();
$view->with('links', $tutorial);
});
layout/sidebar.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto
text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($links as $link)
<li class="nav-item">
<a href="{{ route('tutorial.show', $link->id)}}" class="nav-link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
</main>
in my index.blade and show.blade you can add #include('layout.sidebar')
#extends('layout.app')
#section('title', "Show Tutorials")
#section('content')
#include('layout.sidebar')
<div class="container">
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3"
role="group">
<form class="mx-3" action="{{route('tutorial.destroy', $tutorial-
>id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('tutorial.edit', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
</div>
#endsection
Bootstrap dropdown-toggle
The dropdown is not showing, I won’t mind any assistance on what I’m doing wrong. <div class=“boxOptions”> <div data-toggle=“dropdown” arial-haspopup=“true” arial-expanded=“false”> <i class=“fas fa-ellipsis-v”></i> </div> <div class=“dropdown-menu”> <a class=“dropdown-item” href=“#”>Activate</a> <a class=“dropdown-item” href=“#”>Delete</a> </div> </div>
Make it like this. <div class="boxOptions dropdown"> <div data-toggle="dropdown"> <i class='fas fa-ellipsis-v'></i> </div> <div class='dropdown-menu'> <a class='dropdown-item' href='#'>Activate</a> <a class='dropdown-item' href='#'>Delete</a> </div> </div> Try this one
How to extend views with shared Layout in Laravel?
I have a collection of views that i want them to share a specific layout.
I created the layout master.blade.php ,in a folder i named it layouts.
From the docs , i found that i need to add the tag #extends and section('content') in my view so it fits under the layout :
#extends('layouts.master')
#section('content')
<div style="background-color:white;width:963px;height:100%">
<div style="padding-top:100px;padding-bottom:200px">
<h2 style="color:sandybrown; text-align:center"><b style="padding-right:40px">Contactez nous</b></h2>
<br />
<hr width="50%" color="gris" />
<div class="row">
<div class="col-md-6" style="padding:5%">
<form method="post" asp-controller="Home" asp-action="RegisterContact" style="padding-left:20px">
<label><span style="color:blue">Nom et prenom</span></label>
<br />
<input size=" 40" style="border-color:darkorange" asp-for="Name"/>
<br />
<label><span style="color:blue">E-mail</span></label>
<br />
<input size=" 40" asp-for="Email" style="border-color:darkorange" />
<br />
<label><span style="color:blue">Message</span></label>
<br />
<textarea rows="10" cols="40" style="border-color:darkorange" asp-for="Message"></textarea>
<br />
<button style="background-color:blue;"><span style="color:white">ENVOYER</span></button>
....
#endsection
but when i click in the link in the view's link in the navbar , this is what i get ?:
so is there a missing part in the logic ?
Update:
the view and the layout are both under the same folder :
C:\xampp\htdocs\laravel\resources\views\layouts
the view's name wasn't ending with .blade.php , but doing so now i get an exception :
InvalidArgumentException in FileViewFinder.php line 137: View [layouts.WhoWeAre] not found.
this is the body code of the layout :
</div>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav ml-auto">
<li class="nav-item navbar1 ">
<a class="nav-link" href="{{action('HomeController#WhoWeAre')}}"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" ><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
<div>
<img src="images/decoupage/nawrass-logo.png " class="rounded-circle bg-light">
</div>
<div class="navbar-collapse collapse w-50 ">
<ul class="navbar-nav mr-auto">
<li class="nav-item navbar2">
<a class="nav-link" >
<span style="text-decoration: underline;"><B>Contactez-nous</B></span>
</a>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/location.png" style="padding-top: 7px">
<span style="padding-top: 15px">Djerba Houmet Souk</span>
</li>
<li class="nav-item navbar2">
<div class="row">
<div class="col-md-3" style="padding-top: 7px">
<img src="images/decoupage/phone.png">
</div>
<div class="col-md-8" style="font-size: 16px;">
<span>75 620 660 </span>
<br>
<span>98 816 962</span>
</div>
</div>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/fb.png" style="padding-top: 7px">
</li>
</ul>
</div>
</nav>
<div class="container " style="min-height:100%; padding-left:120px;flex:1;display:flex;flex-direction:column;">
<div style="flex:1;display:flex;flex-direction:column;">
#yield('content')
</div>
</div>
<div id="footer">
<div class="jumbotron " style="margin-top:0 ; background-color:blue">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class="card mb-3 " style="background-color: blue">
<div class="row no-gutters">
<div class="col-md-3 ">
<img src="images/decoupage/logo-white.png" class="card-img" alt="my card image">
</div>
<div class="col-md-9 ">
<div class="card-body ">
<p class=" card-text text-white " style="font-size: 14.45px">
Bienvenu a centre de formation ennawres: formation en coiffure hommes et dames Langues {francais, anglais...} ,photographie..et plusieurs d'autres..
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 ">
<br/>
<img src="images/decoupage/phone.png">
<span class="text-white">
75620660-98815952
</span>
<br>
<br>
<img src="images/decoupage/location.png">
<span class="text-white">
Houmet Souk Djerba,1Km Ajim
</span>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-4 text-white">
PROPULSE PAR MOSAIQUE WEB COPYRIGHT 2019
</div>
</div>
</div>
</div>
</div>
For information the click in the navbar "Qui sommes nous" link trigger this controller method:
public function WhoWeAre()
{
return view('layouts/WhoWeAre');
}
and this is routes.php :
Route::get('/', function () {
return view('welcome');
});
Route::get('/whoweare', 'HomeController#WhoWeAre');
algolia facets automatically hiding products
I am new to algolia, vue and laravel. I am trying to build an e-commerce where I have used facets for filtering down data. The problem here is, whenever I check a specific filter, a certain product hides when I hover over the item before. I don't know what is creating the problem. Please help me.
This is my store.blade.php
#extends('layouts.search')
#section('content')
#include('layouts.app')
#stop
#section('scripts')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{asset('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/bootstrap-hover-dropdown.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/owl.carousel.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/echo.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/wow.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/jquery.easing.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/jquery.waypoints.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/electro.js')}}"></script>
#endsection
This is my app.blade.php
<div id="app">
<ais-index
app-id="Q5IYJ43XF9"
api-key="eb9bda691044aed1d217db64608643dc"
index-name="phones"
:query-parameters="{
numericFilters:['sold != 1']
}"
>
<div class="top-bar">
<div class="container">
<nav>
<ul id="menu-top-bar-left" class="nav nav-inline pull-left animate-dropdown flip">
<li class="menu-item animate-dropdown"><a title="Welcome to Worldwide Electronics Store" href="#">Welcome to Worldwide Electronics Store</a></li>
</ul>
</nav>
<nav>
<ul id="menu-top-bar-right" class="nav nav-inline pull-right animate-dropdown flip">
<li class="menu-item animate-dropdown"><a title="Store Locator" href="#"><i class="ec ec-map-pointer"></i>Store Locator</a></li>
<li class="menu-item animate-dropdown"><a title="Track Your Order" href="track-your-order.html"><i class="ec ec-transport"></i>Track Your Order</a></li>
#if (!Auth::guest())
<li class="menu-item animate-dropdown"><a title="My Account" href="{{ route('account') }}"><i class="ec ec-user"></i>My Account</a></li>
<li class="menu-item animate-dropdown"><a title="Sign Out" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style=" font-size: 15px; color:rgb(214, 38, 38)">
<i class="fa fa-power-off"></i> <b>Sign Out</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form></li>
#endif
</ul>
</nav>
</div>
</div><!-- /.top-bar -->
<header id="masthead" class="site-header header-v2">
<div class="container">
<div class="row">
<!-- ============================================================= Header Logo ============================================================= -->
<div class="header-logo">
<a href="home.html" class="header-logo-link">
<svg version="1.1" x="0px" y="0px" width="175.748px"
height="42.52px" viewBox="0 0 175.748 42.52" enable-background="new 0 0 175.748 42.52">
<ellipse class="ellipse-bg" fill-rule="evenodd" clip-rule="evenodd" fill="#FDD700" cx="170.05" cy="36.341" rx="5.32" ry="5.367"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#333E48" d="M30.514,0.71c-0.034,0.003-0.066,0.008-0.056,0.056
C30.263,0.995,29.876,1.181,29.79,1.5c-0.148,0.548,0,1.568,0,2.427v36.459c0.265,0.221,0.506,0.465,0.725,0.734h6.187
c0.2-0.25,0.423-0.477,0.669-0.678V1.387C37.124,1.185,36.9,0.959,36.701,0.71H30.514z M117.517,12.731
c-0.232-0.189-0.439-0.64-0.781-0.734c-0.754-0.209-2.039,0-3.121,0h-3.176V4.435c-0.232-0.189-0.439-0.639-0.781-0.733
c-0.719-0.2-1.969,0-3.01,0h-3.01c-0.238,0.273-0.625,0.431-0.725,0.847c-0.203,0.852,0,2.399,0,3.725
c0,1.393,0.045,2.748-0.055,3.725h-6.41c-0.184,0.237-0.629,0.434-0.725,0.791c-0.178,0.654,0,1.813,0,2.765v2.766
c0.232,0.188,0.439,0.64,0.779,0.733c0.777,0.216,2.109,0,3.234,0c1.154,0,2.291-0.045,3.176,0.057v21.277
c0.232,0.189,0.439,0.639,0.781,0.734c0.719,0.199,1.969,0,3.01,0h3.01c1.008-0.451,0.725-1.889,0.725-3.443
c-0.002-6.164-0.047-12.867,0.055-18.625h6.299c0.182-0.236,0.627-0.434,0.725-0.79c0.176-0.653,0-1.813,0-2.765V12.731z
M135.851,18.262c0.201-0.746,0-2.029,0-3.104v-3.104c-0.287-0.245-0.434-0.637-0.781-0.733c-0.824-0.229-1.992-0.044-2.898,0
c-2.158,0.104-4.506,0.675-5.74,1.411c-0.146-0.362-0.451-0.853-0.893-0.96c-0.693-0.169-1.859,0-2.842,0h-2.842
c-0.258,0.319-0.625,0.42-0.725,0.79c-0.223,0.82,0,2.338,0,3.443c0,8.109-0.002,16.635,0,24.381
c0.232,0.189,0.439,0.639,0.779,0.734c0.707,0.195,1.93,0,2.955,0h3.01c0.918-0.463,0.725-1.352,0.725-2.822V36.21
c-0.002-3.902-0.242-9.117,0-12.473c0.297-4.142,3.836-4.877,8.527-4.686C135.312,18.816,135.757,18.606,135.851,18.262z
M14.796,11.376c-5.472,0.262-9.443,3.178-11.76,7.056c-2.435,4.075-2.789,10.62-0.501,15.126c2.043,4.023,5.91,7.115,10.701,7.9
c6.051,0.992,10.992-1.219,14.324-3.838c-0.687-1.1-1.419-2.664-2.118-3.951c-0.398-0.734-0.652-1.486-1.616-1.467
c-1.942,0.787-4.272,2.262-7.134,2.145c-3.791-0.154-6.659-1.842-7.524-4.91h19.452c0.146-2.793,0.22-5.338-0.279-7.563
C26.961,15.728,22.503,11.008,14.796,11.376z M9,23.284c0.921-2.508,3.033-4.514,6.298-4.627c3.083-0.107,4.994,1.976,5.685,4.627
C17.119,23.38,12.865,23.38,9,23.284z M52.418,11.376c-5.551,0.266-9.395,3.142-11.76,7.056
c-2.476,4.097-2.829,10.493-0.557,15.069c1.997,4.021,5.895,7.156,10.646,7.957c6.068,1.023,11-1.227,14.379-3.781
c-0.479-0.896-0.875-1.742-1.393-2.709c-0.312-0.582-1.024-2.234-1.561-2.539c-0.912-0.52-1.428,0.135-2.23,0.508
c-0.564,0.262-1.223,0.523-1.672,0.676c-4.768,1.621-10.372,0.268-11.537-4.176h19.451c0.668-5.443-0.419-9.953-2.73-13.037
C61.197,13.388,57.774,11.12,52.418,11.376z M46.622,23.343c0.708-2.553,3.161-4.578,6.242-4.686
c3.08-0.107,5.08,1.953,5.686,4.686H46.622z M160.371,15.497c-2.455-2.453-6.143-4.291-10.869-4.064
c-2.268,0.109-4.297,0.65-6.02,1.524c-1.719,0.873-3.092,1.957-4.234,3.217c-2.287,2.519-4.164,6.004-3.902,11.007
c0.248,4.736,1.979,7.813,4.627,10.326c2.568,2.439,6.148,4.254,10.867,4.064c4.457-0.18,7.889-2.115,10.199-4.684
c2.469-2.746,4.012-5.971,3.959-11.063C164.949,21.134,162.732,17.854,160.371,15.497z M149.558,33.952
c-3.246-0.221-5.701-2.615-6.41-5.418c-0.174-0.689-0.26-1.25-0.4-2.166c-0.035-0.234,0.072-0.523-0.045-0.77
c0.682-3.698,2.912-6.257,6.799-6.547c2.543-0.189,4.258,0.735,5.52,1.863c1.322,1.182,2.303,2.715,2.451,4.967
C157.789,30.669,154.185,34.267,149.558,33.952z M88.812,29.55c-1.232,2.363-2.9,4.307-6.13,4.402
c-4.729,0.141-8.038-3.16-8.025-7.563c0.004-1.412,0.324-2.65,0.947-3.726c1.197-2.061,3.507-3.688,6.633-3.612
c3.222,0.079,4.966,1.708,6.632,3.668c1.328-1.059,2.529-1.948,3.9-2.99c0.416-0.315,1.076-0.688,1.227-1.072
c0.404-1.031-0.365-1.502-0.891-2.088c-2.543-2.835-6.66-5.377-11.704-5.137c-6.02,0.288-10.218,3.697-12.484,7.846
c-1.293,2.365-1.951,5.158-1.729,8.408c0.209,3.053,1.191,5.496,2.619,7.508c2.842,4.004,7.385,6.973,13.656,6.377
c5.976-0.568,9.574-3.936,11.816-8.354c-0.141-0.271-0.221-0.604-0.336-0.902C92.929,31.364,90.843,30.485,88.812,29.55z"/>
</svg>
</a>
</div>
<!-- ============================================================= Header Logo : End============================================================= -->
<div class="primary-nav animate-dropdown">
<div class="clearfix">
<button class="navbar-toggler hidden-sm-up pull-right flip" type="button" data-toggle="collapse" data-target="#default-header">
☰
</button>
</div>
<div class="collapse navbar-toggleable-xs" id="default-header">
<nav>
<ul id="menu-main-menu" class="nav nav-inline yamm">
<li class="menu-item menu-item-has-children animate-dropdown dropdown"><a title="Home" href="shop.html" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Home</a>
</li>
<li class="menu-item animate-dropdown"><a title="About Us" href="about.html">About Us</a></li>
<li class="menu-item menu-item-has-children animate-dropdown dropdown"><a title="Blog" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Blog</a>
</li>
<li class="yamm-fw menu-item menu-item-has-children animate-dropdown dropdown">
<a title="Pages" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Pages</a>
</li>
<li class="menu-item"><a title="Features" href="#">Features</a></li>
<li class="menu-item"><a title="Contact Us" href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
<div class="header-support-info" style="
margin-top: 1%;
">
<div class="media">
<span class="media-left support-icon media-middle" style="margin-right:0px;"></span>
<div class="media-body">
#if (Auth::guest())
<div class="top-right links">
<b>Login</b>
<b>Register</b>
</div>
#else
<a href="#" class="nav-link" data-toggle="dropdown" role="button" aria-expanded="false" style="font-size: 16px; color:#a3d133">
<b>{{ucwords(Auth::user()->name) }} </b>
</a>
#endif
</div>
</div>
</div>
</div>
</div><!-- /.row -->
</header><!-- #masthead -->
<nav class="navbar navbar-primary navbar-full">
<div class="container">
<ul class="nav navbar-nav departments-menu animate-dropdown">
<li class="nav-item dropdown ">
<a class="nav-link" href="#" >Shop by Department</a>
</li>
</ul>
<div class="navbar-search">
<div class="input-group">
<ais-search-box>
<ais-input
placeholder="Search product by name or reference..."
:class-names="{
'ais-input': 'form-control navbar-search search-field',
}"
></ais-input>
</ais-search-box>
<div class="input-group-addon search-categories">
<select name='product_cat' id='product_cat' class='postform resizeselect' >
<option value='0' selected='selected'>All Categories</option>
<option class="level-0" value="laptops-laptops-computers">Laptops</option>
<option class="level-0" value="ultrabooks-laptops-computers">Ultrabooks</option>
<option class="level-0" value="mac-computers-laptops">Mac Computers</option>
<option class="level-0" value="all-in-one-laptops-computers">All in One</option>
<option class="level-0" value="servers">Servers</option>
<option class="level-0" value="peripherals">Peripherals</option>
<option class="level-0" value="gaming-laptops-computers">Gaming</option>
<option class="level-0" value="accessories-laptops-computers">Accessories</option>
<option class="level-0" value="audio-speakers">Audio Speakers</option>
<option class="level-0" value="headphones">Headphones</option>
<option class="level-0" value="computer-cases">Computer Cases</option>
<option class="level-0" value="printers">Printers</option>
<option class="level-0" value="cameras">Cameras</option>
<option class="level-0" value="smartphones">Smartphones</option>
<option class="level-0" value="game-consoles">Game Consoles</option>
<option class="level-0" value="power-banks">Power Banks</option>
<option class="level-0" value="smartwatches">Smartwatches</option>
<option class="level-0" value="chargers">Chargers</option>
<option class="level-0" value="cases">Cases</option>
<option class="level-0" value="headphone-accessories">Headphone Accessories</option>
<option class="level-0" value="headphone-cases">Headphone Cases</option>
<option class="level-0" value="tablets">Tablets</option>
<option class="level-0" value="tvs">TVs</option>
<option class="level-0" value="wearables">Wearables</option>
<option class="level-0" value="pendrives">Pendrives</option>
</select>
</div>
<div class="input-group-btn">
<button class="btn btn-secondary" type="submit">
<i class="ec ec-search"></i>
</button>
</div>
</div>
</div>
<ul class="navbar-mini-cart navbar-nav animate-dropdown nav pull-right flip">
<li class="nav-item dropdown">
<a href="cart.html" class="nav-link" data-toggle="dropdown">
<i class="ec ec-shopping-bag"></i>
<span class="cart-items-count count">4</span>
<span class="cart-items-total-price total-price"><span class="amount">$1,215.00</span></span>
</a>
<ul class="dropdown-menu dropdown-menu-mini-cart">
<li>
<div class="widget_shopping_cart_content">
<ul class="cart_list product_list_widget ">
<li class="mini_cart_item">
<a title="Remove this item" class="remove" href="#">×</a>
<a href="single-product.html">
<img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart1.jpg" alt="">White lumia 9001
</a>
<span class="quantity">2 × <span class="amount">£150.00</span></span>
</li>
<li class="mini_cart_item">
<a title="Remove this item" class="remove" href="#">×</a>
<a href="single-product.html">
<img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart2.jpg" alt="">PlayStation 4
</a>
<span class="quantity">1 × <span class="amount">£399.99</span></span>
</li>
<li class="mini_cart_item">
<a data-product_sku="" data-product_id="34" title="Remove this item" class="remove" href="#">×</a>
<a href="single-product.html">
<img class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" src="assets/images/products/mini-cart3.jpg" alt="">POV Action Cam HDR-AS100V
</a>
<span class="quantity">1 × <span class="amount">£269.99</span></span>
</li>
</ul><!-- end product list -->
<p class="total"><strong>Subtotal:</strong> <span class="amount">£969.98</span></p>
<p class="buttons">
<a class="button wc-forward" href="cart.html">View Cart</a>
<a class="button checkout wc-forward" href="checkout.html">Checkout</a>
</p>
</div>
</li>
</ul>
</li>
</ul>
<ul class="navbar-wishlist nav navbar-nav pull-right flip">
<li class="nav-item">
<i class="ec ec-favorites"></i>
</li>
</ul>
<ul class="navbar-compare nav navbar-nav pull-right flip">
<li class="nav-item">
<i class="ec ec-compare"></i>
</li>
</ul>
</div>
</nav>
<div id="content" class="site-content" tabindex="-1">
<div class="container">
<nav class="woocommerce-breadcrumb" >Home<span class="delimiter"><i class="fa fa-angle-right"></i></span>Smart Phones & Tablets</nav>
<div id="updateDiv">
<div id="primary" class="content-area">
<main id="main" class="site-main">
<header class="page-header">
<h1 class="page-title">Smart Phones & Tablets</h1>
<p class="woocommerce-result-count"> <ais-stats></ais-stats></p>
</header>
<div class="shop-control-bar">
<ul class="shop-view-switcher nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" title="Grid View" href="#grid"><i class="fa fa-th"></i></a></li>
<li class="nav-item"><a class="nav-link " data-toggle="tab" title="List View Small" href="#list-view-small"><i class="fa fa-th-list"></i></a></li>
</ul>
<form class="woocommerce-ordering" method="get" action="{{route('store.sort')}}">
<select name="orderby" class="orderby" action="/store/sort">
<option value="menu_order" >Default sorting</option>
<option value="price" >Sort by price: low to high</option>
<option value="price-desc" >Sort by price: high to low</option>
</select>
</form>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="grid" aria-expanded="true">
<ul class="products columns-3">
<ais-results>
<template scope="{ result }">
<li class="product col-md-4">
<div class="product-outer">
<div class="product-inner highlight">
<span class="loop-product-categories">Smartphones</span>
<a :href='result.url'>
<h3><ais-highlight :class-names="{'ais-highlight': 'highlight'}" :result="result" attribute-name="company"></ais-highlight> <ais-highlight :result="result" attribute-name="model"></ais-highlight> - #{{ result.storage }} GB</h3>
<div class="product-thumbnail">
<img :src="result.photo" alt="" style="height:200px">
</div>
</a>
<div class="price-add-to-cart">
<span class="price">
<span class="electro-price">
<ins><span class="amount">₹ #{{ result.price }}</span></ins>
</span>
</span>
<a rel="nofollow" href="single-product.html" class="button add_to_cart_button">Add to cart</a>
</div><!-- /.price-add-to-cart -->
<div class="hover-area">
<div class="action-buttons">
<a href="#" rel="nofollow" class="add_to_wishlist">
Premium Quality Phone</a>
</div>
</div>
</div><!-- /.product-inner -->
</div><!-- /.product-outer -->
</li>
</template>
</ais-results>
<ais-no-results></ais-no-results>
</ul>
</div>
</div>
<div class="shop-control-bar-bottom">
<p class="woocommerce-result-count"> <ais-stats></ais-stats></p>
<nav class="woocommerce-pagination">
{{ $phones->links('pagination.default') }}
</nav>
</div>
</main><!-- #main -->
</div><!-- #primary -->
</div>
#include('layouts.sidebar')
</div><!-- .container -->
</div><!-- #content -->
</ais-index>
> </div>
> </div>
> </div><!-- .container -->
>
> <script src="{{ asset('js/app.js') }}"></script>
This is my sidebar.blade.php
<div id="sidebar" class="sidebar" role="complementary">
<aside class="widget widget_electro_products_filter">
<h3 class="widget-title">Filters</h3>
<aside class="widget woocommerce">
<h3 class="widget-title">Brands</h3>
<ul>
<div class="companies" id="company">
<ais-refinement-list attribute-name="company" :class-names="{
'ais-refinement-list__count': 'badge',
'ais-refinement-list__item': 'checkbox'
}">
</ais-refinement-list>
</div>
</ul>
</aside>
<aside class="widget woocommerce">
<h3 class="widget-title">Storage</h3>
<ul>
<div class="storages">
<ais-refinement-list attribute-name="storage" :class-names="{
'ais-refinement-list__count': 'badge',
'ais-refinement-list__item': 'checkbox'
}">
</ais-refinement-list>
</div>
</ul>
</aside>
</aside>
<aside class="widget widget_text">
<div class="textwidget">
<a href="#">
<img src="assets/images/banner/ad-banner-sidebar.jpg" alt="Banner"></a>
</div>
</aside>
</div>
And finally app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('Search', require('./components/Search.vue'));
const app = new Vue({
el: '#app'
});
const app2 = new Vue({
el: '#appli'
});
const app3 = new Vue({
el: '#applic'
});
I believe it's an issue with your CSS style. Because when you hover, it adds borders and shadows, it might change the height and you run into an issue with overflow, or something similar. To debug, I'd advise you to lock the hover on the product (with your browser dev tools) and inspect where is the element after. I believe it's still in the DOM.
What is the best way to render navigation with the Phoenix Framework?
I'd like to include a navigation bar in the app.html.ex template. Something like: <nav class="navbar navbar-inverse navbar-fixed-top"> <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="#">My app</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active">Home</li> <li>Help</li> <li>Contact Us</li> </ul> </div> </div> </nav> Is there a way to render the ul so it can attach class="active" according to the current controller?
I haven't seen a method to render an navigation yet. Alternatively you can write some helper methods. To set class="active" I add some methods to the layout_view.ex. def is_example_path(conn) do controller_module(conn) == MyApp.ExampleController end So you can Add something like this to your template. <ul> <li class="something <%= if is_example_path(#conn), do: " active" %>">Example</li> </ul> Hope this helps.