Reputation: 794
I have a div on the page and a button that shows a layer. On that layer I have buttons to add a border and increase the padding, from the content of the div, to the border.
When that user then clicks 'save', the layer is hidden again and the original div on the main page is updated with the new border details.
I use ajax to send the details to the db and then to recall them again on the main page as a refresh.
The problem I have is, when the original div grabs the details of the changes from the db and updates the original div, if there is any increase in padding, the bottom and left borders dissapear.
Now I am not sure if this is related to the width of the original div being less that the width plus the padding, or is there is another issue.
I have tried to set the width to match the div with padding and border by using jquery outerWidth, but the left and bottom still do not show up.
If I refresh the page, they are there.
This is the function for updating original div after:
function UpdateElementOfParentBorder(box_id, page_ref, template_ref, image_box) {
var myBox = "image"+box_id;
$.getJSON("get_border_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref } )
.done(function(data)
{
$('#'+myBox).css('padding',data.e+'px');
$('#'+myBox).css('border-width', data.a+'px');
$('#'+myBox).css('border-color',data.b);
$('#'+myBox).css('border-style',data.d);
var outerwid=$('#'+myBox).outerWidth(false);
$('#'+myBox).width(outerwid);
});
}
Upvotes: 0
Views: 1601
Reputation: 794
managed to sort this out. I was incresasing the size of the image and so it no longer fit into the contrains of the outer div and so overlapped the bottom and left borders. I fixed it but changing the width and height of the outer div and just having the image width and height set to 100%
Upvotes: 2