I have created a page in react js. I have displayed content on the left side and images on the right side. I want to show the image on full-screen onclick of the image.
Thanks
Sorry for the incomplete questions.
I solved my problem.
on image click I have called below function:
openFullscreen () {
document.getElementById('image')?.requestFullscreen()
}
Just use CSS viewport units: width: 100vw; and height: 100vh;
Related
I am using the #draft-js-plugins/image to display image in my react application. It is working but I can't seem to understand how to style the plugin so as the style my images that are displayed. I read through the documentation and I read that:
The plugin ships with a default styling available at this location in the installed package: node_modules/#draft-js-plugins/image/lib/plugin.css
When I checked this location, the plugin.css is empty. How do I apply style to the images that are displayed by the plugin? My images are covering the entire page.
You can target the images inside the draft.js editor on your component stylesheet. Here is an example screenshot using scss:
Screenshot: targeting draft.js editor using scss
Here is the code block
.DraftEditor-root {
figure {
margin-block-start: .5em;
margin-block-end: .5em;
margin-inline-start: 0;
margin-inline-end: 0;
}
img {
width: 100%;
// height: 200px;
object-fit: cover;
}
}
I'm trying to create a React app that is optimized for mobile and am doing most of the layout using flexbox. I'm having trouble forcing the main container of my app to automatically expand to the full device height.
What rules can I apply, specifically to my html container <div id="react-app"></div> and my main app container <App></App> so that they will always stretch to the full screen height, even when their children wouldn't force them to do so?
You can use
height:100vh
for your App component, but it can looks not perfect on iOS Safari. Also you can set
html, body, #reactapp, .App {
height: 100%;
}
.App {
display: flex;
}
patelarpan's answer here seems to be the most concise solution:
You can achieve this by using "vh" units, and it's a more effective way than using percentages because you don't need to set every parent height to 100% if you want the child's height to be 100%.
.columnContainer {
display: flex;
height: calc(100vh - 60px);
}
Here is an example of the 60px app bar height being excluded from the viewport height.
I replaced the height line in patelarpan's example with this, since I don't have an app bar:
height: 100vh;
root > [data-reactroot] { height: 100% } in your CSS should work.
Or just the tag itself:
[data-reactroot] { ... }
Mobile Menu
Hi- I was hoping to get some help on how to add spacing underneath my custom home icon and my name in my Blogger mobile menu (I attached a pic). I apologize but this is a custom Blogger template but the author doesn't have any time to help me.
Thank you so much! www.thenorthernmagnolia.com
Add this CSS code to your template
#media (max-width: 767px) {
.menu-home-icon img {
margin-bottom: 20px;
}
}
I am trying to customize the grid menu for angular ui grid
By default the menu icon appears in the top right corner of the table. But i want to show it on the top left corner of the table. How can i configure this?
Also I want to change the default icon to a customized one.
This is not something supported by the API, so you will have to do it by changing some of the CSS:
.ui-grid-menu-button {
left: -21px;
width: 20px;
}
.ui-grid-menu-button .ui-grid-menu{
left: -11px;
top: 27px;
}
To change the icon you will have to edit:
.ui-grid-icon-menu:before {
content:'\c363';
}
to whatever you want.
Can anyone have any idea how to make title text of groupbutton not above the icons but under in ExtJS? I was trying to do bbar to the groupbutton but the default td align is to left and I don't know how to change it by css? Thanks for any response.
You can achieve the effect by adding the following CSS to the button:
height: 64px;
background-position: top center;
padding-left: 0px
I this case, I have set the height of the button to be 64px. The will definitely distort the tool bar if you have a combination of default buttons and buttons with the above CSS.