I use HoverCard Office Fabric UI React component to show preview of images, although I can configure height of the card I don't see similar properties for width. What is a possible solution to set width? I saw property styles?: IHoverCardStyles but don't understand how to use it. Thanks.
HoverCard.styles allows to specify style for the host element but what you are after HoverCard.expandingCardProps property.
One option to specify HoverCard custom width would be to override style via IExpandingCardProps.styles like this:
public render() {
const rootStyle = { width: "800px" }; //set custom width
const expandingCardProps: IExpandingCardProps = {
onRenderCompactCard: this.renderCompactCard,
onRenderExpandedCard: this.renderExpandedCard,
renderData: itemDetails,
styles: {"root": rootStyle}
};
return (
<div>
<HoverCard expandingCardProps={expandingCardProps} instantOpenOnClick={true}>
<div>{itemDetails.title}</div>
</HoverCard>
</div>
);
}
Here is the demo for your reference
Related
I have a specific "doc" in the "docs" section, for which I need the max width to be bigger (because it contains 2 IFrames side by side).
I see that the guy specifying the max-width is: DocPageLayouMain:
But this component doesn't receive as param a specific page. It is the same for all pages. A child of it, DocItem knows the current page (which may communicate via metadata that it needs the bigger size.
However, it doesn't have the "power" to make the width bigger.
Any hints of how I could achieve this?
Thanks in advance :)
I achieved my goal w/ the following modifs. However, I don't like that I've swizzeled a component = DocItem/Layout marked as "unsafe".
import React from 'react';
import Layout from '#theme-original/DocItem/Layout';
import {useDoc} from '#docusaurus/theme-common/internal';
export default function LayoutWrapper(props) {
const doc = useDoc();
return (
<div class={doc.frontMatter.full_width ? "" : "container"}>
<Layout {...props} />
</div>
);
}
custom.css:
main > .container {
/*
We disable this on the "normal" container, i.e. DocPage/Layout/Main.
We want ONLY for this, hence we base our selector on the parent, which is a DOM element: <main>.
We want to reuse this class in DocItem/Layout.
*/
max-width: initial !important;
}
my-page-that-wants-full-width.mdx
---
description: Live demo
hide_table_of_contents: true
sidebar_position: 10
full_width: true
---
# Demo
...
I've changed 'medium' font size with loadTheme like such:
loadTheme({
fonts: {
medium: {
fontFamily: fonts.fontFamily,
fontSize: fonts.fontSize.regular
}
}
)
However, the base Checkbox styles are loading font-size directly from FontSizes here:
https://github.com/OfficeDev/office-ui-fabric-react/blob/ace874ab7e56188a7d6de081915c63025def4e05/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts#L223
I know I can override this on the component itself, but it seems like I shouldn't have to. Is this a bug? Shouldn't the component use theme font size by default?
Yes, Checkbox should be reading font from theme. In fact, in the fabric-7 branch, it does:
https://github.com/OfficeDev/office-ui-fabric-react/blob/14b1d77fc97fffb1c333a3601d62c3e30c4cf3b0/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.styles.ts#L136
Fabric 7 release is planned for May. Meanwhile you should be able to apply your own styling making use of the loadTheme call like this:
const checkboxStyling = (props) => {
return {
text: { ...props.theme.fonts.medium }
}
}
...
<Checkbox label='test' styles={checkboxStyling} />
This works in the following CodePen: https://codepen.io/jasongore/pen/JVwJGO
I have a .js file which holds global data (actually i am going to fill it from website). Here it is:
const DynGlobals = {
HomePageColor: {
color: '#e74c3c'
}
}
/*
or i can set it like this
HomePageColor: '#e74c3c'
/*
export { DynGlobals }
I have a view and trying to set it's style from this file. So far i have tried many things to create another const and set it to view's style but didn't work
const bgColorStyle = {
backgroundColor: {DynGlobals.HomePageColor.color}
}
with or without bracelets it doesn't work. Any advices on this?
React Native has documentation for AutoExpandingTextInput: https://facebook.github.io/react-native/docs/textinput.html
The Problem: When the content of the AutoExpandingTextInput is changed programmatically the height never changes.
For example:
componentWillReceiveProps(props) {
this.setState({
richText: this._addHighlights(props.richText)
});
}
//
<AutoExpandingTextInput ref={component => this._text = component}>
{this.state.richText}
</AutoExpandingTextInput>
Say, for example. the user hits a button that adds a link to the text that wraps to the next line; in this case, the AutoExpandingTextInput never expands, because the height only is measured & changed on the onChange event of the TextInput.
I need some work around to get the content height when no onChange is triggered --- or less ideally, a way to programmatically trigger an onChange to the TextInput.
Are there any solutions????
No need to use the AutoExpandingTextInput plugin any more. The functionality you need is supported (sort of) in react-native now and will resize with a programatic update. Try something like this:
_heightChange(event) {
let height = event.nativeEvent.contentSize.height;
if (height < _minHeight) {
height = _minHeight;
} else if (height > _maxHeight) {
height = _maxHeight;
}
if (height !== this.state.height) {
this.setState({height: height});
}
}
render() {
return (
<TextInput
{...this.props}
multiline={true}
onContentSizeChange={this._heightChange.bind(this)}
/>
)
}
I'm a learning mobile development using Titanium Mobile framework.
I am facing a problem related to application of javascript style sheet.
When I name my jss file same as the js file, to which the style is to be applied, it works fine. But if I name it something else, it don't work. Can anybody tell me a solution. Following is my code sample.
// app.js
var win = Titanium.UI.createWindow({ backgroundColor : '#fff' });
win.add( Ti.UI.createButton({ title : 'Button A' }) );
win.open();
// app.jss, works fine
button { backgroundImage: 'grdadient_img.png'; }
// button_style.jss, don't work
button { backgroundImage: 'grdadient_img.png'; }
I never had much success using more than one JSS file. And if you follow Nandu's links you'll see that it's not really documented very well, likely to be removed from Titanium at some point. I expect that Titanium's Alloy will kill off JSS too.
If you don't want to use JSS (or Alloy yet), there is a neat way to centralise your styles using commonJS modules and optionally underscore.js e.g.
theme.js
var theme = {
tableLabel : {
color : '#3285C7',
backgroundColor : 'transparent',
inactiveColor : '#AAAAAA'
}
}
module.exports = theme;
to use
var theme = require('ui/common/Theme');
...
var myLabel = Ti.UI.createLabel(_.extend({}, theme.tableLabel, {
top : 5,
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
text : "Hello world",
}));
I use _extend to take the settings from the theme and add instance specific settings like size, position etc. Don't forget the first empty object literal in the call to `_.extend()
See http://underscorejs.org/#extend
Ammar, please refer the following links. Hope it will help you
1.How to use jss correctly
2.How Does .jss feature really works in Titanium mobile SDK