CODEWITHSUNDEEP
csssvg
letsCode
letsCode

Reputation: 3046

SVG width 100% not going full width

I have the follow SVG code:

       <div className="behaviorPatternsItem" key={item.id}>
          <div className="behaviorPatternsItemStyled">
            <svg height="25" width="100%" preserveAspectRatio="none">
              <g>
                <rect x="0" y="0" width={item.amount} height="25" fill="red"></rect>
                <text x="25" y="17" font-size="12" fill="black"></text>
              </g>
            </svg>
          </div>
        </div>

which is doing the following..

enter image description here

As you can see, the bottom red bar is not at 100% (like item.amount is). The top bar is 10%, middle ones are 90%.

This is what its surrounded by as well as container and row for bootstrap.

.scrollableDiv {
  overflow-y: scroll; height:400px;
  min-width: 100%;
}
.behaviorPatternsItem{
  border-bottom: 1px solid #cdcdcd;
  font-size:12px;
  font-weight: bold;
  min-width: 100% !important;
}

.behaviorPatternsItemStyled{
  padding: 0;
  margin: 0;
  min-width: 100% !important;
}

what am i missing? or any tips?

Upvotes: 1

Views: 2136

Answers (1)

Dylan Anlezark
Dylan Anlezark

Reputation: 1267

The issue is what your injecting into item.amount on the following line: <rect x="0" y="0" width={item.amount} height="25" fill="red"></rect>is being read by the complier as a pixel value instead of a percentage.

My solution in action: https://jsfiddle.net/k1cbjvj7/14/

Upvotes: 3

Related Questions