I am doing a section for my web where the content I generate dynamically in an administrative panel that I have created previously. The content is inserted (text, images, titles and links) and can be draggable using draggable jquery-ui so I can locate each element where I want and put together the design of the section.
When I finish assembling the whole design, I send the resulting code to the database. Each element is saved with its css rules, among them the top, left, right and bottom) and then this code is extracted from the database and it's shown on my page. All this is done well, the problem is the positions of the elements when I show them on my page. No element is in the position in which I have previously placed it in the administration panel, if not quite the contrary, they are totally misplaced, and there are elements that are located one above the other, which is not good.
How could I make each item appear in the top, right, left, bottom position that I had when I was designing them in the admin panel? Because the idea is to show the final result of the design in a section of my website.
Here I leave the HTML code of the administration panel where I am adding the elements and positioning them:
<?php
include_once "../app/SessionControl.php";
if (SessionControl::session_started())
{
include_once "headerblog.php";
include_once "sidebar.php";
?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Section</h1>
</div><!-- /.col -->
<br><br><br>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#"><button style="float: right;" class="btn btn-primary" id="SaveContent">Preview</button></a></li>
</ol>
</div><!-- /.col -->
<div class="col-sm-12">
<h4 style="display: block;">Add Elements to workSpace</h4>
<button class="btn btn-default" id="btnAddTitle"><i class="fa fa-plus" style="display: inline-block;"></i> Title</button>
<button class="btn btn-default" id="btnAddSubtitle"><i class="fa fa-plus" style="display: inline-block;"></i> Subtitle</button>
<button class="btn btn-default" id="btnAddText"><i class="fa fa-plus" style="display: inline-block;"></i> Text Box</button>
<button class="btn btn-default" id="btnAddImg"><i class="fa fa-plus" style="display: inline-block;"></i> Image</button>
<button class="btn btn-default" id="btnAddLink"><i class="fa fa-plus" style="display: inline-block;"></i> Link</button>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<input type="hidden" id="title_cont" value="0">
<input type="hidden" id="subtitle_cont" value="0">
<input type="hidden" id="text_cont" value="0">
<input type="hidden" id="image_cont" value="0">
<input type="hidden" id="links_cont" value="0">
<div class="row">
<div class="col-lg-12 col-12">
<div class="card" id="BlogEditorOptions">
<div class="card-header">
<h3 class="card-title">Viewer</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<!--Start of the content blog -->
<div class="row" id="main_row_blog_results" style="display: inline-block;">
<!--
AQUI VA EL CONTENIDO GENERADO DINAMICAMETE
-->
</div> <!--End of the content blog -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- ./col -->
</div>
<!-- /.row -->
<!-- modal title -->
<div class="modal" tabindex="-1" role="dialog" id="title_modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Title Properties</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<input type="hidden" id="title_box_id">
<div class="col-md-4">
<label for="font-size-title" class="btn" style="display: inline-block;"><b>Size: </b>
</label>
<input type="number" id="font-size-title" min="14" max="100" value="34" class="form-control" style="display: inline-block;">
</div>
<div class="col-md-2">
<input type="checkbox" id="font-weight-title" checked>
<label for="font-weight-title" class="btn"><b>Bold</b>
</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="font-style-title">
<label for="font-style-title" class="btn"><i>Italic</i></label>
</div>
<div class="col-md-4">
<!-- Color Picker -->
<div class="form-group">
<div class="input-group" id="color-title-box">
<input type="color" id="color-title" value="#000002">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-square"></i></span>
</div>
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
</div>
<div class="col-md-12">
<input type="text" name="title_name" id="title_name" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- subtitle -->
<div class="modal" tabindex="-1" role="dialog" id="subtitle_modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subtitle Properties</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<input type="hidden" id="subtitle_box_id">
<div class="col-md-2">
<input type="number" id="font-size-subtitle" min="14" max="100" value="24" class="form-control">
</div>
<div class="col-md-2">
<input type="checkbox" id="font-weight-subtitle" checked>
<label for="font-weight-subtitle" class="btn"><b>Bold</b>
</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="font-style-subtitle" value="NO">
<label for="font-style-subtitle" class="btn"><i>Italic</i></label>
</div>
<div class="col-md-4">
<!-- Color Picker -->
<div class="form-group">
<div class="input-group my-colorpicker2" id="color-subtitle-box">
<input type="color" id="color-subtitle" value="#000002">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-square"></i></span>
</div>
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
</div>
<div class="col-md-12">
<input type="text" name="subtitle_name" id="subtitle_name" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- paragraph -->
<div class="modal" tabindex="-1" role="dialog" id="prg_modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Texts Properties</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" id="text_box_id">
<div class="col-md-2">
<input type="number" id="font-size-text" min="14" max="100" value="14" class="form-control">
</div>
<div class="col-md-2">
<input type="checkbox" id="font-weight-text" checked>
<label for="font-weight-text" class="btn"><b>Bold</b>
</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="font-style-text" value="NO">
<label for="font-style-text" class="btn"><i>Italic</i></label>
</div>
<div class="col-md-4">
<!-- Color Picker -->
<div class="form-group">
<div class="input-group my-colorpicker2" id="color-text-box">
<input type="color" id="color-text" value="#000002">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-square"></i></span>
</div>
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
</div>
<div class="col-md-12">
<textarea class="form-control" id="text_content" id="text_content"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- image -->
<div class="modal" tabindex="-1" role="dialog" id="image_modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Image Properties</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- here-->
<input type="hidden" id="img_box_id">
<div class="col-4">
Width: <input type="number" id="width-img" min="20" max="2000" value="200" class="form-control">
</div>
<div class="col-4">
Height: <input type="number" id="height-img" min="20" max="200" value="200" class="form-control">
</div>
<div class="col-md-12">
Upload Image: <input type="file" name="img_new" id="img_new" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- image -->
<div class="modal" tabindex="-1" role="dialog" id="link_modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Link Properties</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- here-->
<input type="hidden" id="link_box_id">
<div class="col-md-2">
<input type="number" id="font-size-link" min="14" max="100" value="16" class="form-control">
</div>
<div class="col-md-2">
<input type="checkbox" id="font-weight-link" checked>
<label for="font-weight-link" class="btn"><b>Bold</b>
</label>
</div>
<div class="col-md-2">
<input type="checkbox" id="font-style-link">
<label for="font-style-link" class="btn"><i>Italic</i></label>
</div>
<div class="col-md-4">
<!-- Color Picker -->
<div class="form-group">
<div class="input-group my-colorpicker2" id="color-link-box">
<input type="color" id="color-link" value="#000002">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-square"></i></span>
</div>
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
</div>
<div class="col-md-12">
Title <input type="text" name="link_name" id="link_name" class="form-control">
</div>
<div class="col-md-12">
URL <input type="text" id="url-link" class="form-control" name="url-link" value="#">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<?php include_once "footerblog.php";
}
else
{
header("Location: ../index.php");
}
?>
Small part of the Javascript code used to insert elements (the code is the same to insert each element):
$(document).ready(function(){
$("#btnAddText").click(function() {
var index = $("#text_cont").val();
var index2 = parseInt(index) + 1;
var id = "prg-"+index2;
var content = '<div class="textClass draggable" id="'+id+'"><div class="editable-div"><p class="p-normal" contenteditable="true">This is a Dummy Text '+ index2 +'</p></div></div>';
$("#main_row_blog_results").append(content);
$("#text_cont").val(index2);
$("#text_box_id").val(id);
$("#prg_modal").modal('show');
var text_con = $("#" + id + " .p-normal").text();
var content_text = $("#text_content").val(text_con);
$('.draggable').draggable();
});
$('.draggable').draggable();
});
HTML CODE of the section of the page where the result is displayed:
<div id="container blog-sec" style="padding-top: 80px; padding-bottom: 80px;">
<div class="row"><!--AQUI SE INSERTA EL CODIGO RESULTANTE DEL DISEÑO-->
<?php echo $BlogInfo[0][1]; ?>
</div>
</div> <!-- Blog section -->
All other sections of the website have the same structure
Is there any way to get each item displayed in the position assigned to it in the administration panel ...? Something like that position always remains with respect to the main div (in this case, the div with class = row)? Both the web page and the administration panel are made with bootstrap and php7. Dynamically generated div elements have relative position. css code of each element within the div:
.h1-normal
{
font-size: 34px;
text-align: center;
font-weight: bold;
}
.h3-normal
{
font-size: 24px;
font-weight: 400;
font-style: initial;
}
.p-normal
{
font-size: 14px;
font-weight: 400;
font-style: initial;
}
.img-normal
{
max-width: 150px;
width: 150px;
height: 150px;
max-height: 150px;
}
.a-normal
{
font-size: 16px;
color: #000000;
font-weight: normal;
font-style: initial;
}