I'm trying to avoid the sidenav to refresh each time I choose a category and only change the content section of the page. Can anyone help? TIA
Here's what I have so far
<body>
#include('layouts.header')
<main>
<div class="container" style="background-color: white; height: 100%;">
<div class="row">
<div class="col-md-2" id="verticalNav">
#include('layouts.verticalNav')
</div>
<div class="col-md-8 text-center" id="content">
#yield('content')
</div>
<div class="col-md-2 text-center">
<h5>ADBANNERS!</h5>
</div>
</div>
</div>
</main>
#include('layouts.footer')
and here's my script
<script>
$("#verticalNav").click(function(event){
event.preventDefault();
$('#content').load($(this).attr('href'));
});
</script>
the problem here is when I put # sidenav wont even click
Related
In this code i am preparing a portfolio, now when i am placing an
image in my portfolio the image is not filling the border div and
going a side as you can see in the picture <IMAGE-first half> , <IMAGE-second half>. Can someone help me to keep four images that has borders only to the image and I need all four images placed like four boxes?
<section class="latestwork" id="work">
<div class="container">
<div class="row">
<div class="heading">
<h2 class="boxx">My Latest Work</h2>
<h6>These are my latest mobile photography captures</h6>
</div>
</div>
<div class="row">
<div class="myworkbuttons">
<button type="button" class="myworklink" data-filter="all">All</button>
<button type="button" class="myworklink" data-filter="creative">Creative</button>
<button type="button" class="myworklink" data-filter="black&white">Black/white</button>
<button type="button" class="myworklink" data-filter="portrait">Portraits</button>
</div>
</div>
<div class="row">
<div class="portfolio-items" data-category="urban-floods">
<div class="portfolio-inner-item" style="">
<div class="portfolio-img">
<img src="C:\portfolio's\drive-download-20210208T164603Z-001\The Disaster of 2020.jpg" alt="Image not loading">
</div>
</div>
<div class="portfolio-info">
<h4>Iso: </h4>
</div>
</div>
<div class="portfolio-items" data-category="buffalo">
<div class="portfolio-inner-item">
<div class="portfolio-img">
<img src="C:\portfolio's\drive-download-20210208T164603Z-001\buffalos path.jpg" style="float: left;" alt="Image not loading">
</div>
</div>
</div>
</div>
This is happening because the size of the image is not big enough.
Try adding width: 100% of the image component.
you can use grid and and use css importing file and try this code: .div{background-image: url("/assets/pics/picture.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; min-height:50vh; min-width:50vw }//(or what size do you need.);
I am building a simple static website. I am using Spring Boot, Thymeleaf Layout Dailect and Bootstrap 4. In my layout.html I have a row in which I have a content and a sidebar. I have 2 photos in my sidebar, in all of views they appear on the right side. However when I try to embed an iframe with a google map or with a facebook page the sidebar gets pushed down. I tried a few different things like changing the size of iframe to minimum etc. but I am unable to keep my sidebar on the right side. Please can anyone suggest a solution?
Below is my layout.html:
<body>
<div class="container-fluid" th:replace="fragments/navigation :: navigation"></div>
<div class="container-fluid" id="mainContent">
<div class="row">
<div class="col-md-8">
<div layout:fragment="content"></div>
</div>
<div class="col-md-4">
<div th:replace="fragments/sidebar :: sidebar"></div>
</div>
</div>
</div>
<div class="container-fluid" th:replace="fragments/footer :: footer"></div>
Below is my sidebar.html:
<body>
<div th:fragment="sidebar">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ai-ki-do.png" alt="Logo" style="width: 330px;"></img>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ueshiba-laughter.jpg" alt="Logo"
style="width: 330px;" ></img>
</div>
</div>
</div>
</div>
</body>
Below is my content:
<body>
<div layout:fragment="content">
<p>Thank you for your interest in Seishinkan. Please get in touch via our Facebook page. We look forward to hearing from you.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FSeishinkan-Aikido-Dojo-389984175129276%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" data-adapt-container-width="true"></iframe>
</div>
</body>
Normal sidebar's behaviour - a white picture 'Ai Ki Do' and a dark picture on the right side :
The sidebar pushed down after embedding the iframe:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<div class="row">
<iframe src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<div>
another one
</div>
</div>
For some reason when I remove the col classes from the divs and keep them in a row, the two pieces don't go below each other
Have you tried inspecting the element and editing your css classes in the browser while in developer mode?
I had the same problem before and all I did was mess around with the code in the console until it eventually moved the way I wanted it to.
Placing a new row and column within:
<div layout:fragment="content"></div>
worked for me.
<div layout:fragment="content">
<div class="row">
<div id="dojo-page" class="col-md-12">
<div id="fb-frame" class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="600" height="450"
frameborder="0" style="border: 0"
src="path-for-google-map-location"
allowfullscreen></iframe>
</div>
</div>
</div>
I'm trying to create a bootstrap modal in laravel to edit sa post, the problem is that when I click the button or anchor the modal doesn't appears and in some cases it appears but then quickly it disappears I don't know where is the problem I'm new to laravel and I think the problem is with the links ...
app2.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div style="color: white; padding-left: 50px; padding-top: 5px; font-size: 20px; background-color: grey; width: 100%; height: 50px; text-align: left;" >Brand</div>
<div class="container">
#yield('content')
</div>
<!--<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<!--<script type="text/javascript" src="{{asset('js/app.js')}}"></script>-->
<script type="text/javascript" src="{{asset('js/jquery-3.1.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.js')}}"></script>
<script type="text/javascript" src="{{asset('js/app_new.js')}}"></script>
</body>
</html>
dashboard.blade.php
#extends('layouts.app2')
#section('title')
dashboard
#endsection
#section('content')
<h1>Dashboard</h1><br>
<div class="row">
<div class="col-md-6 col-md-offset-6">
<div>
<form action="{{url('/post')}}" method="post">
{{csrf_field()}}
<div class="form-group">
<textarea class="form-control" name="body" id="" cols="50" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<!--<input type="hidden" value="{{Session::token()}}" name="_token">-->
</form>
</div>
</div>
</div><br><br>
#foreach($posts as $post)
<div class="row">
<div class="col-md-6 col-md-offset-6">
<h3>{{$post->body}}</h3>
<p>posted by {{$post->User->name}} on {{$post->created_at->diffForHumans()}}</p>
Edit | Delete | Like | Dislike
</div>
</div>
<br>
#endforeach
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endsection
app_new.js
$('#edit').click(function(){
$('#edit-modal').modal();
});
Use preventDefault() when you click on link.
$('#edit').click(function(e){
e.preventDefault();
$('#edit-modal').modal();
});
And add id='edit-modal' for your div with modal class.
try this
Edit
where #modalEdit is id of modal tag like
<div class="modal" tabindex="-1" role="dialog" id="#modalEdit">
This is one way to call a modal using jquery please try
$('#myModal').modal('show');
I have difficulties to add border to the last class="separator" from the last class="list-group".
I want to do this in SASS. Can someone please help me, because my solution doesn't work.
HTML
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator"></div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator"></div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator"></div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator"></div>
</div>
CSS
.list-group {
&:last-child .separator {
border-left: 1px solid black;
}
}
According to me there is no problem in your sass code. Just add some content into html and the browser will start showing border. Something like this
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator">item1</div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator">item2</div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator">item3</div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator">item4</div>
</div>
Output (for your reference):
can you spot the left border on item4?
This worked for me.
I know it's too late xd
.list-group {
.separator:last-child {
border-left: 1px solid black;
}
}
I cannot include the views inside Bootstrap's tab.
base.blade.php
#extends('layout.admin')
#section('content')
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active">Chat</li>
<li>Información</li>
<li>Envio mensajes</li>
<li>Capturar pantalla</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
#include('tab.funciones.chat')
</div>
<div id="menu1" class="tab-pane fade">
#include('tab.funciones.informacion')
</div>
<div id="menu2" class="tab-pane fade">
#include('tab.funciones.mensajes')
</div>
<div id="menu3" class="tab-pane fade">
#include('tab.funciones.pantalla')
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
#endsection
I have a directory called "tab" and inside I have this view and other directory with the views chat, informacion, mensajes and pantalla.
Thre route
Route::get('/fun', function(){
return view('tab.base');
});
Which is the problem?
Try this
Make sure you add libraries on admin
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
and jquery, bootstrap as well before html closing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
here is rest
#extends('layout.admin')
#section('content')
<div class="container">
<div class="col-md-6">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Chat</li>
<li> Información</li>
<li>Envio mensajes</li>
<li>Capturar pantalla</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
#include('tab.funciones.chat')
</div>
<div class="tab-pane fade" id="menu1">
#include('tab.funciones.informacion')
</div>
<div class="tab-pane fade" id="menu3">
#include('tab.funciones.mensajes')
</div>
<div class="tab-pane fade" id="menu4">
#include('tab.funciones.pantalla')
</div>
</div>
</div>
</div>
</div>
</div>
#stop