I have a strange problem with InfoPath 2010. It seems that when using a text with multiline the default formatting will be "white-space: pre" which prevents the text to break at the end of the field. It will only break if enter is manually pressed.
In my case, this is not acceptable. I do not know if it is possible to attache any CSS with my form. This would of course solve my problem.
Any other ideas that could help me crack this one?
Well, I had to solve this quickly so I had to do it the "ugly" way... I opened the xsl-files that had the problem and added the following code:
<style>
textarea{
white-space: normal !important;
}
</style>
Then I right-clicked on my "manifest.xsf", selected "design" and published... And voilà!
Let's hope the form won't break later due to those changes. (Hint: Always back up your code before doing changes to the source-files in InfoPath)...
You can open view*.xsl from this form package and replace current control css from "WHITE-SPACE: NORMAL" to "WHITE-SPACE: pre-line !important;".
In this way you don't need add any css file and it works fine for O365 as well.
Only small issues: then you edit form in the Infopath designer this textaria doesn't look pretty but it only on designer.
Related
I have a quill js editor on a html (MVC C# .Net Project). I want to preserve white-spaces (including tabs/indent). Adding white-space: pre to the editor solves it, however when pasting from Microsoft Word some strange line breaks appear.
With white-space: normal I can paste from Microsoft Word with no problems - it keeps the indentation. However when saving the HTML string to a database and presenting it again on the editor, the white space is not preserved. (Makes sense, since white-space is normal).
However if I set white-space: pre (or pre-line, or pre-wrap), everything works great with the database saves and presentation. But when pasting from Microsoft Word line breaks appear in the middle of every sentence...
I ended up solving this issue by redefining the block generated by Quill!
var Block = Quill.import('blots/block');
Block.tagName = 'DIV';
Block.className = 'pre';
Quill.register(Block, true);
By doing so, I register the text blocks on the quill editor as being <div> with class "pre": <div class='pre'>.
After this declaration I set the 'pre' class style (css):
.pre {
white-space: pre-wrap !important;
}
Now what happens is that every block of text is turned into a <div> with a customizable style. This solved my issue! Microsoft Word copies are now preserved, as well as normal text input!
[Stackoverflow disallows the word help in the title. Hence the h3lp]
We are in the proces of moving our code from Orbeon 3.9 to Orbeon 4.x. One of the many things that changed is the behavior for display of xforms:alert and xforms:help. Example code:
<xforms:input ref="#code">
<xforms:alert ref="$resources/required-field"/>
<xforms:help ref="$helptext"/>
</xforms:input>
In Orbeon 3.9 the alert is displayed as a red img with a white exclamation mark that has the text as tooltip, only if the binding fails. The help is displayed as a blue-ish image with a question that activated a tiny pseudo window containing the (potentially large) help text.
In Orbeon 4.7 the alert text is displayed as-is, no image and no condition based on binding. This interferes with a carefully designed interface as it takes up a lot more space. The help text is not displayed at all because .xforms-help has display: none;. Overriding that doesn't work because the text would then just be displayed inline.
I could not find documentation for these changes. Does anyone know the rationale and how to make "alert" and "help" useful yet again?
There are two changes with Orbeon Forms 4.x which might be relevant to this:
The HTML layout of elements has changed a bit. This means existing CSS might have to be adapted. You can check this by comparing the HTML produced by 3.9 vs. 4.x for a given page. With 4.x, all form elements, for example, are wrapped within a <span> or <div> element.
Form Runner uses Twitter Bootstrap as a CSS library. But the Bootstrap CSS files are also included for non-Form Runner pages.
This said, "red icon" alerts should still work, see for example the good old Espresso Order or Bookcast demos.
If you see alerts inline and unconditionally, it means that somehow the proper CSS doesn't apply, either because of the HTML layout change mentioned above, or because some CSS files are missing.
Look at this post : http://blog.orbeon.com/2014/01/improving-how-we-show-help-messages.html
and this : http://discuss.orbeon.com/how-to-use-the-quot-new-quot-xforms-help-in-4-5-td4658348.html
julien
When using jQuery Mobile .js along with jQuery Mobile .css, what is the best way to customize the default styling such as a link button?
Using jQM, a simple link can be turned into a button by using the following code:
Link button
data-role="button" allows jQM to add classes to the link so it can be styled into mobile button touch abled like so:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn
ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner
ui-btn-corner-all"><span class="ui-btn-text">Link button</span></span></a>
Is it OK to actually edit the jQM css file for example the ui-btn-up-c class? Or is it better to override the styles somehow, perhaps in an external stylesheet?
I have a couple of concerns. I am wondering if it's possible to break some of the functionality by directly editing jQM.css as jQM seems to use the stylesheet heavily.
Also will it be a problem on updating? Do jQM release a new stylesheet when a new version comes out which would override my edits to the main jQM stylesheet?
Basically what I am asking is how do I edit the jQuery Mobile built in theme?
Thanks and look forward to your answers :)
Intro
If you want to change classic jQuery Mobile CSS everything depends on what do you want to do.
Theme roller
Classic way would be to create a completely new set of theme's or add them to existing ones. It is done through jQuery Mobile theme roller. When you open it it will automatically create 3 themes you can then modify as you wish. Or you can Import your current theme CSS and add several more themes (this is probably best solution if you want to change complete look).
Custom CSS changes
This solution requires a little bit of finesse. First if possible NEVER change original CSS unless you are 100% sure what you are doing. For example if you change default button classes it will also affect other widgets that use button classes and there are a lot of them.
Correct way would be to change single/multiple elements with custom CSS file. This way original CSS files is intact and new one can be changed / removed at any time.
To do this you will need to use Chrome Webmaster tools or additional plugin called Firebug (for Chrome and FireFox). There are several more solutions but this two are most commonly used.
Problem to think about
Not all is well in this solution. For example, classic a tag button can be easily modified cause that same a tag will stay as a parent of a future styled jQuery Button. But, if your button is created from input tag, like this:
<input type="text" value="Some value" id="change-me"/>
you cant use #change-me id to correct its CSS. Mainly because this input is not a parent tag for a future button, it will be a inner part of a button when jQuery Mobile styles it. It will look like this:
<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
<input type="text" id="change-me" value="Some value" class="ui-input-text ui-body-c"/>
</div>
To fix this wrap that input with another div element. Move id from input to div element and then use it to change inner CSS styles.
How to correctly override CSS styles
This is one of a most common questions in this StackOverflow group. When changing predefined CSS rules you must use !important keyword. Changes will usually not work without it. For example if you want to change input button style background (from a previous example, wrapped in a div) you would do it like this:
#change-me .ui-input-text {
background-color: red !important;
}
If nothing else works change original CSS file(s)
jQuery Mobile can have 1 or 2 CSS files. When using one file both theme and structure is included, or they can be separated into two files. This is useful if you want to change CSS directly. Theme CSS can be easily imported and exported into theme roller without affecting structure CSS file.
One last thing, some things can only be changed by modifying original structure CSS file. For example jQuery Mobile uses a horrible blue glow effect to show when some element has been pressed. It can be removed only directly from structure CSS file.
The solution lies in CSS specificity within your own additional CSS file. All you need to do to override any formatting in JQM is to first apply an id to the element you wish to override JQM formatting with your own CSS.
Next, in your own CSS, specify that the class be applied to the id of the container.
As an example, I'll remove the JQM border from an image link below.
#img_button_1 .ui-btn-inner {border: none !important;}
Where #img_button_1 is the id of the HTML anchor element.
<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
href="http://www.google.com" target="_blank"><img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>
It's as simple as that.
One more important thing, and that is that load order of the external CSS files is significant, and you will want to load your own CSS after JQM CSS.
I have forked a working example at jsFiddle below.
http://jsfiddle.net/Z8Xnx/14/
The biggest benefit with this approach, is you do not have to alter the JQM CSS at all, and can leave it alone. This becomes important if your want to import your JQM back into the ThemeRoller tool at a later date. If you modify the actual JQM CSS by hand, you may have an issue successfully importing your JQM back into ThemeRoller again.
I have successfully used this approach to resolve every JQM CSS conflict I have run across since figuring out this specicivity requirement issue.
Hope this helps everyone with an easy solution to their JQM style conundrums.
** UPDATE **
It has been noted to me that this method does not work with the latest version of JQM (1.3.0b1), and that is not correct. I have investigated and found this to be a problem with the implementation of this version of JQM at jsFiddle. To prove this, I have put up an example page on my own space with the exact same code as that shown in the jsFiddle example. This means as of my writting, you really can't trust anything at jsFiddle using the lastest version of JQM from the options. Just a heads up, and you can find the working implementation at...
jQuery Mobile CSS Override Example
If you are looking to simply change the styling then you can use the jQuery Mobile themeroller.
http://jquerymobile.com/themeroller/index.php
Otherwise, I would suggest using another stylesheet rather than directly editing the jQuery mobile stylesheet.
If you are looking to reduce the number of files that you are serving to your visitors then I would compress both stylesheets and then just insert your styles below their styles as a production copy. That way, you can keep them compressed and combined for production, but you could keep them separate for easy upgrading later and for development ease of use.
I hope to to drag a text string and its hyperlink from an HTML page to a TEdit.
For example
displays aaa
actual string is <a href=somewhere.html>aaa</a>
I try to use drag&drop vcl, but found that it only can catch aaa itself rather than the string and its hyperlink.
Welcome any comment
Thanks
interdev
Go download Anders Melander's free Drag and Drop Component Suite. In it you'll find TDropURLTarget to put on your form. Set its Target property to refer to your TEdit control, and when a URL is dropped there, the component's URL and Title properties will be updated so you can inspect them during the OnDrop event handler. The suite comes with several examples; TargetDemo has the basics.
Another good library is Raize DropMaster.
Anyway, I believe that it IS possible to do what you want, but maybe it'll turn out to be HTML or RTF drag/drop? Hard to say. I can, for example, drag/drop the list of hyperlinks on this page (over there to the right, under "RELATED") into Word, and they all show up, with hyperlinks on board.
So it IS possible. But I suspect that WinWord is dropping as HTML.
Anyway, Rob's suggestion of looking at examples is a good one - between that library and Raize, you should find something that you can use as a prototype.
We are using the FreeTextBox 3.1.6 on an intranet. The control appears on an ASP.Net project built in Visual Studio 2008.
When clients enter tabs in the text box, those tabs do not get preserved at postback. Rather, the tabs are lost. Other text formatting, like bold, italics, or font size are preserved.
Even when the postback event that occurs on the web page does not save anything to a database we are loosing the tabs. According to http://wiki.freetextbox.com/default.aspx/FreeTextBoxWiki.Installation the JavaScript and XML used by FreeTextBox are stored in a dll. So I cannot edit the contents of those files.
Has anyone encountered this issue with FreeTextBox? If so, how did you resolve it?
Here is the behavior that occurs. Enter text with tabs in the FreeTextBox control.
alt text http://img132.imageshack.us/img132/4826/ftb1postcz4.gif
Then select the "Save" button. This is a command button that posts back the page. In my test scenario nothing gets saved and loaded from a database. The FreeTextBox control is strictly displaying text that was posted. My guess is that the mechanism handling that is in ViewState, but I'm not sure about that.
alt text http://img132.imageshack.us/img132/175/ftb2postbd6.gif
As you can see, all of the tabs are gone. Even the tabs inserted between words are gone.
Thanks for your help.
Ken
Setting TabMode to "InsertSpaces" did not resolve this. My source code for instantiating the control is below. Pictures I posted didn't previously show up. Visit these links to see them.
http://img132.imageshack.us/img132/4826/ftb1postcz4.gif
http://img132.imageshack.us/img132/175/ftb2postbd6.gif
<FTB:FREETEXTBOX id="txtDocument" EnableHtmlMode="False" Width="100%" runat="server" AllowHtmlMode="True"
StripAllScripting="True" Height="400px" FormatHtmlTagsToXhtml="False"
AutoGenerateToolbarsFromString="true"
ToolbarLayout="ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu, FontForeColorPicker| Bold, Italic, Underline, Strikethrough; Superscript, Subscript, RemoveFormat| JustifyLeft, JustifyRight, JustifyCenter, JustifyFull; BulletedList, NumberedList, Indent, Outdent; CreateLink, Unlink, InsertImage, InsertRule| Cut, Copy, Paste; Undo, Redo, Print"
TabMode="InsertSpaces"
>
I found the answer. The original programmer had code that intercepted the contents of the textbox when it was submitted. That code reformatted the text for special currency characters like the Yen, Euro, and Pound.
Here is what the code looked like.
Dim hstrg As String = txtDocument.Text
Dim f As New FreeTextBoxControls.Support.Formatter
hstrg = f.HtmlToXhtml(hstrg)
What fixed the issue was commenting out that HtmlToXhtml() method. We don't need the contents to be Xhtml compatible, so this was a viable option for us.
i've been using free text box in some of my former development, but it had some quirks and wouldn't work right in IE.
try moving to FCKEditor, or TinyMCE. they seem like much better experience than FTB. i've chosen FCK, and i think WordPress uses TinyMCE. try them if a switch of editor is an option.