Is there a way to make a TelerikChart which nested inside TileLayoutItem to be 100% width of the Content?
Following isn't working, (the chart is being cut at the right end)
<TileLayoutItem ColSpan="2" RowSpan="2">
<Content>
<TelerikChart Width="100%" Height="100%">
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Line" Name="Completed" Data="#_clientDuration">
</ChartSeries>
</ChartSeriesItems>
<ChartValueAxes>
<ChartValueAxis Color="red"></ChartValueAxis>
</ChartValueAxes>
<ChartCategoryAxes>
<ChartCategoryAxis Categories="#_xAxisItems"></ChartCategoryAxis>
</ChartCategoryAxes>
</TelerikChart>
</Content>
</TileLayoutItem>
It should work like that unless some more CSS from the web site is breaking things. Also, when the tiles resize you may want to .Refresh() the chart.
The provided snippet runs fine for me when I run it in the boilerplate project template and I add some dummy data, and the same scenario runs in this demo as well.
Thus, the issue is probably related to something specific in the project and if comparing against the demo or a blank project does not help I think the better approach is to contact the Telerik support.
Related
I need to wrap a div tag inside of an agm-polyline so it will accommodate both an ngFor and ngIf directive on the same agm-polyline-point tags. Example:
<agm-polyline [strokeColor]="'blue'">
<div *ngFor="let waypoint of waypoints">
<agm-polyline-point *ngIf="boolean" [latitude]="waypoint.lat" [longitude]="waypoint.lng"></agm-polyline-point>
</div>
</agm-polyline>
Adding the wrapped div results in the polyline no longer showing up in my browser when accessing on my computer from localhost:4200. However, when I run the code on Stackblitz it works perfectly.
Any ideas why this is happening? I've tried it locally on two versions of #agm/core (1.0.0 and 3.0.0-beta.0) with the same results each time.
Github is here.
Use ng-container instead of div.
When you use div tags, they are inserted into the DOM, which can interfere with the styling and structure of the page.
In contrast, ng-container tags are excluded from the DOM, but can use ngIf and other Angular constructs just as you are now.
<agm-map [latitude]="lat" [longitude]="lng">
<agm-polyline [strokeColor]="'blue'">
<ng-container *ngFor="let waypoint of waypoints">
<agm-polyline-point *ngIf="boolean" [latitude]="waypoint.lat" [longitude]="waypoint.lng"></agm-polyline-point>
</ng-container>
</agm-polyline>
</agm-map>
I'm working on an email editor using the last ckeditor version.
To provide compatibility with outlook, I need to force HSPACE and VSPACE on images.
I found some workarounds that have been working on previous ckeditor version.
Now CKEDITOR output is:
<p><img alt="" src="/userfiles/images/river.jpg" style="float:left; height:900px; margin:10px; width:1600px" /></p>
I need something like:
<p><img alt="" src="/userfiles/images/river.jpg" align="left" vspace="10" hspace="10" /></p>
Any idea how to achieve that on the last ckeditor version?
Thank you in advance
My method would be simpler than modifying ckeditor. I would attempt to do something like the following. Disclaimer, the regex here probably doesn't work as written. Regex is not my strength and it takes a lot of research and time for me to get it right. And depending on the various possibilities for your output, you might have to loop through multiple images if each has different needs. But as an idea.... I am replacing the whole style statement with the vspace and hspace settings. Note, editor is the name of your instance of the editor
window.onbeforeunload = function (e) {
data = CKEDITOR.instances.editor.getData();
data = data.replace(/<style=(.*)>/g, 'align="left" vspace="10" hspace="10"');
CKEDITOR.instances.editor.setData(data);
};
How would I go about doing this? Putting the following code into the
Markdown generator
gives me the desired output
<div style="float: left"><img src="http://ompldr.org/vaDU5NQ/scrotter.png"/>
</div>
I'm trying not to, kid. Don't act so surprised, Your Highness. You weren't
on any mercy mission this time. Several transmissions were beamed to this
ship by Rebel spies. I want to know what happened to the plans they sent
you. Kid, I've flown from one side of this galaxy to the other.
I've seen a lot of strange stuff, but I've never seen anything to make me
believe there's one all-powerful Force controlling everything.
However, adding this code to my README.md file makes it an inline image instead
of floating.
How could I work around this? Is it a Github bug?
I know this thread's old, but for anyone interested, you can use <img align="left" src="img.jpg"> and <img align="right" src="img.jpg"> to float images on GitHub.
I believe it is a security issue with GitHub. My understanding is they strip all HTML attributes such as style with the execption of perhaps href.
The Ajax accordion on my page isn't functioning at all. It displays fine on the page, but I can't seem to expand/collapse the panes when I click on their Headers.
Here's my code (just the HTML portion as I'm not aware of any code behind that is needed):
<aj:Accordion runat="server" ID="acMain" SelectedIndex="0"
FadeTransitions="true"
TransitionDuration="400"
FramesPerSecond="40" RequireOpenedPane="false" TabIndex="0"
SuppressHeaderPostbacks="true" HeaderCssClass="acHeader"
HeaderSelectedCssClass="acHeaderSelected">
<Panes>
<aj:AccordionPane runat="server" ID="Panel1">
<Header>
...
</Header>
<Content>
...
</Content>
</aj:AccordionPane>
<aj:AccordionPane runat="server" ID="Panel2">
<Header>
...
</Header>
<Content>
...
</Content>
</aj:AccordionPane>
</Panes>
</aj:Accordion>
I've checked the official page for the Accordion as well as a number of blogs on the subject (all of which seem to be a copy of the official page with the author's own wording) and according to all of this, I can't see that I've done anything wrong or missed anything out.
Matter of fact, I've checked an Accordion my boss made a while back and my code's basically the same as his (only panel content is different) and he has no code-behind either, so I'm really lost here.
Any help will be greatly appreciated
EDIT
After adapting my code according to a sample on asp.net, I've managed to collapse the first pane (SelectedIndex 0), but the other one won't expand :/
So I copied the accordion code from the asp.net how to page and put my content into the panes, still had no effect.
As it turns out, there was a rogue </div> tag in my content that was wrecking the accordion so I recommend that anyone having any similar problems checks their content very thoroughly.
Also, it's worth noting here that as this particular sample worked for me and because I'm telling you to use it if you're having trouble, it's author did leave an incorrectly closed </p> tag that might cause problems with your accordion during testing, so watch out for that.
I have a problem that has taken me days to figure out.
The social follow icons I get from AddThis website appear vertically instead of horizontally. I want to make it appear horizontally but I have found that it is impossible to do so.
Below is the code I got from https://www.addthis.com/get/follow
<!-- AddThis Follow BEGIN -->
<p>Follow Us</p>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="TheMostafaAbedi"></a>
<a class="addthis_button_twitter_follow" addthis:userid="theMostafaAbedi"></a>
<a class="addthis_button_google_follow" addthis:userid="106914586115617584077"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-506a607f490b6601"></script>
<!-- AddThis Follow END -->
The specific page that the problem occurs is http://www.under-review.com/about under Mostafa Abedi description.
You've got line breaks between lines of code, which makes the icons go one below the other. You're most likely using the WordPress editor to insert the code, which alters the formatting.
If you're using Visual editor, switch to HTML editor and give it a try.
If you're using HTML editor, at the very least remove all the spacing between items, making them placed in one line, which would prohibit WordPress from entering new lines, i.e.:
<a class="addthis_button_facebook_follow" addthis:userid="TheMostafaAbedi"></a><a class="addthis_button_twitter_follow" addthis:userid="theMostafaAbedi"></a><a class="addthis_button_google_follow" addthis:userid="106914586115617584077"></a>
From my experience, about 90% of all formatting issues are fixed by good code and as a rule I follow W3C. I suggest you validate against that because at the moment it fails (both the HTML and CSS fails)
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Funder-review.com%2Fabout%2F
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Funder-review.com%2Fabout%2F