I have to read a text from a managed bean, and then display the text in a pop-up. The pop-up gets displayed when a link is clicked. The requirement is to style the text, change the color and bold some portion of the text before displaying on the web page. I'm able to display the text with the tags on the web page but the text is not getting bold. Please help me with the solutions to it. Thank you!
<af:popup id="testPopup">
<af:dialog id="d2" type="ok">
<af:outputText value="TEST DESCRIPTION" id="ot2"/>
<af:panelBox text="" id="pb5" showDisclosure="false">
<af:outputFormatted value="#{pageFlowScope.TestBean.testMessage}"
id="ot3" inlineStyle="width:300px;display:inline-block;word-
wrap:break-word"/>
</af:panelBox>
</af:dialog>
</af:popup>
//Bean:
String testMessage = "<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit. Quisque r finibus consequat. Praesent egestas veneet euismod magna."
Tell us your exact jdev version, please.
If you run a .jspx page you should escape the '<' as ⁢
Try
<af:outputFormatted value="<b>Bold</b> not bold" id="of1"/>
Timo
To have embedded html inside an outputText in ADF 11g you can set the af:outputText attribute escape="false".
In your case, replace your af:outputFormatted by the following :
<af:popup id="testPopup">
<af:dialog id="d2" type="ok">
<af:outputText value="TEST DESCRIPTION" id="ot2"/>
<af:panelBox text="" id="pb5" showDisclosure="false">
<af:outputText value="#{pageFlowScope.TestBean.testMessage}" id="ot3" noWrap="true" escape="false"/>
</af:panelBox>
</af:dialog>
</af:popup>
Related
I am writing a "Terms of Service" page using ReactJS and my idea is to copy the contents of the file tos-text.txt in the component at build time, to avoid fetching time when the page is opened.
I tried as follows, but with poor results:
<h2>Terms of Service</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in scelerisque odio, sed
consequat ante. Donec lectus tortor, ullamcorper quis risus nec, cursus hendrerit libero. In hac
habitasse platea dictumst. Quisque et posuere urna. Suspendisse convallis faucibus nulla, non
egestas libero aliquet non. Donec tincidunt purus sed sem suscipit feugiat. Pellentesque rutrum
blandit gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Pellentesque erat urna, lobortis sed turpis a, aliquet aliquet lorem. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis
nibh et mi ullamcorper mattis eu eget lectus.
</p>
import { Container } from 'react-bootstrap'
// Page content
import TosText from 'config/tos-text.txt'
// --- Terms of Service ---
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<div dangerouslySetInnerHTML={{ __html: TosText }} />
</Container>
)
}
export default Tos
Currently the page only shows the link to the generated txt file (/static/media/tos-text.dc220bee.txt).
EDIT:
As #jsejcksn suggested (source-assets), I've tried to install react-app-rewired, using this config-overrides.js:
module.exports = function override(config, _env) {
let rules = config.module.rules[1].oneOf
rules.splice(rules.length - 1, 0, {
test: /\.txt/,
type: 'asset/source',
})
return config
}
But when I try to start the test server, it says:
$ react-app-rewired start
Failed to compile.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module.rules[1].oneOf[8].type should be one of these:
"javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
-> Module type to use for the module
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Thanks to the suggestion given to me by #jsejcksn I succeeded in my intent.
I will add the solution for anyone who needs it:
1. Install dependencies
$ yarn add react-app-rewired raw-loader
2. Create config ovverride
config-overrides.js:
module.exports = function override(config, _env) {
let rules = config.module.rules[1].oneOf
rules.splice(rules.length - 1, 0, {
test: /\.txt$/i,
use: 'raw-loader',
})
return config
}
3. Include the txt into the component
// Page text
import PageText from 'content/page.txt'
const Component = () => {
return (
<div className="text">
<div dangerouslySetInnerHTML={{ __html: PageText }} />
</div>
)
}
export default Component
(P.S. I bet there's a loader that converts the file to a ReactComponent like for SVG files, but I didn't go any further than that)
You can simply use "embedding" to display your static file within a React component.
Using <embed>:
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<h2>Terms of Service</h2>
<embed type="text/html" src={TosText} />
</Container>
)
}
Note that with this approach you can't use any markup in your imported text file -- it will not render as markup, but simply as text, that's why the title is outside the <embed> in the example above.
This should render something like:
The content will be scrollable if it doesn't fit in the default <embed> box -- but you can control its size with styles or width and height attributes.
Using <iframe>:
Move your static document to the public folder of your app, and change the extension to .html, and then link to it simply:
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<iframe title="Terms of Service" src="./tos-text.html" />
</Container>
)
}
And this should look like this:
Again, this is just default look, you can change it with styling.
You can also use <embed> with the second approach (file in the public folder):
<embed type="text/html" src="./tos-text.html" />
You can see a live example on codesandbox.
I am newbie in react native animations. I am using react native animated to move menu right and push all content to right without cutting text, but as you see it is not wrapping.
I have already tried these solutions:
Using flexShrink for the Text component
flex: 1 and flexWrap to the parent View element
but nothing has worked, could somebody give me some advice?
`<Animated.View style={boxValue.getLayout()}>
<Text style={{flexWrap: 'wrap'}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
dapibus massa eu quam porttitor, id suscipit felis volutpat. Duis
tempus turpis
</Text>
</Animated.View>`
What you are trying to do is entirely possible using the Animated API. You can wrap the text component in a Animated.View that is shifted to right using an Animated.Value combined with styling the text with flexWrap: 'wrap'. That seems to be what you were going for, but perhaps you are not updating the width of the text container? Here is a snack showing the general idea in action.
I'm using the <Card> component from Semantic-UI-React. I have a group of cards displaying some random information. I have the extra prop defined which renders a button. My idea is to have this button, when clicked, toggle/expand a div to display more information. I have looked around and not been able to find much on how to achieve this.
I looked into <Accordion> from semantic ui as well, but have not been able to get it to play nicely nested inside the card component.
I created a sandbox to show what I have so far and the general look of what I explained above.
For brevity I will only post the code of one card out of the group below.
<Card color="blue">
<Card.Content header="Elliot" textAlign="center" />
<Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
<Card.Content extra>
<Button basic circular icon size="tiny">
<Icon name="plus circle" />
</Button>
Show More
</Card.Content>
</Card>
I agree with #brandon-r that you can handle the extra content being show by handling a state object (in my case an array). What I did differently from his example was to take advantage of the <Card.Content extra> component, which handles all the styles issues.
To handle opening and closing the extra content, I used a simple reducer. I like to use the useReducer hook on those UI interactions that need a more complex state handling. Then I created three components: one that shows the extra content when opened, another that shows the button to display the content, and a third one that toggles between the two. I did it this way to be able to generalise it in the future.
Anyways, here is the link to my forked CodeSandbox with my take on the solution:
https://codesandbox.io/embed/semantic-ui-card-extra-content-toggle-kybt2
I hope it helps
Edit #1
Added style={{height: "100%"}} to the card so they mantain their size when one of the cards is opened.
Edit #2
Add picture showing a card with a long description.
<Card color="blue" style={{ height: "100%" }}>
<Card.Content header="Elliot" textAlign="center" />
<Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
<ExtraContentAccordion
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac commodo diam, et tincidunt massa. Sed aliquet tortor purus, in pulvinar enim mattis ac. Maecenas vestibulum cursus lorem, quis fermentum enim lacinia a. Ut nec feugiat nisl. Morbi finibus hendrerit diam, id iaculis nibh feugiat sed. Sed non justo turpis. Fusce neque quam, facilisis eu aliquam vitae, hendrerit nec nulla. Integer metus sapien, dictum eget viverra et, dictum in lectus. Integer vitae dolor ut libero dictum tristique eget non nunc. Suspendisse diam urna, pretium sed elementum sed, fermentum eu leo. Donec augue tortor, rhoncus id pulvinar ac, fringilla eu est. Duis et ante tristique dui molestie maximus at ut enim. Curabitur facilisis tempor lorem quis scelerisque. Maecenas enim leo, mollis at egestas in, vulputate eget risus."
onToggle={toggleCard(1)}
open={state[1]}
/>
</Card>
If you want to expand to show more content, you can keep track of which cards are expanded with some react state. In the UI, you can use the state to determine if you should render the extra content for a particular card.
EX:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Card, Button, Icon } from "semantic-ui-react";
import "./styles.css";
function App() {
const [expanded, setExpanded] = useState({});
const cards = [1, 2, 3, 4, 5, 6];
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Card.Group itemsPerRow={3}>
{cards.map(cardNumber => (
<Card color="blue">
<Card.Content header="Elliot" textAlign="center" />
<Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
<Card.Content extra>
<Button
basic
circular
icon
size="tiny"
onClick={() =>
setExpanded({
...expanded,
[cardNumber]: !expanded[cardNumber]
})
}
>
<Icon name="plus circle" />
</Button>
{expanded[cardNumber] && (
<div style={{ height: 200 }}>
Extra content expanded for card {cardNumber}
</div>
)}
Show More
</Card.Content>
</Card>
))}
</Card.Group>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here is a short sandbox to see what it looks like: https://codesandbox.io/s/modest-mayer-t12ot
I'm using the checkbox hack (well, radio button hack) to control some tabs. This works fine in Chrome and Firefox, but I've noticed that IE11 doesn't update the displayed tab until I resize the window (no media queries involved) or select the element in dev tools' DOM explorer.
To see the issue in action, fire up this test case (http://codepen.io/portable_hole/full/PNJJzz/) and click on the "second tab" text. You'll see the radio button activate, but the lorem ipsum text won't change. Then resize the browser window and you'll observe the text change.
Anyone seen this before? Anyone know a way around it?
Here's the HTML:
<label for="tab1">First Tab</label>
<input type="radio" name = "tab" id = "tab1" class="explorer-selector" checked>
<div class="explorer-card-contents">
Lorem ipsum dolor sit amet ...
</div>
<label for="tab2">Second Tab</label>
<input type="radio" name = "tab" id = "tab2" class="explorer-selector">
<div class="explorer-card-contents">
Proin non justo vel dui laoreet ...
</div>
And here's the CSS:
[type=radio]:not(:checked) + .explorer-card-contents {
display: none;
}
I'm trying to use the popovers from UI Bootstrap in AngularJS:
http://angular-ui.github.io/bootstrap/#/popover
<i class="fa fa-question-circle" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>
It gives me a popover like this:
How can I style change the width of this popover?
From the docs you can use the
popover-class attribute - Custom class to be applied to the popover
<i class="fa fa-question-circle" popover-class="increase-popover-width" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>
In your style sheet
.increase-popover-width {
max-width: 400px;
}
The reason for setting max-width instead of width is that bootstrap has popover-max-width set as 276px.
github bootstrap code
You can achieve it by overriding popover-content class:
.popover-content {
width: 200px;
}
UPDATE:
You can check this in Chrome:
- press F12
- select the magnifier
- click on the element to inspect
- modify its style
Another solution if you have very wide popovers is to allow them to autosize
Just set your css to be like this
.popover {
max-width: 800px; /* optional max width */
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
For me the following worked
.popover {
max-width: 450px;
}
This actually changed the size of the popover white container.
Did you try the popover-append-to-body attribute of the popover component?
The width can be changed easily by overriding the .popover:
.popover {
width: 200px;
}
<style>
.popover {
width: 500px;
max-width: 500px;
}
</style>
In my case both parameters was important and took effect