We Keep Coding

Is it possible to align react Fragement?

I am having a react fragment which shows loader on user clicking button.The loader is shown until response comes.Everything works fine ,except that the fragment which has loader, should be aligned to a little right.As of now my fragment code to show loader(Using Wait from spectrum).
<Fragment >
<Wait size="M" />
Please wait....
</Fragment>
How can I move fragment to right by some distance? I cannot use div as it disturbs the layout.I can though align Wait to center by using align property but it does not support any text on that.

Fragments are not rendered in the final HTML so they cannot be selected by CSS. Therefore, you should use something which can be aligned, e.g. a div or other HTML element, and use CSS to create your desired layout.
If using a div disturbs your layout, I'd recommend revising the CSS of the containing object, if at all possible.

ReactJS MaterialUI Stepper breaks on overflow

I have been trying to convince the Material UI Stepper component to fit my needs, that is to say display severl steps and overflow, but it continues doing this:
I don't know how to explain the error... the separators are doing weird things on horizontal overflow. Here is the sandbox. How can I get this working?

TL;DR: 1) Word-break your labels (<StepLabel style={{ wordBreak: "break-all" }}>) so they don't invade layouts among steps and 2) provide an initial width to the stepper (<Stepper ... style={{ width: 64*16 }}>) so it does not use the parent width to do so.
I fixed your pastebin:
NL;PR: You had two styles missing to handle long words and content within a scrollable container:
For 1) the labels' words were bigger than the allotted space to render the steps since 550px is too tight for 16 steps, so they broke the layout, play it safe by not letting lengthy words overflow the label.
For 2) consider given the Stepper component a proportional value (64 (stepper min-width)* 16(stepper count)), and since you want to have a scroller, the width of the scrollable container is used as the initial width of the content, thus you must specify the content(Stepper) so it is not shrunk too much before overflowing.
Note: Those styles I provided are examples, you can customize them to your needs. Also, consider passing those changes via classes.

In React Native, is there a way to make a deeply nested element a full-screen element?

I have a React Native Expo app in which I'd like to make an element full-screen with essentially the following styles:
{
bottom: 0,
left: 0,
position: 'absolute',
right: 0,
top: 0
}
The problem is, I want to do this for an element that is deeply nested within the structure of my screen. As a simplified example, the structure of my current screen is something like the following:
<View>
<View>
<View>
<ComponentA>
<ComponentB>
<ComponentC>
</ComponentC>
<ComponentC>
</ComponentC>
<ComponentC>
</ComponentC>
</ComponentB>
</ComponentA>
</View>
</View>
</View>
What I want to do is set up something in ComponentC so that when you tap a button in that component, it causes an element within that same component to display full-screen.
Apparently though, in React Native, all elements are position: relative by default. As such, when I apply the styles above to the element I want to be full-screen in ComponentC, it doesn't show up as full-screen, but rather as filling the entirety of that particular ComponentC only.
Is there any way to get around this? I was thinking about taking the part of ComponentC that I want to have full-screen and placing it outside of ComponentC and at the top of my screen structure, but then, it's completely separated from ComponentC itself, and then I'd have to also coordinate that separate element so that it works with all of the various ComponentCs on the screen. Also, when I tried doing that, I ran into a bunch of issues with trying to properly maintain state.
Maybe I'm just taking the wrong approach to begin with, but is there a way to get what I want with some simple styling so that a deeply nested element can still be displayed full-screen, or am I going to have to engineer some complex thing to do what I want, and if it's the latter, any recommendations on how to approach this? Thank you.

To show something full screen no matter where you are in the hierarchy, you can use the Modal component: https://reactnative.dev/docs/modal.
Note: this solution will not work out-of-the-box if you want the relatively positioned element to fluidly transition into full screen (so-called hero or shared-element transition) - not sure if that is what you are after.

If you want to split your component, you can communicate from ComponentC to the top component directly with DeviceEventEmitter
in ComponentC:
import {
DeviceEventEmitter
} from 'react-native'
In the function which handle the onPress action of your button you can call DeviceEventEmitter like that:
DeviceEventEmitter.emit('whateverName', { myData: {} })
Then in the top component
DeviceEventEmitter.addListener('whateverName', (myData) => );

React - Highcharts Full Screen black bar

I'm trying to implement an application using highcharts/highstock and I'm facing a problem trying to use the full screen function.
I need to set a fixed hight to my charts and be able to view each chart from my page as a full screen one, but since the height is fixed it stays the same when full screen loads, I've tried the approach from this post but it's not working, if I set height to 100% the chart overflows the page and gets crooped depending on the aspect ratio of the screen.
I´ve also found this working demo, I can't replicate this one. I'm not sure how he's calling the component, also I don't know how the export module (hamburguer menu) is showing up if it's never called.
render() {
return <div className="chart" ref={ref => this.container = ref} />
}
on my application I'm calling the component this way
render() {
return (
<HighchartsReact
highcharts={Highcharts}
constructorType="stockChart"
options={options}
allowChartUpdate
callback={this.afterChartCreated}
/>
)
}
I tried passing an ID to this element to try to set height via CSS but it doesn't work.
I was trying to replicate my application with a working example, I could only do it on a codesandbox because of import structure, but for some reason full screen is not working there, it prompts this message
Full screen is not supported inside a frame.

This demo creates the chart without using Highcharts React wrapper - it's a combination of pure Highcharts JS and React - that's why export menu shows without called it. The Highcharts React wrappers work similarly, but more in 'React way' and gives other opportunities to manage the component.
Back to your issue - I think that a better approach will be defining the height of the Highcharts component as inline React styling. You can achieve by setting it in containerProps object.
<CardContent style={{ padding: 0 }}>
<HighchartsReact
highcharts={Highcharts}
containerProps={{ style: { height: "400px" } }}
options={options}
allowChartUpdate
/>
</CardContent>
Demo: https://codesandbox.io/s/fix-full-screen-253sq?file=/src/CustomGUIChart.js
To test it use the open in new window codesandbox option (button just above the exporting menu hamburger).

How to change the font size of the mdbDatatable

I am using the MDBDatatable for my react project but I'm having some problems. First of all, I want to resize the table to make a smaller version but I don't think there's an option other than the small property on the component. Also, I want to use a smaller font for the entries of the table but I can't find the class that I need to set in the CSS.Also if I use the fixed property then the entries overflow the cells... Is it possible with MDB or I need to find another solution?
<div>
<MDBDataTable
className="OrgTable"
maxHeight="200px"
scrollY
striped
bordered
hover
autoWidth
btn
small
data={this.state.data[0]}
/>
</div>