I am working with #react-navigation/native 6 and using the headerLargeTitle option.
Depending on the screen size the padding of the title is changing. I could not find solution to adjust this through the documented APIs.
Any idea?
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const PortfolioStack = createNativeStackNavigator();
const PortfolioStackScreens = (): JSX.Element => {
return (
<PortfolioStack.Navigator>
<PortfolioStack.Screen
name="Portfolio"
component={PortfolioScreen}
options={{
headerLargeTitle: true,
headerShadowVisible: false,
headerLargeTitleShadowVisible: false,
}}
/>
</PortfolioStack.Navigator>
);
};
Thank you
Whether to enable header with large title which collapses to regular header on scroll.
For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as ScrollView or FlatList. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify contentInsetAdjustmentBehavior="automatic" in your ScrollView, FlatList etc.
Only supported on iOS.
Detail
Related
I'm using ag-grid 29 in React. I can change the style from Balham to Alpine on the fly. My problem: Neither the heard rows nor the data rows are then tall enough. Is it possible to accomplish this?
Here's the "before" - my table in Balham:
Here's the "after" - my table in Alpine. Please note the text overflowing the row height:
Here are the methods I call after the style change:
gridApi.refreshHeader()
gridApi.refreshCells()
gridApi.redrawRows()
gridApi.sizeColumnsToFit()
The official demo appears to destroy and recreate the entire grid when you change the theme dropdown, by passing a new React key to the grid component:
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const theme = params.get('theme') || 'ag-theme-alpine';
setGridTheme(theme);
}, []);
<div id="myGrid" className={gridTheme}>
<AgGridReactMemo
key={gridTheme}
// ...
/>
</div>
Actual users probably won't change the theme very often, so it's likely not worth putting effort into doing this elegantly. It may be possible to fix everything by calling various functions, but I didn't look in to it.
I am attempting to use Font Awesome in my MVC5 Html grid, as shown in my code segment below. On executing the code below, the grid renders correctly but the text within the #Html.Raw() declaration is displayed in the cell on the grid, as opposed to the Font Awesome icon. I am using Font Awesome elsewhere on the view, outside of the grid and the icons render correctly, so I'm confident that Font Awesome is installed and configured correctly.
#helper CustomRendering(Customer customer)
{
if (customer.RequiresAssistance)
{
#Html.Raw("<i class=\"fab fa-accessible-icon\"></i>");
}
}
#Html.Grid(Model).Columns(columns =>
{
columns.Add().RenderValueAs(o => CustomRendering(o));
})
#Html.Grid(Model).Columns(columns =>
{
columns.Add().Sanitized(false).Encoded(false).SetWidth(15).RenderValueAs(o => CustomRendering(o));
})
I'm using the react-virtualized ScrollSync component to sync the scrolling of a couple fixed headers — very similar to the example in the docs.
My question: is it possible to provide an initial scrollTop value to ScrollSync (or its children)? I realize that the better way to do this would be through use of scrollToRow on the Grid component that controls the scroll position — for what it's worth, I am using scrollToColumn for this purpose. But because, vertically, I'm only rendering one very tall cell, scrollToRow doesn't provide the fidelity needed.
I do realize that this is a slightly bastardized use of a grid component, but it all works quite nicely as a horizontal, infinitely loading scroller, while allowing me to re-use an existing component. If I could just set an initial scrollTop, I'd be golden.
Thanks.
Unfortunately this is not currently supported without a bit of a hack.
First, the reason for the hack: Scroll offsets flow in one direction with ScrollSync (main Grid to synchronized Grids). This means that even if ScrollSync accepted default left/top offsets as props- they would get overridden by the first render of the main Grid. I think this is probably the right thing to do to avoid ugliness inside of react-virtualized.
However you could work around it in application code like this if you wanted to:
class YourComponent extends Component {
render () {
// These are arbitrary
const defaultScrollLeft = 300
const defaultScrollTop = 500
return (
<ScrollSync>
{({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => {
if (!this._initialized) {
scrollLeft = defaultScrollLeft
scrollTop = defaultScrollTop
this._initialized = true
}
return (
<div>
<Grid
{...otherSyncedGridProps}
scrollLeft={scrollLeft}
/>
<Grid
{...otherMainGridProps}
onScroll={onScroll}
scrollLeft={defaultScrollLeft}
scrollTop={defaultScrollTop}
/>
</div>
)
}}
</ScrollSync>
)
}
}
i have i problem and tried different solutions, but no success.
I have an amChartXY chart, which has white labels and legend text is white, but when i want to build custom pdf report, i cannot convert those white text into black.
First i have a function which exports chart to base64 string, and i want there to convert the text color to black, but it won't work.
Here is a code snippet of a menu item, that converts to SVG that is saved to global array object.
menu: [
{
class: "",
label: "Save to draft",
click: function() {
var overrideObject = {
backgroundColor : "rgba(255,255,255,1)",
color : "#000",
legend : {
color : "#000"
}
};
var chartObject = this;
chartObject.capture(overrideObject, function () {
chartObject.toJPG({}, function (base64) {
// charts is global array
charts.push({
name: customName,
chart: base64
});
});
});
}
},
Here the overrideObject is changing the backgroundColor attribute with white ( before is was transparent ) but it's not changing font color. Also i have tried different attributes to add, but nothing seems to work.
Is this possible at capture time ?
Here are some images preview of what i want to accomplish :
AmChart for export isn't that well documented, so any feedback would be welcome
The overrideObject you're passing only accepts the same parameters listed in the list of export settings. If you need to change the appearance of specific elements on the chart, you need to use the reviver callback mentioned in the annotation settings section to selectively apply your modifications. For example, here's how to target the value axis labels:
"export": {
"enabled": true,
"reviver": function(nodeObj) {
if (nodeObj.className === 'amcharts-axis-label' && nodeObj.svg.parentNode.classList.contains('amcharts-value-axis')) {
nodeObj.fill = 'rgba(255,0,0,1)';
}
},
// ...
}
Note that you need to use SVG attributes to change the appearance, so you'll have to set the fill to change the color of the text element.
Codepen demo
I am struggling to force Masonry to properly position the elements of the boostrap's full width grid.
As you will see home page is using the container with fixed width of the elements and everything is working as expected. But on the other hand, news page is using the full width fluid system and for some reason ,,blocks" on the news page won't fit the window.
Here is my call for masonry:
self.$("#masonry").masonry({
itemSelector: '.parallax',
isAnimated: !Modernizr.csstransitions,
columnWidth: function( containerWidth ) {
return containerWidth / 6;
});
And here is an example link http://wheniamplaying.com/kitchenV3/en/home
Is it possible to use masonry in this scenario?