I am using a RadEditor control in ASP.NET web application. It is mainly being used for email body. Users usually copy and paste the content from MS Word to this control and send the email through this application. Users are using Chrome browser from Chrome Book. But users complained of an issue now. When the users send the email, recipients are receiving some tech jargon like below along with the email content.
<qowt-page named-flow="FLOW-1" style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; -webkit-box-pack: justify; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-shadow: #d1d1d1 0px 0px 0px 1px, #cccccc 0px 0px 4px 1px; overflow: hidden; margin: auto auto 5mm; position: relative; color: #000000; font-family: Calibri, sans-serif; font-size: 16px; width: 595.3pt; height: 841.9pt; cursor: text !important;">
I have no idea what is this junk they are receiving. I tried to simulate this issue in IE and Google Chrome browsers in Windows machines but could not simulate it. Only users who are using Google Chrome in Chrome book are having this issue. Email is sent through Chrome book.
I have already tried the following code with no result. txtContent is RadControl here.
txtContent.StripFormattingOptions = EditorStripFormattingOptions.MSWordNoMargins | EditorStripFormattingOptions.ConvertWordLists;
txtContent.DisableFilter(Telerik.Web.UI.EditorFilters.ConvertToXhtml);
I tried enabling and disabling Brotli-Content encoding in Chrome browser but could not simulate it.
Use the txtContent.Content to get the send the email without the jargon to be sent in the email body.
You can see how to strip the Word formatting through the StripFormattingOptions property in these online resources:
https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/pasting-content/clean-ms-word-formatting
https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/pasting-content/clean-ms-word-formatting-on-page-load-and-on-submit
https://demos.telerik.com/aspnet-ajax/editor/examples/cleaningwordformatting/defaultcs.aspx
Related
On Stack Overflow, I can use markup for keyboard shortcuts like <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F2</kbd> for Ctrl+Alt+F2.
Is something like this also possible in Confluence? If yes, how?
I haven't tried it yet, but it seems the free official plugin Markdown Macro for Confluence will help you to use any Markdown syntax.
Two solutions found on Atlassian's forums:
The first is to
Paste table row <kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> in the Confluence's shortcuts
The second is to add your own CSS to the page, which is not ideal:
This is done with a combination of CSS and HTML.
Start with a CSS macro (or edit the Look and Feel):
kbd > kbd {
box-shadow: 0 1px 0 rgba(0,0,0,.2);
border-radius: 3px;
padding: .1em .7em;
border: 1px solid #ccc;
font-family: Arial, sans-serif;
background-color: ;
display: inline-block;
margin: 0 .1em;
white-space: nowrap;
font-size: 1em;
}
Then wrap the key letters and words in HTML:
<kbd><kbd>K</kbd></kbd>
I have the following scenario below-
HTML
<ul>
<li>Messi</li>
<li>Ronaldo</li>
<li>Neymar</li>
<li>Fabregas</li>
<li>Rooney</li>
<li>Bale</li>
<li>Ozil</li>
<li>Gerrard</li>
<li>Torres</li>
</ul>
CSS
ul{
list-style-type: none;
max-height: 65px;
outline:none;
overflow: auto;
width:200px;
}
li{
height: 20px;
padding: 10px 0;
text-indent: 10px;
width: 200px;
}
Now when i open this in Safari 7.0 (Mavericks) & use Voice Over Reader, first few items the black outline comes around the <li> items but after that the Voice Over reads the items but the black outline doesn't come on them. Also the items are hidden below the overflow clipped region.
This works fine in Safari 6.0.
I believe it has got to do something with the overflow property.
Any explanation & solution for this? Help is appreciated.
Thanks.
Everything is great on all browsers on OS X, I come to test on windows, and it seems my webkit elements, ie gradient backgrounds and radius borders do not show up - in chrome, firefox or ie. (so it isn't a problem with chrome exclusively but perhaps Windows 7?) I should not i'm on chrome 27 and ie 10. On another windows pc with an earlier chrome and ie 8 it looks as it should.
So, I go into chrome developer mode to take a look, and when I rollover the 'element', I can actually see the webkit items as they should be under the highlighted colour. Does that make sense?
Anyone experienced this before and know what it means?
For example, the following will be invisible in all windows browsers, but when I hover over it in chrome it shows up:
.example .example1 li {
float: left;
padding: 0px 5px;
width: 120px;
height: 60px;
border: 1px solid #e6e6e6;
margin-left: 14px;
margin-bottom: 10px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
text-align: center;
font-size: 16px;
font-weight: 500; }
Maby you need to run your code through a Prefixer, http://prefixr.com/
Im struggling with this for the past 3 months!! - how to adapt css3 to IE7,8 and 9??
this is my page
I am using buttons there, I want to make rounded corners (basic, no?)
so I have used this css
body .main_title {
font-size: 16px;
padding: 0.3em 1.5em;
display: inline-block;
cursor: pointer;
line-height: 1.5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: #222222;
color: white;
behavior: url(PIE.htc);
}
and the button is
<button type="submit" id="1" class="main_title">מאפיינים</button>
as you noticed, I also used an "extention" called css3pie to make it work but nothing!!
any suggestion?
any suggestion?
Sit back. Relax. Don't worry about minor cosmetic details in old browsers with falling marketshare.
CSS3 pie is kind of buggy. Try putting a position:relative; on it. Also make sure that's the correct path to PIE.htc — if I remember correctly, it may help to link to it absolutely.
I think you can probably use jquery for this http://jquery.malsup.com/corner/ in your javascript.
Anything from IE9 onwards will be ok with this in the css
border-radius:10px
http://caniuse.com/#search=border-radius
I'm having trouble with the cursor in a searchbox that displays too far left in Firefox, whereas it looks fine in Chrome and Safari. The CSS uses Modernizr to display a borderradius where possible, so the issue doesn't concern IE which is served a plain square box.
Here's the HTML:
<form action="/search-results/" id="search" role="search">
<input type="search" placeholder="Search this site here" name="q" results=5 id="q" autocomplete="off" size="31"/>
</form>
The CSS is as follows:
input::-webkit-input-placeholder {
color: #999;
}
input:-moz-placeholder {
color: #999;
to display the placeholder and
.borderradius #search input#q {
width: 180px;
height: 20px;
font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0;
padding: 0;
background: #fcfcfc;
border: 1px solid #d1d1d1;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
.no-borderradius #search input#q {
border: 1px solid #ccc;
background: #eee;
font: inherit;
width: 170px;
height: 20px;
padding: 0 0 0 8px
}
to style the box.
I also added this:
/* Remove default input type="search styling */
input[type="search"] {
-webkit-appearance: textfield; /* You could also use none */
}
(which I saw in this article) which has the effect of removing the 'enforced' styling of the Webkit search box—meaning it can then be made to render consistently in Mozilla with the right styling.
Adding the results=5attribute in the input tag, although it doesn't currently validate, displays a magnifying glass in Webkit.
The above code can also be checked online on my site.
The search box displays as follows:
Safari
Chrome
Firefox
Firefox doesn't display the magnifying glass, but that's fine. On the other hand, while adjusting the margin and/or padding on the box can correct the wrong (too far left) Firefox cursor display, it necessarily does so at the (unacceptable) cost of pushing it too far right in Webkit browsers. And I haven't found a way of targeting just Mozilla in this instance. Any suggestions welcome...
To be fair, Firefox isn't displaying the wrong cursor position. If you remove the invalid results attribute, you will see the cursor position is in the same place in webkit.
I am not sure what padding/margins you have tried, but the padding below looked fine in both browsers. The box-sizing: properties are used so that the input acts the same way in all browsers and doesn't make the box bigger with the extra padding.
.borderradius #search input#q{
padding: 0 0 0 6px;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
}
This is complex - it seems to me that we've some way to go before native styling of the new form elements works well cross-browser. I have put together a fiddle which shows the code necessary to display your search input properly in both webkit browsers and Firefox.
This article by Trent Walton describes the various properties that affect the appearance of search inputs, and the always brilliant CSS Tricks also has some useful information.
Basically, I've over-ruled the browser's native styling using this code:
-moz-appearance: none;
-webkit-appearance: none;
I've then used the -moz-padding-start property (who knew?) to add some left padding only for Firefox.
So, although that works, it is far from ideal having to jump through those hoops. A note on #tw16's answer: -moz-box-sizing is currently used by even the most recent version of Firefox, but is likely to be replaced by the non-prefixed version in future, which will potentially break that solution. To be fair, -moz-padding-start will presumably be similarly replaced at some point in the future, though the CSS Writing Module seems more obscure (to me at least).