How to get rid of white border around svg plot area?

[former_member1000722]

Hello forum.

I am working on a svg extension and started from a VizPacker export.

I would like to have my svg visualization area to fill the whole space, but there is a thick white border around that.

I checked the code in Chrome Developer Tools and I can see that there is a

transform="translate(24,24)" in <g class="v-m-main"> and a

transform="translate(24,24)" in <g class="v-m-plot">

which is probably responsibly for that behaviour.

How can i adjust this? (And extending the width and height for the visualization area accordingly)

Thank you very much for your help, De Selby

[Former Member · Accepted solution]

Hi,

To make sure your container is use full 100% width and height add

.v-m-main, .v-m-plot {

    width: 100%!important;

    height: 100%!important;

    left: 0!important;

    top: 0!important;

}

to default.css

The div class which represent your viz for eg. <div class="sap_viz_ext_sample"> which is the main div, add the css

width: 100%;

height: 100%; and check.

Thanks,

PradeepKumar

[former_member1000722 · Accepted solution]

Hi PradeepKumar,

thank you very much for the fast response.

But i am still not able achieve a borderless representation.

I am using the sap.viz.ext.helloworld example straight from the VizPacker.

I tried both: the Use-DIV-Container checkbox and without.

When i use the Use-DIV-Container checkbox, i am able to have the upper left corner without margins,

but the margins right and bottom remains (and are bigger now)

the render.js is using:

container.selectAll("svg").remove();

var vis = container.append("svg")

  .attr("class", "containersvg")

  .attr("width", width)

  .attr("height", height)         

.append("g")

  .attr("class", "vis")

  .attr("width", width)

  .attr("height", height);

<svg class="containersvg" ...> is using complete width and height now,

but my problem is the <g class="vis" ...>, which i can not get to use complete width and height.

my default.css

----------------------------

.v-m-main, .v-m-plot {

    width: 100%!important;

    height: 100%!important;

    left: 0!important;

    top: 0!important;

}

.containersvg, .vis{

  width: 100%!important;

  height: 100%!important;

}

Do you have any ideas?

Thanks a lot, De Selby

[Former Member · Accepted solution]

Hi,

Add this line in render.js and check,

$(".vis").css('height',this.height());

$(".vis").css('width',this.width());

Thanks,

PradeepKumar

[former_member1000722 · Accepted solution]

Hi PradeepKumar,

I added the code,

but I am sorry to say, this is still not working for me.

Thanks for your help, De Selby

[Former Member · Accepted solution]

Hi,

Can you manually try by using chrome devloper option. Go to Elements tab in debugger, Using search icon,

focus on the div class check that css. Now manually inject the height and width and check weather its changing.

Thanks,

PradeepKumar

[former_member1000722 · Accepted solution]

Ok, your injecting css got me on the right track,

but I am still searching for a proper place to edit the 24px margin size to 0px.

Maybe this is hardcoded deep in Lumira and not accessible.

Here is my hack, not sure if i will use it:

render.js fragment

--------------------------------

var render = function(data, container) {

var width = this.width(),

    height = this.height(),

    colorPalette = this.colorPalette(),

    properties = this.properties(),

    dispatch = this.dispatch();

// hack to get rid of the translate(24,24) and the margins...

$(".v-m-main").css('transform',"translate(0,0)");

$(".v-m-plot").css('transform',"translate(0,0)");

width = this.width()+4*24;

height = this.height()+4*24;

//prepare canvas with width and height of container

container.selectAll("svg").remove();

var vis = container.append("svg")

                        .attr("width", width)

                        .attr("height", height)

                    .append("g")

                        .attr("class", "vis")

                        .attr("width", width)

                        .attr("height", height);

[Former Member · Accepted solution]

Hi,

Add

.v-m-main, .v-m-plot {

    left: 0!important;

    top: 0!important;

}

These 2 things influence the margin.

[former_member1000722 · Accepted solution]

i already did that.

you still have to adjust width and height to get the whole space filled.

[Former Member · Accepted solution]

Make sure your CSS in dom look like this for v-m-plot