BS GridColumn & GridRow issue


#1

Hi Guys.
www.aceoftoons.com

On the ‘caratures’ form I have GridColun & GridRow that I populate from an Ajax call and clone them using the following code:


function getLifestyle() {
 iframesReturnedLifeStyles = Ajax("http://www.aceoftoons.com/xxx.php" , returnedlifeStyles);
        }
function returnedlifeStyles() {
     //alert('returnedlifeStyles');
     var i =0;
     var newID;
     var newImage;
     var newTitle;
     var newURL;
     if (iframesReturnedLifeStyles.status == 200) { //success
          //alert('data back '+ iframesReturnedLifeStyles.responseText);
          dataReturned = JSON.parse(iframesReturnedLifeStyles.responseText);
          var newArray = [];
          newArray = dataReturned['data'];
          
        for (var i = newArray.length - 1; i >= 0; --i) {
        newID =  'animID'+newArray[i]['anims']['id'];
        newDiv = $('#animID0')
        .clone(true,true)
        .attr('id', newID)   // <-- Note this line
        //.attr('class', 'testImage')
        .insertAfter("#gridRow1");
        newImage = newArray[i]['anims']['thumbnail']; 
        newTitle = newArray[i]['anims']['title'];
        newURL = newArray[i]['anims']['url'];
        $(newDiv).find("img").attr("src",newImage);
        $(newDiv).find(".cont1").html(newTitle);
        $(newDiv).find(".cont2").text(newURL);
            console.log(newArray[i]['anims']);
            console.log(newArray[i]['anims']['animID']);
            console.log(newArray[i]['anims']['thumbnail']);
        
      
}
        animID0.hidden = true;
}
}

I have set the gridColumn (animID0) class = testImage
I have set the margin to 1%

This results in the following:
Settings 1

If I use the inspector and set margin : 0px !important I get the following
Settings 2

I need it to look like settings 2 with a margin on the gridColumn. The margin setting screws the size-lg size-md settings as in Settings 1.

So I need:
on large screen 4 across with a 1 % margin
On med screen 3 across with a 1% margin
Small screen 2 across with a 1 % margin
Tiny screen 1 across with a 1 % margin

I’ve played around for a couple of hours but cannot get it to work.

Cheers

Steve Warby


#2

4 cups of coffee, a soak in the bath and a fresh head…

I added another container within the gridColumn and change the settings around. Now the GridColumn is full size and the ‘inner’ container has the shadow & margin set.

www.aceoftoons.com goto caricature page if needed.


Cheers

Steve Warby


#3

That’s exactly what I was going to suggest!

Glad it worked out.