I want to fill the remaining area on the screen but the height:100% property effect is not working.
Notice the red outlined area which is the radius of the border. The highlighted yellow area is the remaining space on the screen which should have been filled:
Here is the render method of the page. The first Box container is responsible for showing components for the form inputs. The second Box container is not having the desired effect to fill the full page:
render() {
console.log("state: ", this.state);
const {symbol, fromDate, toDate} = this.state;
this.updateAPIData();
return (
<>
<Box display='flex' flex='1' justifyContent='space-around'>
<IndexSelector
id='index'
value={symbol}
onChange={this.onSymbolChange}/>
<SeriesSelector
id='series'
seriesList={Form.seriesList}
onChange={this.onSeriesChange}/>
<DateRange fromDate={fromDate} toDate={toDate} onChange={this.onDateChange}/>
</Box>
// The below container properties are not having any effect
<Box height='100%' border='1px solid red' marginTop='50px'>
<Graph instructions={this.getInstructions()} apiData={this.apiData} />
</Box>
</>
)
}
One approach I have tried is setting the Box height to 100vh:
<Box height='100vh' border='1px solid red' marginTop='50px'>
<Graph instructions={this.getInstructions()} apiData={this.apiData} />
</Box>
But this creates a scrollable page. 75vh fills the remaining area without creating scroll-bar. But this is a manually calculated value. Adding a custom viewport size to each page is not scalable. What is the right way to deal with this issue?
EDIT:
Here is the index.css file:
html, body, #root, #root > div {
height: 100vh
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
Body is not 100vh by default
It happens because you body tag by default use as little height as possible:
You need to add height: 100vh on your body tag in order to change that. After you may use height: 100% to stretch your inner elements
Related
How to give inline css in reacts class component.
I have a css something like this.
{
font-size: 17px;
font-family: Segoe UI Semibold;
color: #565656;
text-shadow: 0 1px 1px white;
}
Now when I am reading this css from the css file this is working fine but my css class is coming from library so writing there is not accessible. So How can I make it inline.
Working
<div style= {{border :"1px solid #ced4da", overflow : "auto",height : "300px"}}>
Not working
<div style= {{font-size: 17px, font-family: Segoe UI Semibold, color: #565656 ,text-shadow: 0 1px 1px white;}}>
Inline css only apply as camel case so how to over come with this. What is an alternate for this.
You cannot add hyphens in inline-css
so you need to change the div element to
<div style= {{fontSize: "17px", fontFamily: "Segoe UI Semibold", color: "#565656" ,textShadow: "0 1px 1px white"}}>
I'm trying to create a website of about five pages for a project using HTML, CSS, and Javascript.
I've created a font family button using all three languages.
The role of this button is to change the font family of the entire website when the button is pressed.
It's not working, and nothing happens when I press the font button on my website.
function fontfamily() {
document.body.classList.toggle("textstyles")
}
body.textstyles {
font-family: Arial, Helvetica, sans-serif;
}
<button type="button" onclick="fontfamily()">Font</button>
<p>Example text</p>
Try out this. Button needs to be given a font-family: inherit style to inherit it's style from it's parent (which is body) instead of taking a style from user style sheet.
function fontfamily() {
document.body.classList.toggle("textstyles")
}
body.textstyles {
font-family: Arial, Helvetica, sans-serif !important;
}
button{
font-family: inherit;
}
<button type="button" onclick="fontfamily()">Font</button>
function fontfamily() {
document.body.classList.toggle("textstyles")
}
body.textstyles {
font-family: Arial, Helvetica, sans-serif;
}
<button type="button" onclick="fontfamily()">Font</button>
!!! hello world !!!
lorem elum ipsum ....
you need to add some text and its working ???
We are doing a YouTube clone for a project and I'm trying to style it. Regardless of what I put for styling it disregards it and nothing is applied.
I have tried adding it on the main div, the link, and it still doesn't work.
import React from "react";
import { Link } from "react-router-dom";
const DisplayVideos = ({videos}) => {
return (
<div >
{videos.map((video, index) => {
// get video id
return (
<div style={{'margin-bottom': '80px'}}>
<Link to={`/video/${video.id.videoId}`}>
<div key={index}>
<img src={video.snippet.thumbnails.medium.url} alt="" />
</div>
<div>
<div >{video.snippet.title}</div>
</div>
</Link>
</div>
);
})}
</div>
);
}
export default DisplayVideos;
styles page:
.display-title{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(29, 50, 67);
}
.display-description{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgb(0, 0, 0);
}
Link{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* CSS just to show the bounds */
border: 2px solid;
background-color: #eee
}
.text {
width: 20%;
inline-size: 10px;
overflow-wrap: break-word;
}
There is no HTML element called Link so you are not targeting anything when you do Link { instead you would need to do:
.link {
// styles
}
Then do <Link className="link" />
https://reactrouter.com/docs/en/v6/api#link
A <Link> is an element that lets the user navigate to another page by clicking or tapping on it. In react-router-dom, a <Link> renders an accessible <a> element with a real href that points to the resource it's linking to. This means that things like right-clicking a <Link> work as you'd expect. You can use <Link reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).
With react you have to use lowerCamelCase for CSS atributes.
Try marginBottom instead of margin-bottom in your component.
Use className='class1 class2 etc.' if you want to use CSS classes in HTML elements
<div className='class1 class2 etc.'>
Or
<div style={{marginBottom: '80px'}}>
I have the problem when click in my title some post. Because I need set title have font-size and line-height is big. When user click between two line, they can't click. If hover in text, it's work.
I added a red arrow with 2 heads in the middle of the 2 lines (click on this to see image)
But user not hover exactly all time, so they will try click many time when start read some post in my website.
Code look like that:
.entry-title {
font-family: Arial,Helvetica,sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
I purposely to width 50% to have 2 line in sample code.
Have any method to fix that? User only hover anything on h3 tag, click on h3 tag and will open link in the a href.
So sorry if my first post is bad. I also research in Stackoverflow before ask this question but can't find the question same my case.
I prefer the simple method to resolve that. Thank you very much!!!
Since you cannot change your HTML structure, you can select all elements with the entry-title class using document.querySelectorAll and add click event handlers to all of them to click the child anchor tag.
document.querySelectorAll('.entry-title').forEach(title => title.addEventListener("click", function(e){
this.querySelector('a').click();
}));
var h3 = document.querySelector(".entry-title");
h3.addEventListener("click", function () {
var a = h3.getElementsByTagName('a')[0];
a.click();
});
.entry-title {
font-family: Arial,Helvetica,sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
cursor:pointer;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
Update:
Use addEventListener on <h3> and simulate click(); on <a> link
Your example could be:
var h3 = document.getElementsByClassName("entry-title");
for (var i = 0; i < h3.length; i++) {
var a = h3[i].getElementsByTagName("a")[0];
h3[i].addEventListener("click", function() {
a.click();
});
}
.entry-title {
font-family: Arial, Helvetica, sans-serif;
padding-top: 2px;
font-weight: 700;
font-size: 26px;
line-height: 46px !important;
width: 50%;
}
<h3 class="entry-title">
This line very long, have font-size is 26 and line-height is 46px
</h3>
Adding padding might help or put everything in a div and add an Eventlistner to the div
div = document.getElementbyid('divid')
div.addEventlistner('click',function(e){
window.location.assign('url')
})
sorry for poor spellings
Try enclosing the heading itself within the a tags.
I'm making an invoice in HTML & CSS. The goal is that after filling in, the invoice gets printed. But for some reason it doesn't print the CSS color of text. All text is black.
All other CSS styling works, like font-family, font-size, font-weight ...
This is the original in HTML & CSS :
And this is what is printed :
The printing is done with js: window.print();
Does anyone know why CSS color isn't working?
EDIT:
the title is placed in a table with id 'factuur':
<td id="factuurTitel">Stukadoorwerken Vanhees Frank</td>
The title has this CSS:
#factuurTitel {
font-weight: bold;
font-size: 30px;
color: #194197;
text-align: center;
vertical-align: middle;
font-family: 'Carrois Gothic SC', Calibri, sans-serif;
}
I have this #media print :
#media print {
body * {
visibility: hidden;
}
#factuur, #factuur * {
visibility: visible;
}
#page {
margin: 0;
}
}
I've tried adding #factuurTitel { color: #194197; } to the #media print.
Usually JS Print only handles html content alone if you want to give stylings to print, Use separate media query print in your css file:
#media print
{
/* your css goes here */
}
#factuur, #factuur * {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
This works in webkit browsers and the latest firefox updates, otherwise there's no other known solution.
I had the same problem myself.