Estoy haciendo una sección para mi web donde el contenido lo genero dinamicamente en un panel administrativo que he creado previamente. El contenido se va insertando(texto, imagenes, titulos y links) y puede ser draggable utilizando draggable de jquery-ui asi puedo ubicar cada elemento donde yo quiera y armar así el diseño de la sección.
Cuando termino de armar todo el diseño, envio el codigo resultante a base de datos Cada elemento se guarda con sus reglas css, entre ellas el top,left,right y bottom) y luego este código se extrae de la base de datos y se muestra en mi pagina. Todo esto se hace bien, el problema son las posiciones de los elementos cuando los muestro en mi pagina. Ningún elemento esta en la posición en la cual lo he colocado previamente en el panel de administración, si no todo lo contrario, estan totalmente desubicados, y hay elementos que estan ubicado uno encima de otro, lo cual no es nada bueno.
Cómo podría hacer para que cada elemento se muestre en la posición top, right, left, bottom que tenían cuando los estaba diseñando en el panel de administración.? Porque la idea es mostrar el resultado final del diseño en una sección de mi pagina web.
Aqui dejo el codigo HTML del panel de administración donde voy agregando los elementos y posicionandolos:
<?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");
}
?>
Pequeña parte del Codigo Javascript utilizado para insertar elementos(el codigo es igual para insertar cada elemento):
$(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();
});
CODIGO HTML de la seccion de la pagina donde se muestra el resultado:
<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 -->
Todas las demás secciones de la pagina web tienen la misma estructura
Existe alguna forma de lograr que cada elemento se muestre en la posición que se le fue asignada en el panel de administración...? Algo asi como que la posición siempre quede con respecto al div principal (en este caso, el div con class=row)? Tanto la pagina web como el panel de administración estan hechos con bootstrap y php7. Los elementos divs generados dinamicamente tienen position relative. codigo css de cada elemento dentro de los 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;
}
position:relative
, pero supongo que ya lo sabías. Por favor puedes editar tu pregunta y añadir un ejemplo básico, solo HTML sin PHP. Alternativamente, si tienes un enlace, podrías publicarlo?