The default position is over the fields, but I want it right from it.
I tried to hide the labels and use <Col>s to show text besides of the inputs, but newforms crashes when I add normal text into <RenderForm>
we've been able to style them directly with css (less) like so:
#id_field {
display: flex;
text-align: center;
margin-bottom: .75em;
li {
flex: 100%;
}
label {
display: block;
input {
display: inline-block;
}
span {
display: block;
}
}
}
when you inspect them you can get their "id" and target them in this way.
Related
I'm using React and styled-components. I would like to hide the Navbar when user switch full screen mode by pressing F11 (Chrome).
I have tried following:
const NavbarContainer = styled.div`
height: 30px;
background-color: mediumseagreen;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
& :fullscreen {
display: none;
};
`
What else is needed to make it work? Currently the Navbar is still visible when I go fullscreen.
We have two options to resolve the problem with fullscreen mode.
First solution:
In styled-components you will need to use the #media all and (display-mode: fullscreen) instead of the :fullscreen pseudo-class, because this pseudo-class works only with Fullscreen API.
This will triggered with F11 key as an on/off switch, however we cann't use the Esc key to cancel the fullscreen mode.
const NavbarContainer = styled.div`
height: 30px;
background-color: mediumseagreen;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
#media all and (display-mode: fullscreen) {
display: none;
}
`;
Second solution:
We using Fullscreen API, when we will call this API after that the :fullscreen pseudo-class will works. This approach is good if you want to use Esc key to exit from fullscreen mode, also to assign another key (like Enter) or element (like button) to trigger fullscreen mode.
The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until fullscreen mode is shut off. MDN
Although, if we using #media query in our css instead of :fullscreen pseudo-class, we also can to use F11 key as a trigger. As a plus, with this approach, we will recive two different notifications about of exiting the fullscreen mode.
import { useEffect, useRef } from "react";
import styled from "styled-components";
const NavbarContainer = styled.div`
height: 30px;
background-color: mediumseagreen;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
#media all and (display-mode: fullscreen) {
display: none;
}
`;
const FullScreenButton = styled.button`
padding: 0.5rem 1rem;
#media all and (display-mode: fullscreen) {
display: none;
}
`;
export default function App() {
const refNavbar = useRef<HTMLDivElement>(null);
useEffect(() => {
const navbar = refNavbar.current;
const actionFn = (event: KeyboardEvent) => {
if ((event.key === 'Enter') && navbar) {
navbar.requestFullscreen();
return;
}
};
document.addEventListener('keyup', actionFn, false);
return () => {
document.removeEventListener('keyup', actionFn, false);
};
}, []);
const fullScreenOnClick = () => {
const navbar = refNavbar.current;
if (!navbar) return;
navbar.requestFullscreen();
};
return (
<div className="App">
<NavbarContainer ref={refNavbar}>Navigation</NavbarContainer>
<section>
<p>(User content!)</p>
<FullScreenButton onClick={fullScreenOnClick}>Fullscreen mode</FullScreenButton>
</section>
</div>
);
}
Caveat: Fullscreen API with assigned F11 key as trigger.
If you will try to assign the F11 key using the Fullscreen API to be able to exit also with the Esc key you will get strange behavior. It may be the cause of two different events Fullscreen API (with Esc key) and F11 key.
Fullscreen API issue with F11 and Esc buttons.
F11 key can exit programmatic-fullscreen, but programmatic-exitFullscreen cannot exit F11-fullscreen. Which is the problem you are running into. Also, Esc key cannot exit F11-fullscreen, but does exit programmatic-fullscreen. Fullscreen API not working if triggered with F11
Additionally:
Another interesting issue about :fullscreen pseudo-class. If you want to hide more than one element (like a button), this doesn't works as it will be bind to the current element. It's better to use the #media query.
Navbar and botton have a :fullscreen pseudo-class
The way it works:
const NavbarContainer = styled.div`
height: 30px;
background-color: blueviolet;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
#media all and (display-mode: fullscreen) {
display: none;
}
`;
The :fullscreen pseudo-class is used for a different purpose. Using javascript you can represent any DOM element to full-screen.
For example, if you will do the following thing:
document.querySelector('#navbar')?.requestFullscreen()
...then #navbar:fullscreen will work.
I think that was it
const NavbarContainer = styled.div`
height: 30px;
background-color: mediumseagreen;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
&::-webkit-full-screen {
display: none;
}
`
This problem is costing my sanity.
I want to use the React Fluent UI Carousel component with thumbnails and place it in the middle of my container, everything works fine till I add more than 8 slides. The carousel moves to the left side of the screen and eventually disappears from the viewport.
I am using the default code snippet from Fluent UI IS AVAILABLE HEREFluent ui thumbnail carousel
enter image description here
I have solved the problem, just overwrite the following properties:
.ln {
width: 600px;
}
.ui-carousel__navigation {
margin-top: -55px !important;
position: absolute;
display: flex;
flex-flow: wrap;
justify-content: space-between;
width: 1000px;
margin-left: -200px;
}
.nb {
transform:none !important;
}
.ol {
transform: none !important;
}
.nc {
transform: none !important;
}
Is it possible to define primary and hover images for an <input type="image"> element in CSS in JS? I'm trying to implement a different image on hover, but can't get the syntax correct.
margin: 40,
background: "url(/btn_google_signin_light_normal_web.png)",
"&:hover": {
background: "url(/btn_google_signin_light_focus_web.png)"
}
}
You can try
IN your CSS
.yourClass {
width: 200px;
height: 200px;
background: url("images/iamge1.jpg") no-repeat;
display: inline-block;
}
.yourClass:hover {
background: url("images/image2.jpg") no-repeat;
}
So this is my problem, I am trying to print some components in React using window.print, my components have defined sizes say 5cm x 5cm, I have hidden all other components in the print page (note that the styling of the whole page is somehow complex to post here), the problem is that my components get resized when on the print page. I have looked a lot but nothing has worked for me.
Note that when I tested the same print in a different page (with no complex styling) it worked fine. So is there any way to pass the styles to the print window or "Override" the styling so that my components get rendered correctly?
Thanks.
EDIT: Here is my CSS. This is working fine in a fresh app so there must be something I used messing things up, I removed all #media print from Bootstrap CSS files but no luck.
I tried to put the code inside as well as outside the #media print but no luck as well.
As far as I know media should render real physical lengths and units, any help would be appreciated.
Thanks again
.print-only {
display: none;
}
#media print {
#page {
margin: 0;
size: a4 !important;
}
body {
margin: 0.5cm !important;
padding: 0;
}
.print-only {
margin-top: 20px;
display: block;
}
.no-print {
width: 100%;
margin: 0px;
display: none;
}
.Container {
position: relative;
display: block;
border: 3px solid black;
width: 6in !important;
height: 2in !important;
margin: 0;
padding: 0;
text-align: start;
}
.labels {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 6pt;
font-style: normal;
font-variant: normal;
height: 13px;
}
.container2 {
height: 39px;
font-size: 8px;
font-weight: 550;
position: absolute;
top: 20px;
right: 1in;
line-height: 13px;
text-align: center;
}
}
Recently, I've encountered with the same issue while designing a print template in React. I was totally wrong in my understanding that whatever styles I write in my CSS files will apply. Then I found there is certain semantics while are required to be followed while designing an HTML print template.
Take a look at this link. This will be very helpful for your design.
I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.
Please see below image.
How can i fix the search textbox width to react-select width?
Just set
autosize={false}
on the component.
I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works
<Select
value={this.state.passwordExpire}
onChange={this.updatepasswordExpire.bind(this)}
options={optionsDays}
style={{width: '82%'}}
/>
const customStyles={
// control represent the select component
control: (provided)=>({
...provided,
width:'100px'
})
}
<Select
options={options}
styles={customStyles}
></Select>
This method is stated in react-select documentation. You can adjust select width as per your wish.
You can try with this css.
.Select-input {
position: absolute !important;
width: calc(~'100% - 0px');
}
.Select-value-label {
display: none !important;
}
.Select-value {
position: relative !important;
}
.Select-menu-outer {
width: auto;
min-width: 100%;
text-align: left;
}
.Select-option {
white-space: nowrap;
}
.Select-control {
min-width: 100%;
width: auto;
text-align: left;
}
.Select-control {
table-layout: fixed;
}
.Select-input {
overflow: hidden;
max-width: 100%;
}
Here is the Solution..
.Select-input > input {
width: 100% !important;
}
.Select--multi .Select-input {
display: block !important;
}
.Select--multi .Select-multi-value-wrapper {
display: block !important;
}
This is the proper solution in this case. It's working fine.