I have an SSRS Report designed in VS 2013 Shell that has 2 tables inside a list.
Table 1 has a row for each data grouping and it hides all the rows except for the row(s) that pertain to that data group. This first table acts as a header for my 2nd table.
After the second table is a small gap inside the list that creates visual white space between the next iteration of my header and data tables.
In VS Preview the look of the report is exactly as designed. In both IE and Chrome the report sometimes ignores the whitespace. Below are screenshots of how it looks in the Design tab, Preview tab and in a browser:
The screenshot above shows the list with the 2 tables on top of each other. The first table contains on the headers. The second starts right after the 'Next Quarter...' header. Following the second table is a gap slightly larger than .25" inside the list.
You can see in the above image in Preview that the gap is visible between the table and the next header
In the browser example above the gap is missing before the 'Proactive' header but it is visible before the 'Proposed Visit' header.
This is the code that controls the Row Visibility:
<TablixRowHierarchy>
<TablixMembers>
<TablixMember>
<Visibility>
<Hidden>=IIF(Fields!SuperGroupNum.Value = 1, False, True)</Hidden>
</Visibility>
</TablixMember>
<TablixMember>
<Visibility>
<Hidden>=IIF(Fields!SuperGroupNum.Value = 2, False, True)</Hidden>
</Visibility>
</TablixMember>
<TablixMember>
<Visibility>
<Hidden>=IIF(Fields!SuperGroupNum.Value = 3, False, True)</Hidden>
</Visibility>
</TablixMember>
<TablixMember>
<Visibility>
<Hidden>=IIF(Fields!SuperGroupNum.Value = 4, False, True)</Hidden>
</Visibility>
</TablixMember>
<TablixMember>
<Visibility>
<Hidden>=IIF(Fields!SuperGroupNum.Value = 5, False, True)</Hidden>
</Visibility>
</TablixMember>
<TablixMember>
<Visibility>
<Hidden>=IIF(Fields!SuperGroupNum.Value = 6, False, True)</Hidden>
</Visibility>
</TablixMember>
<TablixMember>
<Visibility>
<Hidden>=IIF(Fields!SuperGroupNum.Value = 7, False, True)</Hidden>
</Visibility>
</TablixMember>
<TablixMember>
<Visibility>
<Hidden>=IIF(Fields!SuperGroupNum.Value = 7, False, True)</Hidden>
</Visibility>
</TablixMember>
<TablixMember>
<Visibility>
<Hidden>=IIF(Fields!SuperGroupNum.Value = 8, False, True)</Hidden>
</Visibility>
</TablixMember>
</TablixMembers>
</TablixRowHierarchy>
This issue is likely coming down to HTML interpretation. In many cases, the browser will ignore table elements that are empty.
The easy answer, to add an empty space in that element, won't work either because some browsers will ignore spaces without any other content as well. So you can do one of these:
Add a number 1 and make the font color for this character white. This will force the blank row to render and 1 won't be visible, but it will show up if you highlight the row or export.
The better solution: Add an expression to the empty row. Go to expression properties by right clicking it. On the first page, under markup type, click the HTML - Interpret HTML tags as styles radio button. Click the fX button next to value put this in:
=" "
This will put a space in the row that the browser won't ignore, and it should be forced to render forever more.
Related
I have this code this react code
const Icon = styled.div`...`
const ToggleInput = styled.input`...`
const Lines = styled.label`...`
const Line = styled.div`...`
return (
<Icon>
<ToggleInput
id="NavigationMenuToggler"
name="NavigationMenuToggler"
role="button"
aria-controls={DOMConfig.aria.mobileMenu}
type="checkbox" />
<Lines for="NavigationMenuToggler" aria-controls="MobileNavigationMenu">
<Line />
<Line />
<Line />
</Lines>
</Icon>
)
which generates this HTML
<div>
<input type="checkbox" id="NavigationMenuToggler" name="NavigationMenuToggler" role="button" aria-controls="MobileNavigationMenu" class="sc-jffIyK kktnkO">
<label for="NavigationMenuToggler" aria-controls="MobileNavigationMenu" class="sc-gSYCTC eRjJOo"></label>
</div>
The label's for attribute is equal to the input's id. In lighthouse, however, I'm still seeing the "Form elements do not have associated labels" warning. Why is this happening?
The <label> is present and is correctly linked to the <input>, but it is completely empty.
As a consequence, it is like if it was not present.
Your label must have some text content, so that screen readers can say something when landing on the input.
If you don't want that text to be displayed on screen, you can send it off screen, by using the visually hidden text technique.
Alternatively, you can add a an attribute aria-label on the input, which must also be non-empty for the same reason.
When I create an HTML <input type="number"/> with step="0.010000000000000009". I can only click the button to increase the value once to fill in the min value and then only once for the first increase by the step value, then it gets stuck at this value and further clicks have no effect. I can only reproduce this with min="1.2" max="1.3".
All other combinations of min, max and step I tried allow to click the button multiple times until it reaches max in the defined steps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>input with decimal step</title>
</head>
<body>
<input type="number" min="1.2" max="1.3" step="0.010000000000000009"/>
</body>
</html>
I believe that, according to the HTML5 Living Specification, your <input /> element "suffers from step-mismatch":
https://html.spec.whatwg.org/multipage/input.html#the-step-attribute
https://html.spec.whatwg.org/multipage/input.html#concept-input-min-zero
Following the spec w.r.t. your case...
The step value is 0.010000000000000009 (from parseFloat).
The step-scale-factor value is always 1 for <input type="number" />
The step-base is the min attribute, which is 1.2.
The allowed-value-step is step * step-scale-factor which is 1 * 0.010000000000000009 === 0.010000000000000009.
Re: "Constraint validation", the spec says this:
Constraint validation: When the element has an allowed-value-step, and the result of applying the-algorithm-to-convert-a-string-to-a-number to the string given by the element's value="" is a number, and that number subtracted from the step-base is not an integral multiple of the allowed-value-step, the element is suffering from a step mismatch.
I'll rephrase that to this...:
If element has allowed-value-step and numeric value="" attribute.
(So this is only after the <input/> is non-empty, such as clicking the up/down buttons once to give it a value of 1.2)
...then subtract 1.2 (the step-base) from 1.2 (the value="") to give 0.
And 0 is not an integral multiple of 0.010000000000000009.
Therefore the element is suffering from a step mismatch.
Now, w.r.t. your findings:
I can only click the button to increase the value once to fill in the min value
Yes, that follows the HTML5 spec: the initial value="" is empty, so browsers will choose the next valid highest value which is the min="1.2" value.
and then only once for the first increase by the step value
Yes, that's because the next step is 1.2 + 0.010000000000000009 which is 1.210000000000000009 - which both browsers truncate the display to 1.21, however as soon as this happens we see a difference in browser behaviour:
Firefox seems to correctly comply with the spec and it sets HTMLInputElement.validity.stepMismatch to true and disables the up/down buttons due to the step-mismatch condition.
Chrome 92 does not and using the up/down buttons to set other values still results in HTMLInputElement.validity.stepMismatch === false.
Here's a snippet that shows validity information:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>input with decimal step</title>
</head>
<body>
<input id="inp" type="number" min="1.2" max="1.3" step="0.010000000000000009" />
<ul id="eventsList"></ul>
<script>
const inp = document.getElementById('inp');
const ul = document.getElementById('eventsList');
inp.addEventListener( 'input', logInfo );
inp.addEventListener( 'change', logInfo );
inp.addEventListener( 'click', logInfo );
function logInfo( e ) {
const li = document.createElement('li');
li.textContent = e.type + ". Value: " + inp.value + ", valid: " + inp.validity.valid + ", stepMismatch: " + inp.validity.stepMismatch;
ul.appendChild( li );
}
</script>
</body>
</html>
In Chrome, it lets me click the up button 10 times (1.2, 1.21, 1.22, 1.23, ..., 1.28, to 1.29) before it stops, though it never reports stepIsmatch: true.
In Firefox, it lets me click the up button 1 times (1.2 and 1.21) before it sets stepMismatch: true.
My money's on Chrome doing their own thing given their interpretation (or at least, their implementation) of the spec is more forgiving and is less likely to result in end-user-frustration when step is set to a strange value.
What's interesting is that the Number type in browsers seems able to accurately represent 0.010000000000000009 without any tell-tale IEEE 754 rounding (ditto Python), whereas C#/.NET's Single (32-bit) and Double (64-bit) floating-point types both choke and give me rather bad approximations.
I'm very new to using HTML. I'm required to use it for a project and I have no education on it at all. Here's a break down of what I need to do. I need to have a graph of text boxes (I have added some features to some of them provided by webix) and I would like to have buttons that allow me to add or delete rows. I'm using a webix datatable as well. Here is my code for the button. At the moment, I just want to add a row to the top of the chart. Right now I just have the add rows button. Once I figure this out, I can easily do the remove.
input type='button' class="sample_button" value='add row' onclick= grida.addRowCss(1, getElementById('grida').style.color = "black");
Here is my datatable code.
webix.ready(function(){
grida = webix.ui({
container:"testA",
view:"datatable",
columns:[
{ id:"stage",editor:"text", header:"Stage", width:150},
{ id:"component",editor:"text", header:"Component",width:200},
{ id:"epic",editor:"text", header:"Epic" , width:200},
{ id:"engineering", editor:"text", header:"Engineering", width:200, suggest:numSuggest},
{ id:"design", editor:"text", header:"Design", width:200, suggest:numSuggest},
{ id:"research",editor:"text", header:"Research", width:200, suggest:numSuggest},
{ id:"notes", editor:"popup", header:"Notes", width:200}
],
editable:true,
autoheight:true,
autowidth:true,
data: [
{id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"},
]
});
});
Everything is functional except for the button, which appears, but does nothing.
This is a link for the addRow webix function.
http://docs.webix.com/api__ui.datatable_addrowcss.html
Any and all help is appreciated, especially because I'm completely new to this.
Thanks
Edit1:
Thank you for the answer. So at the moment I make my button like this (before the script)
input type="button" value="Add row" onclick= 'add_row()'
And the table remains the same as before, however I've included the add_row function after the conclusion of the table. I'll include the last bit of the table for context
data: [
{id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"}
]
});
function add_row(){
grida.add({
stage:"Test 2",
component:"Strategy",
epic:"Design",
engineering:2,
design:0,
research:0,
notes: "This is a test"
},2)
}
I've also tried
$$("grida").add(...)
to no avail. The button is on screen, but doesn't work. I imagine I'm doing something out of order, but I'm not sure what.
You need to use add not addRowCss as in your code snippet
http://docs.webix.com/api__link__ui.datatable_add.html
add adds the new row
addRowCss adds css class to the row
grida.add({ stage:"Test 2", component:"Second Component"})
I have made a donut pie chart in adobe flash builder 4.5 which shows tool tip for each sector during mouse hover. I wanted to know how the application is calculating and displaying the percentage of each sector even though i am just providing values in array collection with no formulas being used in the code given below..
Please Help
My complete code..
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/13/creating-donut-shaped-pie-charts-using-the-innerradius-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function labelFunc(item:Object, field:String, index:Number, percentValue:Number):String {
return item.name + ": " + '\n' + "AVG: " + item.avg;
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
<mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
<mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
<mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
<mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:PieChart id="chart"
height="100%"
width="100%"
innerRadius="0.5"
showDataTips="true"
dataProvider="{arrColl}" >
<mx:series>
<mx:PieSeries labelPosition="callout"
field="avg"
labelFunction="labelFunc">
<mx:calloutStroke>
<mx:Stroke weight="0"
color="0x888888"
alpha="100"/>
</mx:calloutStroke>
<mx:radialStroke>
<mx:Stroke weight="0"
color="#FFFFFF"
alpha="20"/>
</mx:radialStroke>
<mx:stroke>
<mx:Stroke color="0"
alpha="20"
weight="2"/>
</mx:stroke>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</mx:Application>
Here is the screen-shot of the output i.e pie chart
I want to know how the value 23.2% is being displayed as tool tip for the orange sector even though I'm not writing it anywhere in my code..if any function of the sdk is being called to calculate the percentage then where is it??
You're absolutely right - Flex does this for you already.
I'm doing something similar myself so sorry for the necropost. This requires some quick diving into the SDK, specifically to PieSeries.as, line 1772 in the updateMapping function where the percentValue property is set.
for (i = 0; i < n; i++)
{
_renderData.cache[i].percentValue = _renderData.cache[i].number/total;
}
_renderData can be accessed by calling the items property of the series, found on line 468.
override public function get items():Array /* of PieSeriesItem */
{
return _renderData ? _renderData.filteredCache : null;
}
So if you wanted to know the percent of the item at index 3 in your PieSeries, you'd do the following:
var item3Percent:Number = chart.series[0].items[3].percentValue;
You don't need a custom formula to calculate this percentage, it's a standard calculation and one that the pie chart has to preform in order to work what size of the pie to give to each value.
All the information it needs to do this is provided when you set field and dataProvider on the chart object. While I can't provide you with the exact code that is run here is a simple approximation:
function getRowPercentValue(row:Object):Number
{
return (row[field] / getTotalFieldValue()) * 100
}
function getTotalFieldValue():Number
{
var returnVal:Number = 0;
for each(var row:Object in dataProvider)
{
returnVal += row[field];
}
return returnVal;
}
note this is a bit of pseudo-code, the pie chart will be more optimised than this and will do clever things (like use row.valueOf() if field == undefined etc, etc.)
As to why it's displayed there, that will be part of the tooltip renderer, you can see your custom labelFunc working with the lines coming off the chart
I am using a Column Chart to display certain data. The data is provided by an array collection. The array contains 3 elements for the horizontal axis, hence 3 labels are shown on the horizontal axis. I want to show 2 additional labels(i.e. total 5 labels) dynamically on the chart. I there a way to add labels to the horizontal axis.
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Revenue:1200, Expenses:500},
{Month:"Feb", Revenue:1200, Expenses:550},
{Month:"Mar", Revenue:1240, Expenses:475},
]);
/////////////////////////////////////////////////////////
<s:Panel title="Floating Column Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ColumnChart
dataProvider="{expenses}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
yField="Revenue"
displayName="Revenue"/>
</mx:series>
</mx:ColumnChart>
</s:Panel>
Here the labels on horizontal axis will be Jan, Feb and Mar. I want to add labels April and May to the horizontal axis dynamically if they are not present in the array collection. Their vertical axis value(in this case revenue) will be 0. I hope the question is clear now.
expenses.addItem({Month:"April"});
expenses.addItem({Month:"May"});
You can just add items to your dataProvider. Is it suitable?