In CKEditor, when I select text and set it's alignment to 'center' by clicking button in the toolbar, it appears in the center but when I check its source there is no alignment text.
There should be inline style added in the source like
<p style="text-align: right;">Testing data</p>
Can you try to inspect and check some other css styles overriding text alignment with (text-align:left !important.) applied for your center aligned element.
Related
I created a demo tour for my product, so I used an image as a background and on top of it lightbox.
So when I used Chrome, it looks great but on other browsers, the pointer does not point on the right object, the location is not the same.
Please open this URL on chrome, click "start tour" and then do the same on Edge
https://www.analytics-model.com/tutorial
How to deal with this issue?
Your approach to this is bad.
The problem is also browser independent as the window size of the browser is what misaligns the overlay-elements of your tour.
It's simply bad responsive design to other window sizes.
First, don't use an backdrop-image, also not for a demo.
Reason is, the overlay element needs to be relative to the actual HTML element it's revering to and this can't (easily) be done with an image.
To anchor an element to another one, in this case, a toolbar symbol to the overlay explainer element, you can use the css position property in conjunction with top, bottom, left and right properties.
The anchor element should have the css property "position: relative" and this anchor element has the explainer overlay in it's inner HTML.
The overlay has "position: absolute;" as it's css property and with top, bottom, left and right you then can position it however you please, relative to the anchor element.
In simplified code this looks like this:
html:
<div class="anchor" >
Account
<div class="explainer">
This explains everything about your account.
</div>
</div>
css:
.anchor {
position: relative
}
.explainer {
z-index: 99;
position: absolute;
top: 100%;
left: 0;
}
Working example demo:
https://jsfiddle.net/Krischna_Gabriel/uwzxqfer/191/
how to add the image icon in the segmented bar in nativescript-angular. can you please help me with this
<SegmentedBar #tabs [selectedIndex]="selectSegment">
<SegmentedBarItem title="test1"></SegmentedBarItem>
<SegmentedBarItem title="test2"></SegmentedBarItem>
<SegmentedBarItem title="test3"></SegmentedBarItem>
<SegmentedBarItem title="test4"></SegmentedBarItem>
</SegmentedBar>
An easy way to add icons to your Nativescript Segmented Bar items is to use FontAwsome (or any other icon font for that matter).
1: Check out this (http://www.nativescriptsnacks.com/videos/2016/03/07/nativescript-and-font-awesome.html) short five minute video on how to install FontAwsome to your {N} app.
2: Once you install the icon font. Assign style="font-family: 'fontAwesome' " attribute to SegmentedBar xml/"html" tag;
3: Check out http://fontawesome.io/cheatsheet/ to figure out the unicode for the icon you want to use and paste that unicode to the title attribute of the relevant SegmentedBarItem tag. TIP: make sure the code is in the right format. Don't copy the square braces shown on the cheatsheet, just what the string that appears inside them.
THATS IT! Your code should now look something like this:
<SegmentedBar #tabs [selectedIndex]="selectSegment" style="font-family: 'FontAwesome'; color: #eee; background-color: #31394C;">
<SegmentedBarItem title=""></SegmentedBarItem>
<SegmentedBarItem title=""></SegmentedBarItem>
<SegmentedBarItem title=""></SegmentedBarItem>
<SegmentedBarItem title=""></SegmentedBarItem>
</SegmentedBar>
This image:
shows the end result of the above code on an android emulator.
the SegmentedBar does not have options to assign images for each SegmentedBarItem. This is a valid scenario for TabView. For SegmentedBar you can only set background-image for the whole Segmented bar which can be used to apply image pattern but is no applicable to apply different icons for the different SegmentedBarItems
please have a look at the below link
https://github.com/NativeScript/nativescript-angular/issues/790
For more flexible way you can create a custom SegmentedBar and adjust for your needs. Read more
here.
I'm trying to position an element at the bottom of my mobile page using kendo ui mobile. I have a tabstrip at the bottom, and I don't want it to be footer styling, so unfortunately data-role="footer" won't cut it. I'vetried setting style="bottom:-1em;" but that doesn't work, it places the div where it was before -1em.
For the bottom style to work, you should either use position: fixed or absolute. Position fixed should position it according to viewport, regardless of the element's container. However position: fixed is rather buggy on mobile platforms.
Position: absolute on the other hand will position your element according to its positioned container, so in order to use it, you can place your element in the footer. The absolute position will remove the element from the page flow, so it won't affect the positioning of the TabStrip you have there. The footer doesn't have overflow: hidden, so the element can be positioned outside of it and over the content if you want.
I've done custom image uploader for ckeditor 3.6.4. I insert an image and button "center" for paragraphs dont work for image. In fckeditor I could align image with this button. How to make that work either in cekdtior.
http://imageshack.us/photo/my-images/17/66892061.jpg/
This is because the image must be wrapped in a (psuedo)block element with text-align: center; to be centered. There's no other (valid) way to center the image so the Center button is disabled for images. I fact, what you see in FCK was totally wrong, as for such case:
<p>Foo<img src="path" />Bar</p>
The entire paragraph was centered:
<p style="text-align: center;">Foo<img src="path" />Bar</p>
To sum up: you have to do this manually.
I am using dijit's FilteringSelect box and trying to create a custom rich text HTML label, as per the documentation on dojocampus. I want my label to have the name of the object aligned to the left and a count aligned to the right. The way I am doing this is setting my label like so:
label: "left3 <span style=\"float:right;margin-top:-18px;\">right3</span>"
The problem is that when I hit the drop down menu, the right floated text appears about 20px below its associated left text. You can see an example of this here: http://jsfiddle.net/j9c3n/ The first FilteringSelect box contains the "buggy" behavior, the second box is my current workaround (adding margin-top:-18px) to the label.
Is this the correct behavior for the FilteringSelect label? Am I doing something wrong with the HTML? I tried including a <br style="clear:all;"> but that didn't help. I also tried setting all margins and padding to zero, as well as including a wrapper div around both the left and right text. All I can think of is that maybe the problem is the line height?
I guess my question is, Is this a bug in dijit.FilteringSelect, or am I just wrong thinking that the labels should all be vertically aligned?
Try this:
label: "<span style=\"float:right;margin-top:-18px;\">right3</span>left3 "