## 9 replies

Last post Feb 17, 2017 01:48 AM by Jean Sun

• dlchase

Member

309 Points

1396 Posts

### Control Width % On A DIV Row

Our users have asked us to come up with a way to depict each salesperson's sales as a % of total sales for given time frames (day,week,month and year). We have 4 DIV's (one for each time frame) where we need to have the control (Label/Span) to be proportional to 100% across a row.  The left side of the row has pre-set information that we have allowed for 26% of the total width. That is why you see us multiply our percentage by 74 (100 - 26) in the code sample below.  We are actually looping through a database to get sales and lost sales counts for each person. To make it simpler I have just preset these counts to 13 and 5.  The example below is for weekly sales target of 45.  We are calculating the control width percent as (sales / target) * 74 and it seems to proportion the correct widths of each control.  However, the users want the 2 controls (sales and lost sales) to display as a % of combined sales + lost.  For example, since 13 + 5 = 18 and that is 40% of 45 then that control should be 40% of remaining width...and it does that.  However, since they want it to be a % of sales target only then I wasn't sure how to calculate the % so that both the sales and lost counts take up 13 / 45 proportionately so that the 2 controls width is split between sales and lost.  Hope I explained.  Below is what our code is for trying to calculation each control width as %.

```Dim dblPercent As Double = 0
Dim intSales As Int32 = 0
Dim intLost As Int32 = 0
Dim intWeekTarget As Int32 = 0
Dim strWidth As String = ""
Dim lblSoldWeek As New Label()
Dim lblLostWeek As New Label()

intWeekTarget = 45
intSales = 13
intLost = 5

lblSoldWeek.Text = intSales.ToString
lblSoldWeek.Style("display") = "block"
dblPercent = (intSales / intWeekTarget) * 74
strWidth = CStr(dblPercent) & "%"
lblSoldWeek.Style("width") = strWidth

lblLostWeek.Text = intLost.ToString
lblLostWeek.Style("display") = "block"
dblPercent = (intLost / intWeekTarget) * 74
strWidth = CStr(dblPercent) & "%"
lblLostWeek.Style("width") = strWidth

```

DavidInBD
• Jean Sun

Contributor

6450 Points

2525 Posts

### Re: Control Width % On A DIV Row

Feb 10, 2017 02:15 AM|Jean Sun|LINK

Hi dlchase,

What's the problem are you facing now?

Best Regards,

Jean

MSDN Community Support
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• dlchase

Member

309 Points

1396 Posts

### Re: Control Width % On A DIV Row

The target needs to be in proportion for both the sales and lost sales.

DavidInBD
• Jean Sun

Contributor

6450 Points

2525 Posts

### Re: Control Width % On A DIV Row

Feb 13, 2017 01:34 AM|Jean Sun|LINK

Hi dlchase,

It seems that the above code to calculate the percent is correct. Could you please share the code in the aspx file here?

Best Regards,

Jean

MSDN Community Support
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• dlchase

Member

309 Points

1396 Posts

### Re: Control Width % On A DIV Row

Below is the section of the aspx page that contains the various DIV's that are populated. I agree that I might be making correct calculations but wasn't sure so I want to have it verified by others.

