In this Form content not stretch into full screen in the Mobile phone screen but in the computer and Tab screen its show properly. pls advice to solve.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row d-flex">
<div class="col-md-6 ftco-animate">
<div class="blog-entry align-self-stretch d-flex">
<div class="col-sm-12 col-md-12 col-lg-12 text p-4 d-block">
<h3 class="heading mt-3"><strong>Login to the Website.</strong></h3>
<form id="logging" name="logging" method="POST" action="<?php echo
$_SERVER['PHP_SELF']; ?>">
<div class="form-group">
<label> Email </label><span class="required text-danger"> *</span> <input type="email" id="email" name="email" class="form-control" placeholder="Your Email">
</div>
<div class="form-group">
<label> Password</label><span class="required text-danger"> *</span><input type="password" id="pw" name="pw" class="form-control" placeholder="Password">
</div>
<div><small class="text-primary"><span>Forget Password...</span> </small></div>
</br>
<div class="form-group">
<input type="submit" name="LogIn" id="LogIn" value="LogIn" class="btn btn-primary
py-3 px-5">
</div>
</form>
</div>
</div>
</div>
</div>
In .blog-entry .text class remove width property.
In your style.css file .blog-entry .text class is located at line no. 2764
.blog-entry .text {
position: relative;
border-top: 0;
border-radius: 2px;
/* width: 55%; */ --- /*remove this width */
}
Remove width on .blog-entry .text
.blog-entry .text {
position: relative;
border-top: 0;
border-radius: 2px;
width: 55%;/*Remove this Width*/
}
OR
Remove this class text
<div class="col-sm-12 col-md-12 text p-4 d-block">
to
<div class="col-sm-12 col-md-12 p-4 d-block">
Related
This is a form to create a new scorecard.. When I click on add new objective button. A new objective is added. My problem comes when I want to add new kpi in the second or other objectives apart from the firt one, the kpi is added in the first objective and also it adds the whole scorecard form instead of only one objective per click.This image shows how the kpi is added.
Here is my scorecard code
<form id="form" action='/scorecard'>
<div class="class" id="objectives_place">
<div class="row col-md-10 col-md-offset-1" >
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="name">Name</label>
<input id="scoreCardName" name="scoreCardName" value="{{ $scorecard['name'] }}" style="height: 40px;" type="text" class="form-control" placeholder="score card name" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="name">Employee</label>
<select name="employeeid" id="employeeid" class="form-control" style="height: 40px;">
<option value="">choose employee</option>
#foreach($employees as $employee)
<option value="{{$employee->id}}"
#if(($employee->id) == (isset($scorecard_info->employee_id)?$scorecard_info->employee_id:''))
selected
#endif>{{$employee->first_name}} {{$employee->middle_name}} {{$employee->lastname}}
</option>
#endforeach
</select>
<br>
{{-- <small>Select Employee for the Objective Button to appear</small> --}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="description">Description</label>
<textarea name="scorecard_description" class="form-control" id="description" style="resize: none;height: 40px;" placeholder="score card description">{{ $scorecard['description'] }}</textarea>
</div>
</div>
</div>
<div id="objectivesData" class="row ">
#include('organization::objectiveAdd')
</div>
</div>
</div>
<div class="row col-md-10 col-md-offset-1">
<div class="row col-md-12">
<button id="newobjectivebtn" type="button" style="width:200px; float: left; padding: 5px;background-color:#a3d84e; border: 1px solid #fff; color: #fff; display: none;">Add new Objective</button>
</div>
<div class="row col-md-12 text-center" ><br>
<div id="listobjective" style="max-height:400px;">
</div> <br>
<button type="button" id="savescorecard" style="width: 365px; padding: 5px;
background-color:#a3d84e; border: 1px solid #fff; color: #fff; display: none; float:right;">Save Scorecard</button>
</div>
</form>
This is jquery for adding new objective
$('#newobjectivebtn').click(function(){
var objectiveIndex = $(this).data("objective-index");
let form = $('form');
$.ajax({
headers:{
'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
},
type:'POST',
url:'{{route('add_scorecard_objectives')}}',
data:form.serialize(),
success:function(response){
var div = $('#objectivesData')
div.append(response);
},
error:function(response){
toastr.error('System Error , Contact Administrator!');
}
})
});
This is the jquery code for adding new kpi
$('#objectivesData').on('click','.newkpibtnn',function(){
let form = $('form');
var objectiveIndex = $(this).data("objective-index");
console.log(objectiveIndex);
$.ajax({
headers:{
'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
},
type: "POST",
url: "{{ route('add_objectives_kpis') }}",
data:form.serialize() + "&objectiveIndex=" + objectiveIndex,
success: function(response) {
var div = $('#kpis_row_data')
div.append(response);
},
error: function(error) {
console.log(error);
}
});
});
This is the objectiveAdd.blade.php file
#foreach ($scorecard['objectives'] as $objective)
<div class="row">
<div class="row col-md-12 " id="objectives_page">
<div class="container-fluid spark-screen">
<div class="row">
<div class="box box-green">
<div class="box-header with-border">
<h2 style="font-size: 22px;margin-bottom: -5px;margin-top: 0px; text-align:center;">Scorecard Objective</h2>
</div>
<div class="box-body" >
<div class="row col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-4">
<div class="form-group col-ms-12">
<label for="Objective">Name</label>
<input type="text" name="objectives[name]" value="{{ isset($objective['name'])?$objective['name']:'' }}" class="form-control" style="margin-bottom: 0px;" placeholder="objective name" />
<small id="error_objectivename" class="hidden" style="color: red;margin-left: 1%;font-size: 13px;height:40px;">Enter a Objective Name</small>
</div>
</div>
<div class="col-md-3">
<div class="form-group col-sm-12">
<label for="description">Weight</label>
<input class="form-control" maxlength="2" value="{{ isset($objective['weight'])?$objective['weight']:'' }}" type="number" name="objectives[weight]" placeholder="%" min="1" max="100" style="margin-bottom: 1px;">
<small id="error_objectiveweight" class="hidden" style="color: red;margin-left: 1%;font-size: 13px;height:40px;">Add Weight</small>
</div>
</div>
<div class="col-md-4">
<div class="form-group col-sm-12">
<label for="description">Description</label>
<textarea name="objectives[description]" class="form-control" id="objectivedescription" style="resize: none;height:40px;" placeholder="enter descriprion">{{ isset($objective['description'])?$objective['description']:'' }}</textarea>
</div>
</div>
<div class="col-md-1">
<span class="badge badge-pill delete-form" style="color: red !important; background: transparent !important; height:50px; padding-left: 50px; padding-top:40px; padding-right:60px;cursor: pointer;">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</span>
</div>
</div>
<div class="row" >
<div class="form-group col-md-11">
<table class="table table-bordered table-condensed" id="kpis_table" >
<thead>
<tr>
<th scope="col" class="width-25-per">KPI Name</th>
<th scope="col" class="width-25-per">Weight</th>
<th scope="col" class="width-20-per">Description</th>
<th scope="col" class="width-25-per">Expected Delivery</th>
<th scope="col" class="width-10-per">Goal</th>
<th scope="col" class="width-10-per"></th>
</tr>
</thead>
<tbody class="addKpis" id="kpis_row_data">
#include('organization::objectiveAddKpi')
</tbody>
</table>
</div>
</div>
</div>
<div class="row col-md-10 col-md-offset-1">
<div class="row col-md-12">
<button class="newkpibtnn" data-objective-index="{{ $index }}" type="button" style="width:200px; float: left; padding: 5px;background-color:#a3d84e; border: 1px solid #fff; color: #fff;">Add new KPI</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
My routes.php file
Route::post('/add_objective', 'OrganizationController#addScorecardObjective')->name('add_scorecard_objectives');
Route::post('/add_kpis', 'OrganizationController#addKpi')->name('add_objectives_kpis');
This is my controller
public function addScorecardObjective(Request $request)
{
$data = $request->all();
unset($data['expected_delivery_date']);
$data['objectives'] = array(['name'=>'','weight'=>'','description'=>'','kpis'=>[
['name'=>'','weight'=>'','description'=>'','expected_delivery_date'=>'','goal'=>'']
]]);
return view('organization::objectiveAdd')->with([
'scorecard'=>$data
]);
}
public function addKpi(Request $request)
{
$data = $request->all();
$objectiveIndex = $data['objectiveIndex'];
$data['objectives'] = array($data['objectives']);
$data['objectives'][$objectiveIndex]['kpis'] = array(['name'=>'','weight'=>'','description'=>'','expected_delivery_date'=>'','goal'=>'']);
return view('organization::objectiveAdd')->with([
'scorecard'=>$data
]);
}
I want to be able to add a number of kpis in a particular objective whenever I click on add new objective button on that particular objective.
I'm tried to remove or change panel-body background to transparent. but not work... please help me
i want to change white colour to the transparent, please see the image attached.
This is my code in bootstrap.css
.panel-body {
background: transparent;
}
This is my code in login page
</style>
<style type="text/css">
body
{
background-image: url("login.jpg");
}
</style>
</head>
<body>
<div class="col-md-4 col-md-offset-4" style="margin-top: 50px">
<br/>
<br/>
<div class="panel panel-default">
<div class="panel-body">
<br/>
<br/>
<form method="post" action="<?php echo base_url().'welcome/login'
?>">
<div class="form-group" >
<input type="text" name="username" placeholder="username"
class="form-control" >
<?php echo form_error('username'); ?>
</div>
<div class="form-group">
<input type="password" name="password"
placeholder="password" class="form-control" >
<?php echo form_error('password'); ?>
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-
primary">
</div>
</form>
<br/>
<br/>
</div>
</div>
</div>
</body>
my login image
my code
You must remove .panel background:
.panel{
background:transparent !important;
}
Or
.panel{
background:unset;
}
thanks for answers...
this is my final code
<div class="panel panel-primary" style="background-color: transparent; border: 2px
solid red;
border-radius: 4px;">
I am new to PHP and bootstrap. I am making a login form which was perfectly fine when I do not put <link rel="stylesheet" type="text/css" href="styles.css"> in my header.
But I can't just remove them from my header because I will need them at a later time because of some custom buttons, etc.
Take a look at this snippet below. As you can see, there is a white space when I already indicated the mt-5. Any idea what caused this and how to resolve this? Thanks in advance!
[![enter image description here][1]][1]
.index-banner {
background: linear-gradient(rgba(0, 0, 50, 0.5), rgba(0, 0, 40, 0.5)), url(images/1.jpg) no-repeat center center fixed;
background-size: cover;
}
.primary-container {
padding-top: 150px;
padding-left: 50px;
transition: all 4s ease-in-out;
line-height: 10px;
}
<?php require_once 'indexheader.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Leafnote | Register</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 m-auto">
<div class="card bg-white mt-5">
<div class="card-title text-black">
<h5 class="text-center py-2 font-weight-bold">Register</h5>
</div>
<div class="card-body">
<form action="process.php" method="POST">
<input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
<input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
<input type="text" name="email" placeholder="Email address" class="form-control mb-2">
<input type="text" name="passw" placeholder="Password" class="form-control mb-2">
<input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
<button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>
<div class="text-center mt-3" style="font-size: 14px;">Already have an account?
Login
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap Provide utilities classes which will be realy handy and reduce you extra css like adding padding or margin and many more..
where ever if you need to add or remove margin you can add class, same way you can work with padding
mb-0 , mb-10
You can get more info
Bootstrap Utilities
The whitespace is actually coming from a margin-bottom in your card-title class and padding from your card-body class which is defaultly available in bootstrap cards. Simply add this to your css file to overwrite the bootstrap css
.card-title {
margin-bottom: 0 !important;
}
.card-body {
padding-top: 0 !important;
}
Add this to your stylesheet i.e. style.css
.card-body{
padding: 0 24px;
}
.card-title{
margin:0
}
No need of extra css as there are Bootstrap4 classes to remove your extra padding and margin. You can use mb-0 to remove your margin-bottom. You can learn more about Spacing in Bootstrap 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 m-auto">
<div class="card bg-white mt-5">
<div class="card-title text-black mb-0">
<h5 class="text-center py-2 font-weight-bold mb-0">Register</h5>
</div>
<div class="card-body">
<form action="process.php" method="POST">
<input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
<input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
<input type="text" name="email" placeholder="Email address" class="form-control mb-2">
<input type="text" name="passw" placeholder="Password" class="form-control mb-2">
<input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
<button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>
<div class="text-center mt-3" style="font-size: 14px;">Already have an account?
Login
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<section id="owl-banner" class="owl-carousel owl-theme">
<div class="item">
<img src="img/banner/banner-2.jpg" alt="banner image 2">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Truhealing-</h5>
<p style="color:#ffffff; font-size:30px;font-family:Titillium Web;line-height:1.6;">Complete Health care <br>Solution for women</p>
</div>
</div>
<div class="item">
<img src="img/banner/banner-5.jpg" alt="banner image 4">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Your health is in <br>your hands</h5>
</div>
</div>
<div class="item">
<img src="img/banner/banner-3.jpg" alt="banner image 3">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Get your hormones <br>working for you</h5>
</div>
</div>
<div class="item">
<img src="img/banner/banner-4.jpg" alt="banner image 4">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Address <br>the root cause</h5>
</div>
</div>
<div class="col-md-6">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</section>
In my project their is requirment of adding form on carousel i have tried with all the solutions which i got but none worked for me . can any one guide me how to solve the issue ?
You can use position relative and absolute pattern like this.
Update: move form out of ow carousel div and set z-index for form.
#banner{
position: relative;
}
form{
position: absolute;
top:50px;
left:50px;
z-index:100;
}
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
#banner{
position: relative;
}
form{
position: absolute;
top:50px;
left:50px;
z-index:100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<div id="banner">
<section id="owl-banner" class="owl-carousel owl-theme">
<div class="item">
<img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 2">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Truhealing-</h5>
<p style="color:#ffffff; font-size:30px;font-family:Titillium Web;line-height:1.6;">Complete Health care <br>Solution for women</p>
</div>
</div>
<div class="item">
<img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 4">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Your health is in <br>your hands</h5>
</div>
</div>
<div class="item">
<img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 3">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Get your hormones <br>working for you</h5>
</div>
</div>
<div class="item">
<img src="https://blog.bannersnack.com/wp-content/uploads/2018/11/banner-Button-design-770x395.png" alt="banner image 4">
<div class="homebannercontent">
<h5 style="color:#ffffff;font-size:60px;font-family:Titillium Web;line-height:1.6;">Address <br>the root cause</h5>
</div>
</div>
</section>
<div class="col-md-6">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
I have 1 main form. I also have a sub form inside that main form.
I can't seem to prevent the main form to stop submitting since the button type submit will submit the main form automatically.
Form UI
When I click on delete the modal slide up with 2 options
When I click on DELETE, I only one to submit to delete image that's it.
edit.blade.php
#extends('layouts.be.master')
#section('content')
<script type="text/javascript" src="/js/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="http://d.biossusa.com/css/root/hover-master/hover.css">
<style type="text/css">
.portfolio-images {
border: solid 1px silver;
}
._hover{
padding: 0px;
position: relative;
overflow: hidden;
border: 1px solid #D8D8D8;
/*border-radius: 10px;*/
}
._hover:hover .caption{
opacity: 1;
transform: translateY(-150px);
-webkit-transform:translateY(-150px);
-moz-transform:translateY(-150px);
-ms-transform:translateY(-150px);
-o-transform:translateY(-150px);
}
._hover img{
z-index: 4;
}
._hover .caption{
position: absolute;
top:150px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
width: 100%;
}
._hover .blur{
background-color: rgba(0,0,0,0.8);
height: 300px;
z-index: 5;
position: absolute;
width: 100%;
}
._hover .caption-text{
z-index: 10;
color: #fff;
position: absolute;
height: 300px;
text-align: center;
top:-20px;
width: 100%;
}
</style>
<?php $tags = explode(",", $portfolio->tag ); ?>
<div class="card-body card-padding">
<div class="row">
{!! Form::open(array('class' => 'form-horizontal', 'role' =>'form', 'url'=>'portfolio/'. $portfolio->id .'/update','files' => true)) !!}
<div class="col-sm-12">
{{-- Name --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" value="{{ $portfolio->name }}" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
{{-- Type --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Type</label>
<div class="col-sm-10">
<select name="type" class="form-control">
#foreach($portfolioTypes as $item)
<option value="{{ $item }}">{{ $item }}</option>
#endforeach
</select>
</div>
</div>
{{-- Tags --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
</div>
<input id="tags" name="tag">
</div>
{{-- URL --}}
<div class="form-group">
<label for="url" class="col-sm-2 control-label">URL</label>
<div class="col-sm-10">
<input name="url" type="text" value="{{ $portfolio->url }}" class="form-control" placeholder="URL">
</div>
</div>
{{-- Images --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Images</label>
#foreach($images as $image)
<?php
$crop_img = str_replace('full.jpg','crop.jpg',$image->img_path);
?>
<div class="col-sm-2">
<div class="_hover " style="background: transparent;">
<p style="text-align:center;">
<img class="img-responsive" src="{{ $image->image_path }}" alt="">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6 class="title lighter" style="padding:5px;border-radius: 10px;">
{{ $image->id }}
</h6>
<p>
<span>
<a data-toggle="modal" data-target="#delete_image_{{ $image->id or '' }}">
delete
</a>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete_image_{{ $image->id }}">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-4 ">
{!! Form::model($image, array( 'url' => '/portfolio/image/'.$image->id.'/destroy','method' => 'DELETE')) !!}
<button type="submit" class="btn btn-danger btn-lg btn-block">Delete ({{ $image->id }})</button>
<a class="btn btn-primary btn-lg btn-block" data-dismiss="modal" > Cancel </a>
{!! Form::hidden('$id', $image->id)!!}
{!! Form::close()!!}
</div>
</div>
</div>
#endforeach
<br><br>
<input id="images" name="images[]" type="file" multiple>
</div>
{{-- Description --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea name="description" rows="20" cols="80" id="description">
{{ base64_decode($portfolio->description) }}
</textarea>
<script>
CKEDITOR.replace( 'description' );
</script>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<a class="btn btn-default" href="/portfolio"> Cancel </a>
<button type="submit" class="btn btn-info">Done</button>
</div>
</div>
</div>
{!!Form::close()!!}
</div>
</div>
#stop
#section('custom-scripts')
<link rel="stylesheet" type="text/css" href="/css/jquery.tag-editor.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript" src="/js/jquery.tag-editor.js"></script>
<script type="text/javascript">
$( "select[name*='type']" ).val("{{ $portfolio->type }}");
function readLogo(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#portfolio-icon').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$( "input[name*='logo_path']" ).change(function(){
readLogo(this);
});
$('#tags').tagEditor({
autocomplete: {
delay: 0,
position: { collision: 'flip' },
source: [<?php echo '"'.implode('","', $skillList).'"' ?>]
},
forceLowercase: false,
delimiter: ',', /* space and comma */
placeholder: 'Enter tags ...',
initialTags: [<?php echo '"'.implode('","', $tags).'"' ?>]
});
</script>
#stop
How would one go about debugging this further?
My goal is to stay with HTML, blade and Laravel as much as possible to solve this problem.
May be Use to someone
$('#formId').submit(function (event) {
event.preventDefault();
});
It is invalid html to have a form inside a form.
I'd try to place the modal outside the main form.
I would make hidden form outside of the original form and then send it with button that has form attribute. That "form" is valid html5 attribute.
<button type="submit" form="id_of_form_to_submit" value="Submit">Submit</button>
Here you can find more information:
https://www.w3schools.com/Tags/att_button_form.asp