Change text align and direction of RadHtmlChart data - html

I have a chart:
<telerik:RadHtmlChart ID="chrtInvestmentAmount" runat="server" Transitions="true" DataSourceID="SqlDataSource1" Height="256px" Skin="Glow" Width="1024px" RenderMode="Auto">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="InvestmentsAmount" Name="כמות משקיעים"/>
</Series>
<XAxis DataLabelsField="Month">
<TitleAppearance Text="חודש" />
</XAxis>
<YAxis>
<TitleAppearance Text="כמות משקיעים" />
</YAxis>
</PlotArea>
</telerik:RadHtmlChart>
Now in my body tag I have set the direction of the page to rtl, and when i do that the whole chart gets messed up, the text gets cut off a little and all in all it just doesent look good:
for some reason it just gets all messed up. Isn't there some small piece of code which can fix this?
And while im asking, another problem i have is after setting the chart type (bars,lines and so on...) it does not update it and i also notice no line of code is added to the HTML. I dont know if something needs to be added, either way i cant change the chart type. Is there some kind of code which can change the chart type?
Thanks.

RadHtmlChart renders with markup (SVG or VML) so some CSS properties can affect it and break it. To avoid such issues you can have them reset for the charts. For example:
<telerik:RadHtmlChart CssClass="resetChart" ID="chrtInvestmentAmount" runat="server" Transitions="true" DataSourceID="SqlDataSource1" Height="256px" Skin="Glow" Width="1024px" RenderMode="Auto" >
and something like this in the CSS:
.resetChart
{
direction: ltr;
float: none;
text-align: left;
}
as for the chart type - this depends on the type of series you add to the chart. In your case you ahve a ColumnSeries, to add a different type of chart you need a different type of series. This does not happen with just a click on the design time wizard, its first page only preselects the types of charts you can add in the other tabs like the Series tab: http://www.telerik.com/help/aspnet-ajax/htmlchart-design-time-using-visual-designer.html.

A simple solution to my question was just putting the charts in a table, and not touching anything with the css and the problem was solved.

Related

Embedded CSS in HTML - Change Word Color based on different words

My Situation
I am currently trying out the new E-Mail function that comes along with the new Zabbix major update 5. In there, you can format your E-Mail with HTML.
I already built something and in that HTML template there is a header like this:
<h3 align="center"><font color="white">Severity: {TRIGGER.SEVERITY}</font></h3>
{TRIGGER.SEVERITY} is a Zabbix Macro that shows the severity of the alert send via Mail.
What I'd love to see is the color of this macro change based on the Severity level. So, if the mail gets send out while "Information" is staying there, i want it to be f.e. green, while when "Disaster" is in there, i want it to be red.
My Question
Is this possible? And if yes, how will I able to achieve this?
Thanks in advance for every comment!
Greetings,
Josh
You can use CSS and assign a CSS class using {TRIGGER.SEVERITY}. Then define the CSS class with your desired colour, e.g. a template could look like this:
<style type="text/css">
.sev_Disaster {
color: #E45959;
}
.sev_High {
color: #E97659;
}
.sev_...
</style>
<h3 align="center"><span class="sev_{TRIGGER.SEVERITY}">Severity: {TRIGGER.SEVERITY}</span></h3>
Notice the class="sev_{TRIGGER.SEVERITY}" which will turn into e.g. class="sev_High" which is defined in the <style> block above.
Another way would be to use different Media types (same transport but different templates) for each severity - this would give you much more freedom but you'd have 6 mostly similar templates and thus changes would've to be implemented in all 6 of them.

Telerik RadAutoCompleteBox input is not visible

Following the tutorials for RadAutoCompleteBox control for ASP WebForms, I have the following code:
<telerik:RadAutoCompleteBox SelectMethod="GetUserTags"
runat="server"
ID="tagsAutoCompleteBox"
InputType="Token"
Skin="Metro"
DataValueField="Id"
DataTextField="Value"
Width="200px"
DropDownWidth="200px">
</telerik:RadAutoCompleteBox>
However I can't add any tags, because input is not accessible (clicking in control does nothing). After investigating generated HTML, I see, that inner input has set max-width: 0 in its style.
When I manually delete this style entry in chrome developer tools, it works as expected. Data source is correctly set, entries can be added and read. The only problem then is, that tags are above the input, not on the left:
How to work around this?

Trying to set a html property based on a code behind value

I'm trying the following:
<div id='divOwner' runat=server visible='<%# isAccountOwner(Me.UserId) %>'>
I would expect this to switch visible / invisible based on the value of isAccountOwner. This is not working as expected, and is always coming up visible. Can somebody enlighten me please?
Thanks
#in code nuggets (<% %>) is used with data bound controls like gridview, repeater control etc. For your div to work like this you need to call the DataBind method of this Div or one of its paremt control.
So, In page load include this line:-
divOwner.DataBind();
And make sure isAccountOwner returns a Boolean.

IE9 Loses Some CSS After Particular Form Submit