```        <div style="font-size: x-small">
<div id="PanelLegend" runat="server" style="width: 100%; background-color: #FFFFFF; height: 12pt;">
<asp:Label ID="LblIns" runat="server" Text="Ins" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblCust" runat="server" Text="Cust" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblPcent" runat="server" Text="Target%" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblTarget" runat="server" Text="Target" CssClass="left" Width="3.5%"></asp:Label>
<asp:Label ID="LblTitle" runat="server" CssClass="left" Width="3.5%">&nbsp;</asp:Label>
<asp:Label ID="LblHeavy" runat="server" CssClass="left" Width="2.5%" Font-Bold="True">H</asp:Label>
<asp:Label ID="LblMedium" runat="server" CssClass="left" Width="2.5%" Font-Bold="True">M</asp:Label>
<asp:Label ID="LblSmall" runat="server" CssClass="left" Width="2.5%" Font-Bold="True">S</asp:Label>
<asp:Label ID="LblXSmall" runat="server" CssClass="left" Width="2.5%" Font-Bold="True">X&nbsp;</asp:Label>
</div>
<br style="line-height: 2px" />
<div id="PanelChartDay" runat="server" style="width: 100%; background-color: #E5E5E5; height: 12pt;">
<asp:Label ID="LblDayIns" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblDayCust" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblDayPcent" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblDayTarget" runat="server" CssClass="left" Width="3.5%"></asp:Label>
<asp:Label ID="LblDay" runat="server" Text="Day" CssClass="left" Width="3.5%"></asp:Label>
<asp:Label ID="LblDayH" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblDayM" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblDayS" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblDayX" runat="server" CssClass="left" Width="2.5%"></asp:Label>
</div>
<div id="PanelChartWeek" runat="server" style="width: 100%; background-color: #E5E5E5; height: 12pt;">
<asp:Label ID="LblWeekIns" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblWeekCust" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblWeekPcent" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblWeekTarget" runat="server" CssClass="left" Width="3.5%"></asp:Label>
<asp:Label ID="LblWeek" runat="server" Text="Week" CssClass="left" Width="3.5%"></asp:Label>
<asp:Label ID="LblWeekH" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblWeekM" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblWeekS" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblWeekX" runat="server" CssClass="left" Width="2.5%"></asp:Label>
</div>
<div id="PanelChartMonth" runat="server" style="width: 100%; background-color: #E5E5E5; height: 12pt;">
<asp:Label ID="LblMonthIns" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblMonthCust" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblMonthPcent" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblMonthTarget" runat="server" CssClass="left" Width="3.5%"></asp:Label>
<asp:Label ID="LblMonth" runat="server" Text="Month" CssClass="left" Width="3.5%"></asp:Label>
<asp:Label ID="LblMonthH" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblMonthM" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblMonthS" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblMonthX" runat="server" CssClass="left" Width="2.5%"></asp:Label>
</div>
<div id="PanelChartYear" runat="server" style="width: 100%; background-color: #E5E5E5; height: 12pt;">
<asp:Label ID="LblYearIns" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblYearCust" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblYearPcent" runat="server" CssClass="left" Width="3%"></asp:Label>
<asp:Label ID="LblYearTarget" runat="server" CssClass="left" Width="3.5%"></asp:Label>
<asp:Label ID="LblYear" runat="server" Text="Year" CssClass="left" Width="3.5%"></asp:Label>
<asp:Label ID="LblYearH" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblYearM" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblYearS" runat="server" CssClass="left" Width="2.5%"></asp:Label>
<asp:Label ID="LblYearX" runat="server" CssClass="left" Width="2.5%"></asp:Label>
</div>
</div>
```

DavidInBD
• Jean Sun

Contributor

6450 Points

2525 Posts

### Re: Control Width % On A DIV Row

Feb 15, 2017 05:55 AM|Jean Sun|LINK

Hi dlchase,

You can use Web Developer Tool to debug your web page to check the width attribute's value.

I checked your code on my side and get the following code, the values are correct.

```<span style="display:block;width:21.3777777777778%;">13</span>
<span style="display:block;width:8.22222222222222%;">5</span>```

You can find how to use Web Developer Tool to debug web page in the following links.

Best Regards,

Jean

MSDN Community Support
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• dlchase

Member

309 Points

1396 Posts

### Re: Control Width % On A DIV Row

Yes, percentages appear to be correct for the widths.  However, when the sales target is exceeded the SPAN's are exceeding the visible width of the DIV. The DIV width is 100% and the total of the SPAN's come to 99.98% and the last SPAN is wrapping to the next line, even though the total width of the SPAN's is less than the 100%.  You can see by the output of the Web Developer Tool below.

