In my React app I'm exporting a html table to Excel by saving the rendered html (which Excel knows how to open) to a file. I'm also trying to set 'mso-number-format' style property on each <td> to tell Excel what number format to use per cell. However, React doesn't like this code:
<td style={{ 'mso-number-format': '\\#' }}
In console it logs:
Unsupported style property mso-number-format. Did you mean msoNumberFormat? Check the render method of `ComponentX`.
Is there a way to get around this without traversing the DOM and manually do something like:
node.setAttribute('style', 'mso-number-format: \\#')
Styles attributes in React JSX are written in camelCase notation and not as you have defined. Define it like
<td style={{ 'msoNumberFormat': '\#' }}>
The docs in react says this
In React, inline styles are not specified as a string. Instead they
are specified with an object whose key is the camelCased version of
the style name, and whose value is the style's value, usually a string
Style keys are camelCased in order to be consistent with accessing the
properties on DOM nodes from JS (e.g. node.style.backgroundImage).
Vendor prefixes other than ms should begin with a capital letter. This
is why WebkitTransition has an uppercase "W".
Inline styles docs
as react suggests you to and it will solve your problem.
Also I think it should be a \# instead of \\# for text formatting.
You can also try it as
var styles = {
msoNumberFormat: '\#'
}
<td style={styles}>
Related
in JHipster application I want to display a default text within a html element when a translation is missing.
I use angular ngFor directive to display elements in an array, some of which have a translation and some of which are inserted by a user, and therefore have no translation in i18n json. I couldn't find any documentation that explained how to use jhiTranslate
I was thinking about syntax like this
<div jhiTranslate="example.1">Default Text</div>
and if this particular translation was missing a "Default Text" would be shown. for now it shows "translation-not-found[example.1]".
Is there a way to achieve this using jhiTranslate?
I'm working on integrating a PHP app with the DocuSign REST API. I'm creating new documents from HTML, similar to document 1 in the example here. The structure comes through just fine, but the margins on the resulting document are way too wide for my purposes, and I can't find a way to set them to a custom value. It seems to ignore the margins on my HTML body and just set it to a default of 1 inch.
Normally if you create a document using a pdf for example, the custom margins on the pdf would be used, so it seems like there should be some way to do this for HTML. Am I missing something?
I would try a negative value for the outermost div's margin value. Eg
<div style="margin:-2em;">
<p>Blah blah blah</p>
</div>
This question regards website programming. My primary languages are c++/c# and I don't know much about web development, except that say I understand html and css. That's why I'm looking for a relatively simple solution, preferably something out of the box. I don't have any experience with JavaScript, but for the sake of this project I'm willing to learn it if necessary.
Let's say I have a database, where each entry is about a book. It contains the fields: title, author(s) and publication date.
I would like to create a simple website with a search box that has this dynamic result feature, so that you get suggestions after you type in a few letters. All those suggestions, as well as search results, need to be based purely on the database.
This could be a static website or based on any Content Management System, I'm familiar with Joomla, but was unable to find an out-of-the box component that would do just that. All those search modules search the entire website and I only need to search the database.
Probably I can help you with how to implement this feature. We used to call this feature as autocomplete menu.
First you decide minimum characters to populate autocomplete menu. For example 2
By using javascript you write keyup event. Once the characters count reaches to the minimum character count. You send AJAX request to the server.
The server should process this request and do the database search and form a json or xml response or plain text to the client.
The client parses that response into javascript object and construct a dynamic html for autocomplete menu with the data and render it into the DOM hence display's just below the search text box.
Now if you want to display the first result inside the textbox as you type. Here is the method I can suggest as similar as google search box
Place one label or span just below the input text box. By using css make its position exactly match with the position of the text box. Make sure the starting of text of both input text and label matches. Make the text color of the label less brighter than the font color of text. The font size and font family of the label should match the input text field's style. Now by using Javascript display the first or most matched text inside the label. Please find the sample code below
<!DOCTYPE html>
<head>
<style>
label {
position:relative;
}
body, input {
font-family: 'verdana';
font-size: 12px;
}
</style>
</head>
<html>
<body>
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="Matched Text" /><br>
<label> Matched Text</label><br>
</form>
</body>
</html>
I'm curious what is the right way to have the content (e.g. div) occupy 100% of t:panelTab inside of t:panelTabbedPane. It appears that the content gets rendered within div or span for which there's no way to specify style. The only way I was able to do that was using absolute layout. Is there a better way?
Did you try providing a custom CSS class using the tabContentStyleClass attribute for <t:panelTabbedPane>? Suppose you call it ownStyleClass, the pane gets rendered like
<tr class="myFaces_panelTabbedPane_contentRow">
<td class="myFaces_panelTabbedPane_pane ownStyleClass" colspan="8">
which should allow for any custom layout.
I have been working on a Spotify app which displays a track listing using code like this:
var tpl = new models.Playlist();
var tempList = new views.List(tpl);
body.document.appendChild(tempList.node);
tpl.add(track1);
tpl.add(track2);
...
tpl.add(trackn);
However, this only displays the contents of the columns and doesn't display the headers (Track, Artist, Album, etc.).
Ideally I want to include these, as the ui guidelines say "For best clarification please add a header of column descriptions to your tracklist".
Is there a standard way to include these headers, or does this require something custom (in which case I would think it might be tricky to line them up exactly with the columns)?
You should be able to restrict to a specific size. Use the inspector to figure out all of the class names and then set each field to be a certain width, then you should be able to put a div above the list with the same class names and the header text there.
For instance:
.sp-track-field-name { width: 150px; }
Then
<div class="list-header">
<span class="sp-track-field-name">Title</span>
</div>
<div id="playlist" />
Where playlist is the node you attach the List view to.
Otherwise, use javascript to get the actual width of the columns and set it programmatically