In Kendo UI Mobile, version v2013.1.621, I use a TabStrip with custom icons. This all works well, except for when I want to add data-badges to it. Somehow, the webkit-mask for the custom icon/image completely 'hides' the data-badges.
My example is as follows, using Kendo's documented approach on custom icons with webkit masks:
<div id="footer-tab">
<style scoped>
/* Custom TabStrip Icons */
#footer-tab .km-icon {
background-size: 100% 100%;
-webkit-background-clip: border-box;
background-color: gray;
}
.km-demo-icon1 {
-webkit-mask-box-image: url("images/icons/icon-1.png");
background-color: #b2f23d;
}
.km-demo-icon2 {
/* ISSUE IS HERE: Remove the -webkit below, and the badge works. */
-webkit-mask-box-image: url("images/icons/icon-2.png");
background-color: #b2f23d;
}
</style>
<div data-role="tabstrip">
<!-- Custom Icons be here... -->
PAGE1
PAGE2
</div>
</div>
Again, the custom icons work well, on both iOS as well as Android. But when I append the data-badge="99" attribute, the badge doesn't show up at all. By inspecting the DOM it looks like it's in place, but is just completely not visible.
Removing the wekit-mask-box-image line, as specified in the sample above, makes the data-badge appear, but doesn't render the custom TabStrip icon.
Seems quite straight-forward, but I can't seem to put my finger on what is wrong here. Any suggestions?
Yes, the TabStrip button's badge is rendered inside the icon and the mask is hiding it. I've fixed this for the Q2 2013 release, which will be out this week.
Related
I am using CKEditor 5 in my application for users to input documents with images, media, tables and styled text. Once the user stores the document and I pull it out again for display. In the past when I only had the most generic styling I displayed the content like this:
<div [innerHTML]="doc.text"></div>
This is an Angular application which explains the syntax used above. The problem is that the text renders but the CSS that is effective makes it looks different. For example CKEditor has a feature for the user to automatically resize an image to 50% and flow text around it. It looks really nice in the editor but when displayed as above the image reverts to full size.
My workaround for now is to invoke a ckeditor in disabled mode like this:
<ckeditor [editor]="Editor" [config]="{ toolbar: [ ] }"
[disabled]="true" [data]="doc.text"></ckeditor>
That works but I would prefer to have a solution where I don't have to import the ckeditor into components that don't need to let the user edit the document. Does anyone know how to do this?
I'd say it is not passible to have all the ckeditor features working in Angular only by using a div with innerHTML as a viewer... I was using same approach but some of the "figures" weren't shown, concretely embedded videos...
In order to have a disabled and pure read-only viewer I created a dedicated wrapper component and I used some global CSS styles to get rid of that unwanted UI behavior in this scenario.
Here is my rich text viewer component HTML, it is a ckeditor with an empty toolbar, same as in the question indeed:
<ckeditor class="ckeditor-viewer" *ngIf="isBrowser" [editor]="editor" [ngModel]="data" [config]="{ toolbar: []}" [disabled]="true"></ckeditor>
Here are some global styles that hide borders on figure hover and table handlers:
// These styles hide weird "things" in CKeditor Viewer (read only mode)
.ckeditor-viewer .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover{
outline-width: 0;
}
.ckeditor-viewer .ck .ck-editor__nested-editable {
border: 1px solid transparent;
height: 0;
margin: 0;
}
.ckeditor-viewer .ck-content .image>figcaption{
background-color: transparent !important;
}
.ckeditor-viewer .ck .ck-widget__selection-handle{
width: 0;
height: 0;
display: none;
}
// These styles hide weird "things" in CKeditor Viewer (read only mode)
I hope it helps.
the style dropdown menus in ck_editor in TYPO3 8.7 shows the labels in the same font size as in the editied text. E. G. when h1 is in the rte.css formatted as 30 px the text in the dropdown is 30px too and therefore the entry is not readable. Is there a possibilty to fix the font size in the dropdown menus to 12-15px, always and in every context? Without destroying the wysiwyg in the editable text?
Thanks
As far as I can see you can do that by using in your rte.css something like:
.cke_panel_listItem h1{
font-size:15px;
}
h1{
font-size:60px;
}
h2{
font-size:40px;
}
h3{
font-size:20px;
}
Please note that as the dropdown is loaded inside an iframe, you might have to kill your browser's cache to see some change.
See also CKEditor remove style preview from Styles dropdown
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
I have problem with tooltips on my magento website, I need to have one tooltip on product page which will show a HTML UL List. I tried some plugins I found but had problems with JQuery as it was disabling other prototype pop up I have on product page.
Im really a newbie at All the types of javascript and hope you experts can help me with this please.
My trigger id for tooltips is #why-to-buy
and the tooltip class in CSS is .why-to-buy-tooltip
can anyone suggest me a prototype or scriptaculous driven simple tooltip which can show HTML please?
Any help is more than welcome.
Thanks in advance.
Typically this can be done in just CSS. To start with there needs to be an anchor;
<a id="why-to-buy" href="#" onclick="return false;">
Why To Buy?
<ul class="why-to-buy-tooltip">
<li>Reason #1</li>
<li>Reason #2</li>
</ul>
</a>
The onclick is to prevent it working as a hyperlink. An anchor is necessary for older IEs to respect the following hover;
#why-to-buy {
position: relative;
}
#why-to-buy .why-to-buy-tooltip {
display: none;
position: absolute;
width: 200px;
height: 200px;
z-index: 100;
}
#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip {
display: block;
}
If you need more info search for and read about "CSS popups". A nice touch is to add some CSS3 transitions - old browsers just ignore them and continue to work as normal.
This type of popup is limited because it is inside an anchor, and anchors cannot contain anchors. If the #why-to-buy element is of another type, such as a DIV, then IE doesn't pick up the :hover pseudoclass. For this special case a bit of JavaScript is needed after all.
$('why-to-buy').observe('mouseenter', function() {
this.addClassName('over');
}).observe('mouseleave', function() {
this.removeClassName('over');
});
Update the last stylesheet rule to include #why-to-buy.over .why-to-buy-tooltip. The bit of JavaScript is rarely needed and can go in /skin/frontend/base/default/js/ie6.js. Or you could encourage browser upgrades and choose not to support old IE at all.
A quick Google searched returned this one, and shows to support HTML:
http://www.nickstakenburg.com/projects/prototip/
It's prototype based so should work well with Magento.
It’s difficult for me to word this question as I do not know the correct terminology. I’m trying to make a website so that when I scroll the main content, it does not scroll off the page. I want the main content to end somewhere in the middle of the page so as not to cover my “fixed” background image. But I do not want an iframe. In other words, it'll look somewhat like an iframe, but it should be controlled by the main scroll bar.
Anyway, I hope that made sense. I'd appreciate your suggestions.
Can use two <div>s that will cover the top and bottom part so that your text will go underneath them.
+----------------+
|+--------------+|
|| top ||
|+--------------+|
| your text |
| text |
|+--------------+|
|| bottom ||
|+--------------+|
+----------------+
On the z-index, the top and bottom will be over the main layer, and they will be positioned fixed to the top-left corner and bottom-left corner.
HERE: http://jsfiddle.net/FE2Wg/3/
Are you already using background-attachment: fixed; ?
Or overflow-y: scroll; with a div?
You want to show the scroll bar in a block of your HTML, right? Try using the CSS overflow property.
Reference: www.w3schools.com/css/pr_pos_overflow.asp
Try this in your page code:
<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
-->
</style>
<div class="scroll">
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>This is a scrolling are created with the CSS property overflow.</p>
</div>
Is this you are trying to do??