I am developing a web application using React and Semantic UI React as a front-end framework. The application is tested and works in Chrome, Microsoft Edge, Safari and Mozilla Firefox. However in this last browser I noticed a problem with iframes. The image below shows a modal window with iframe with a pdf. The window opens correctly but as soon as I try to click inside it or scroll the pdf downwards, the modal window is displayed incorrectly.
I tried to identify any problems in the rendered HTML code using the Firefox developer tools (F12) but I didn't notice anything.
I am using Firefox v77.0.1 64bit (latest version) and the modal window is implemented as follows:
<Modal closeIcon open={this.state.open} onClose={this.onClose}>
<Modal.Content>
<Steps ... />
<div style={{ width: "100%", height: "500px" }}>
<Iframe url={...} width={"100%"} height={"460px"} />
<Checkbox ... />
</div>
</Modal.Content>
<Modal.Actions>
<Button color='red' onClick={this.props.onRefuse}>
<Icon name='remove' />
Refuse
</Button>
<Button color='green' onClick={this.props.onAccept}>
<Icon name='check' />
Accept
</Button>
</Modal.Actions>
</Modal>
Related
The burger menu button is gone on mobile, but shows on a resized desktop window.
i use Next.js and have just used the component ""
Screenshots
Image of the button from a desktop resized window.
Here there is no problems...
This is the button that will diappear, from a real mobile device. I tested with 2 iphones 12, and 1 Samsung.
Code
{filters ? (
<Chat
client={chatClient}
theme="messaging dark"
i18nInstance={i18nInstance}
useImageFlagEmojisOnWindows={true}
>
<ChannelList
filters={filters}
sort={sort}
EmptyStateIndicator={NoChannels}
/>
<Channel>
<ChannelInner />
<Thread />
</Channel>
</Chat>
) : (
""
)}
Package version
"stream-chat": "^6.5.1",
"stream-chat-react": "^8.1.2",
I'm using Semantic UI to design a button component having animation. How can I change custom font color inside button?
Below is my code for the button:
https://codesandbox.io/s/interesting-yonath-7qvwl?file=/index.js
you can use inline styling
<div>
<Button color="google plus" animated="toggle">
<Button.Content style={{color: '#f1f2f3'}} visible href="#" secondary>
<Icon name="google plus" /> hi
</Button.Content>
<Button.Content style={{color: '#f1f2f3'}} hidden href="#">
Connect <Icon name="google plus" />
</Button.Content>
</Button>
</div>
I have a login button in home page. When I click on that it will redirect to login page in chrome and edge but not in firefox. I am not able to get how to resolve this. Please help me fixing this.
export default class Welcome extends React.Component{
render(){
let button
if(this.props.status){
button = <LogoutButton onClick={this.props.logout} />;
}else{
button = <LoginButton />;
}
return(
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Typography variant="h5">
Welcome
</Typography>
{button}
</header>
)
}
}
function LoginButton() {
console.log("test")
return (
<Button variant="contained" color="secondary" style={{margin: '2rem'}}>
<Link to="/login">Log In</Link>
</Button>
);
}
function LogoutButton(props) {
return (
<Button onClick={props.onClick}>
Logout
</Button>
);
}
And in console it is showing the below warning in only firefox
"The Components object is deprecated. It will soon be removed"
It's confusing behavior due to the browser differences, but the Firefox behavior is reasonable.
In the end, by having a Link inside a Button you are producing html like the following:
<button>Log In</button>
In Firefox, it appears that the button receives the click event and doesn't pass it through to the a element.
One way to fix this is to have the Material-UI Button use Link as the outer component:
<Button
component={Link}
to="/login"
variant="contained"
color="secondary"
style={{ margin: "2rem" }}
>
Log In
</Button>
This also fixes some styling issues (text being underlined/blue) with your initial approach (though you may have overridden the default a styles in your app so that this wasn't noticeable).
Below is a CodeSandbox demonstrating three login button approaches:
The solution approach with component={Link} to="/login" as props on Button
A simple <button><Link to="/login">Log In</Link></button> version to show that this also doesn't work in Firefox
Your original version
I've stacked with some strange issue. When I create a menu block with a button inside of it, I'm expecting to get a "Regular" button, but getting, kind of, Menu Item View.
Instead of
<Menu inverted>
<Menu.Menu>
<Menu.Item header>
<Image className="logo" src={logoImg} avatar />
</Menu.Item>
</Menu.Menu>
<Menu.Menu position={'right'}>
<Menu.Item>
<Button positive>Sign up</Button>
</Menu.Item>
</Menu.Menu>
</Menu>
What could be wrong?
Your code working fine. Here is the working codepen. Issue may be some other custom styles will override your component Button styles.
I've created a Modal in Onsen which works great, but sometimes my content spans beyond the page boundaries. The Modal does not naturally support scrolling and the <Scrollable /> element is not supported by the React support in Onsen so I've attempted to make a <section/> scrollable like so:
<Modal isOpen={this.state.selected.title !== undefined} onDeviceBackButton={()=> this.setState({selected: {}})}>
<section style={{margin: '16px', overflow: 'auto', height: '100%'}}>
<h2>{this.state.selected.title}</h2>
{myReallyLongContent}
</section>
</Modal>;
This appears to work when testing on my desktop browser (in "Chrome Mobile testing"); however, when testing on my actual mobile device, the scrolling does not work (via touch swiping). Is there a workaround?