```<div id="ctl00_PanelChartWeek" style="width: 100%; height: 11pt; background-color: rgb(229, 229, 229);">

<span class="left" id="ctl00_LblWeekIns" style="width: 3%; display: inline-block;">73 %</span>

<span class="left" id="ctl00_LblWeekCust" style="width: 3%; display: inline-block;">27 %</span>

<span class="left" id="ctl00_LblWeekPcent" style="width: 3%; display: inline-block;">100 %</span>

<span class="left" id="ctl00_LblWeekTarget" style="width: 3.5%; display: inline-block;">11</span>

<span class="left" id="ctl00_LblWeek" style="width: 3.5%; display: inline-block;">Week</span>

<span class="left" id="ctl00_LblWeekH" style="width: 2.5%; display: inline-block;">6</span>

<span class="left" id="ctl00_LblWeekM" style="width: 2.5%; display: inline-block;">2</span>

<span class="left" id="ctl00_LblWeekS" style="width: 2.5%; display: inline-block;">1</span>

<span class="left" id="ctl00_LblWeekX" style="width: 2.5%; display: inline-block;">2&nbsp;</span>

<span class="bggreen left" style="width: 19.47%; padding-right: 4px; border-right-color: black; border-right-width: 1px; border-right-style: solid; display: inline-block;">5</span>
<span class="lostsale left" style="width: 19.47%; padding-right: 4px; border-right-color: black; border-right-width: 1px; border-right-style: solid; display: inline-block;">5</span>
<span class="bgltblue left" style="width: 0%; display: inline-block;">0</span><span class="lostsale left" style="width: 0%; display: inline-block;"></span>
<span class="bgorange left" style="width: 19.47%; padding-right: 4px; border-right-color: black; border-right-width: 1px; border-right-style: solid; display: inline-block;">5</span>
<span class="lostsale left" style="width: 11.68%; padding-right: 4px; border-right-color: black; border-right-width: 1px; border-right-style: solid; display: inline-block;">3</span>
<span class="bgyellow left" style="width: 3.89%; padding-right: 4px; border-right-color: black; border-right-width: 1px; border-right-style: solid; display: inline-block;">1</span>
<span class="lostsale left" style="width: 0%; display: inline-block;"></span>
</div>
```

DavidInBD
• Jean Sun

Contributor

6450 Points

2525 Posts

### Re: Control Width % On A DIV Row

Feb 16, 2017 07:04 AM|Jean Sun|LINK

Hi dlchase,

#### dlchase

lblSoldWeek.Style("display") = "block"

lblLostWeek.Style("display") = "block"

Please change the display attribute from block to inline-block.

```lblSoldWeek.Style("display") = "inline-block"

lblLostWeek.Style("display") = "inline-block"```

Best Regards,

Jean

MSDN Community Support
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• dlchase

Member

309 Points

1396 Posts

### Re: Control Width % On A DIV Row

Did what you suggested but the DIV row still wraps to a 2nd line, even though the total width % is 98.98% when I add them up.

If I remove the right border and right padding on each it does not wrap.

DavidInBD
• Jean Sun

Contributor

6450 Points

2525 Posts

### Re: Control Width % On A DIV Row

Feb 17, 2017 01:48 AM|Jean Sun|LINK

Hi dlchase,

#### dlchase

The above code will add extra width to your element which will make the total width larger than 100%, so please remove it from your style.

And you need to add float:left; to your span's style. I test the following code on my side, it will display in one line.

```<style type="text/css">
#ctl00_PanelChartWeek span{
float:left;
}
</style>
<div id="ctl00_PanelChartWeek" style="width: 100%; height: 11pt; background-color: rgb(229, 229, 229);">

<span class="left" id="ctl00_LblWeekIns" style="width: 3%; display: inline-block;">73 %</span>

<span class="left" id="ctl00_LblWeekCust" style="width: 3%; display: inline-block;">27 %</span>

<span class="left" id="ctl00_LblWeekPcent" style="width: 3%; display: inline-block;">100 %</span>

<span class="left" id="ctl00_LblWeekTarget" style="width: 3.5%; display: inline-block;">11</span>

<span class="left" id="ctl00_LblWeek" style="width: 3.5%; display: inline-block;">Week</span>

<span class="left" id="ctl00_LblWeekH" style="width: 2.5%; display: inline-block;">6</span>

<span class="left" id="ctl00_LblWeekM" style="width: 2.5%; display: inline-block;">2</span>

<span class="left" id="ctl00_LblWeekS" style="width: 2.5%; display: inline-block;">1</span>

<span class="left" id="ctl00_LblWeekX" style="width: 2.5%; display: inline-block;">2&nbsp;</span>

<span style="width:19.47%;display: inline-block;">5</span>
<span style="width:19.47%;display: inline-block;">5</span>
<span style="width:0%; display: inline-block;">0</span>
<span style="width: 0%; display: inline-block;"></span>
<span style="width:19.47%;display: inline-block;">5</span>
<span style="width:11.68%;display: inline-block;">3</span>
<span style="width:3.89%;display: inline-block;">1</span>
<span style="width:0%; display: inline-block;"></span>
</div>```

Best Regards,

Jean

MSDN Community Support