The site I am editing has a search form. For the record, there are several other forms on the site, contact and the like. This is the only one with an issue.
Upon submission of the form, SOME of the styling is lost in IE9 (possibly other versions of IE, haven't tested that yet). Primarily, the margins and colors set in html and body appear to have been lost. Menus, banner, text, etc all appear to retain styles. All styles are on one sheet, that are used here...
Any helpful advice?
Here is the contents of the search page and the php used to check for the form, if that helps, and the css that I think is lost.
EDIT: The page is a search page, with almost nothing on it. A search reloads the same page, while displaying results from the search function. Thus, the same embedded sheets should be embedded, the same html is displayed as far as I can see... if this helps the discussion any. Still sifting to find some type of error. IE dev tools also seem to indicate that this error occurs in previous versions of IE as well, when viewed in IE7-8...
THE HTML:
<div id="search">
<br />
<div style="float:right;font-size:.8em;">
<form name="form_sidesearch" action="search.html" method="post">
<input type="hidden" name="action" value="search" />
<input type="text" name="search_value" value="<?php echo $systems_primary->search_value ?>" />
<input type="submit" name="submit_search" value="Search Website" />
</form> <br />
</div>
</div>
<?php echo stripslashes($search_results);
THE PHP:
<?php
// -- Begin Search --------------------------------------------------------------------------------------
if($_REQUEST["action"] === "search")
{
if(strlen($_REQUEST["pg"]) <= 0)
{
$_REQUEST["pg"] = 1;
}
$search_results = $systems_primary->search_website("index",urldecode($_REQUEST["search_value"]),"<div class=\"listing ui-corner-all\">{ENTRY_TITLE}{ENTRY_CONTENT} ...read more</div><br /><br />",345,"all",10,$_REQUEST["pg"]);
}
// -- End Search ----------------------------------------------------------------------------------------
?>
THE LOST CSS (could be more):
html {
background-color:#F6E6C8;
font-size:16px;
font-family:Helvetica;
}
body {
width:1027px;
margin:0 auto;
background-color:#ffffff;
font-family: arial, 'times new roman', sans-serif;
}
Elaboration: The actual thing that happens is that the page content as a whole is shifted left and remains left aligned instead of using the auto margins to stay centered. Additionally, the html background color is lost. The styles for the search fields are also lost or ignored. Not sure what else might be altered.
Typically when styling is lost after submitting a form, especially when it's an Ajax operation and not a full page reload, it's because there was some styling applied using JavaScript or jQuery that did not get reapplied when the updated portion of the page was reloaded. This could involve additional elements being created, or it could involve CSS classes being added to 1 or more elements.
This is especially likely to happen with the styling of HTML form elements, because in some cases heavy styling of certain form elements can only be done with the help of JavaScript or jQuery.
In such cases, identify the JavaScript or jQuery that styled the relevant content when the page first loaded, and then reapply it after the page has been updated (after an Ajax call has completed successfully, or after the browser has reloaded the page or loaded a new page).
Failing that, compare the HTML for the page before and after and see what changed. There may be a CSS class on the body tag or a container class that's not getting consistently set. If a new page is loaded, a different set of CSS files may be getting downloaded, or there may be an embedded style sheet that one page has but another does not.
Failing that, verify that the HTML and CSS are valid. Some browsers are more forgiving than others when rendering invalid code. What may seem like a browser bug could be caused by bad code.
If all of that turns up nothing and it seems increasingly likely that the problem is caused by an obscure browser bug, then reduce the code to the simplest possible state in which the problem can be consistently reproduced, and try to identify more clearly exactly what the nature of the bug is. This will make it easier to search for possible fixes and to ask for help. And in the course of reducing the code, if the problem suddenly disappears, the last code removed may turn out to be at least partly responsible for the problem.
Conversely, when it seems like there's no rhyme or reason to a problem, it's sometimes helpful to reimplement the code from scratch, to see if the problem still occurs. If the problem starts to occur at some point while writing the code, then likewise the last code that was added may be at least partly responsible for the problem.
You can do something like this...
$('#yourForm").on('submit',function(e){
$(this).css({
// reasign all the atributes you lost
});
e.preventDefault();
});

Text not showing in Flex Spark.TextArea when added dynamically

I'm writing a veeeeeeeery simple code where a Spark TextArea is in a TabNavigator and I want to write something into it dynamically. The problem is: when I try to do it the TextArea stays white until clicking on it makes the text appear magically.
The mxml is this:
http://pastebin.com/7WqvXuH2
and very simple code to write is this:
xmlError.text += error+"\n\n";
I also tried this but with the same result
xmlError.appendText(error+"\n\n");
Hope I've been clear.
As a work-around I've used the code below, there are multiple input fields on this view setting the focus on just one of the text inputs causes all of them to render the text correctly.
The only really relevant "property" is the creationComplete handler.
<s:TextInput autoCapitalize="none"
autoCorrect="false"
creationComplete="{tiFirst.setFocus()}"
id="tiFirst"
prompt="{data.firstName}"
text="{data.firstName}"
width="300"
tabIndex="0"/>