I am using a flexbox layout and am trying to get the text in a specific div to be resized to fit that div.
So for example, if I have code as follows:
<div style={{display: "flex"}}>
<div style={{flex: 1}}>
A really, really, really, really long phrase here that will fit this div, and may wrap onto multiple lines if necessary. In this case it should fill half of the available space as the other div will cover the other half of the space.
</div>
<div style={{flex: 1}}>
Some other text
</div>
</div>
In reality, the text will be pulled from a database, so will be dynamic in length.
How can I get the text in the first div to automatically adjust to fit the entire div?
Clarification: the div should stay a fixed size and only the text should be downsized to fit the div rather than overflowing the div.
Update
I have also posted a more specific question about a specific module called react-textfit not working the way I would expect it to work.
Here is some code that should do what you are asking.
let size_div = document.querySelector("#font_size");
let div = document.querySelector("#fixed");
while (div.scrollHeight > div.clientHeight) {
let style = window.getComputedStyle(div, null).getPropertyValue('font-size');
let fontSize = parseFloat(style);
if (fontSize <= 1) {
break;
}
div.style.fontSize = "" + (fontSize - 1) + "px";
size_div.innerHTML = " " + div.style.fontSize;
}
You can try it out here:
https://codepen.io/lowtex/pen/xNawEO
You could simply hard code the size to 50 %
<div style="display:flex">
<div style="width:50%;background:lightgrey;">
A really, really, really, really long phrase here that will fit this div, and may wrap onto multiple lines if necessary. In this case it should fill half of the available space as the other div will cover the other half of the space.
</div>
<div style="width:50%;background:lightblue;">
Some other text
</div>
</div>
I am not a reactJs user but I have worked with CSS flex
you can set height of the container to auto so that it changes as we get the content. Also, you should set min-height and max-height properties in css so that if content is less that given length, it appears on min-height and if the content is way to big, it does not exceed the given container height.
In order to disallow content from getting out of the box, you can use overflow:hidden. this will keep the content from getting out of the box.
Hope this gives some help with how you want to proceed.
<div style={{ display: "flex" }}>
<div
style={{
flex: 1,
backgroundColor: "lightGrey",
wordBreak: "break-word"
}}
>
A really, really, really, really long phrase here that will fit this
div, and may wrap onto multiple lines if necessary. In this case it
should fill half of the available space as the other div will cover
the other half of the space.
</div>
<div style={{ flex: 1, backgroundColor: "lightBlue" }}>
Some other text
</div>
</div>
Related
I have a little bit of a problem I'm a beginner programmer and writing my first web app, I came across a little bit of a problem.
I have a parent div with a height of 300px and inside that div I have 20 child divs and every single one of them has different id attribute and one div gets a special class that changes his appearance. I want that div always be seen by user so they don't have to scroll to find it.
I tried:
const renderStandings = (team,teamID) =>{
let cssClass = "team-standing";
if(team.team.id === teamID){
cssClass = "team-standing favouriteTeam";
}
HTML markup
const markup = `
<div class="${cssClass}" data-teamID="${team.team.id}">
<div class="team-position"><p>${team.position}</p></div>
<div class="team-crest"><img src="src/img/logos/${team.team.id}.svg"></div>
<div class="team-name"><p>${team.team.name}</p></div>
<div class="team-gamesplayed"><p>${team.playedGames}</p></div>
<div class="team-goaldiffrence"><p>${team.goalDifference}</p></div>
<div class="team-points"><p>${team.points}</p></div>
</div>
`;
document.querySelector('.league-standings').insertAdjacentHTML('beforeend',markup);
Scroll into view
if(document.querySelector('.favouriteTeam')){
var el = document.querySelector('.favouriteTeam');
el.scrollIntoView({
behavior: 'auto',
block: 'center',
inline: 'center'
});
}
}
}
That scrolls that div into the view exactly how I wanted it to, but it also scrolls the whole website to the parent div and I don't want that.
QUESTION
So the question is how do I scroll that div into view without scrolling the whole website. Preferably I would love to have answer in vanilla JS because that's what I'm practicing at the moment, and I don't plan to learn any frameworks until I'm comfortable with JS.
Illustrated result of what I want to achieve:
This is now and it scrolls the whole website
This is how I want it to be
[2]: https://i.stack.imgur.com/Ldg3N.jpg
Inside my problem the answer was to use (scrollTop). Since every child div had 50px height I added atribute postition that gave me the position of element that I wanted to center (1-20), thanks to that I could calculate value of scrollTop for the element to be exacly in the center of scrollable div. Since 7 of them is already visible i started at 8th position.
if(document.querySelector('.favouriteTeam').getAttribute('data-teamposition')>7){
document.querySelector('.league-standings').scrollTop = 200 + ( 50 * (document.querySelector('.favouriteTeam').getAttribute('data-teamposition') - 8 ));
}
I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns.
I've tried manually setting the width in each cell like this:
<TableCell style={{ width: "10%" }}> Number </TableCell>
As well as using a const style then referring to it, but neither work. Does anyone have any ideas? I would really hate to have to use a scroll function when the cells are so padded its ridiculous. Thanks in advance!
EDIT The above code actually works, but the change is small making it unnoticeable - changing the width to 1px still leaves a huge space between the cells. Might be a padding issue? I've tried setting padding to 0 in a few ways but nothing happens.
See here i have added a example for first column to have a custom width and wrap the content with custom CSS:
https://codesandbox.io/s/xv9orx4zrw
Add a constant value like the below and refer it in the column
const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };
Then in TD refer like this
<CustomTableCell style={customColumnStyle}>
I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.
Setting Max Width can also be useful as it makes a fix width for all cells
I also had some issues, and finding a solution landed on this page but didn't work the given suggestions for me. so i have added any tag <div style={{width:300}}> <p style={{width:300}}> inside <Tablecell> like this and it worked.
<TableCell><p style={{width: 300}}>{row.address}</p></TableCell>
hope this works for others also
Ok - So I am kind of struggling with this. I am trying to achieve something pretty straight forward I think. I need 3 resizable divs within a fixed width container div without using Jquery. The resize needs to occur for all divs only horizontally as they all have the parent divs height. Here is the layout
<div id="container">
<div id="m1">M1</div>
<div id="m2">M2</div>
<div id="m3">M3</div>
</div>
My object here is to wrap this into a ReactJS component and therefore not wanting to muddy the waters with Jquery. Any help/direction would be most appreciated. If someone can mock up something like this in React, that would be awesome too! :)
Not sure whether this can be a CSS only solution but I am open to ideas
Thanks
Your question isn't exactly clear to me, if your container div is fixed width (as in a constant value) then your child divs should not resize dynamically no matter what the width of anything beyond the container is.
The only other way I could interpret your question, is that you need some sort of grid system, where you can drag to resize the width of the child divs within the confines of the container. In that case, I might be wrong but I don't think the solution is that simple, you might want to take a look at this package: https://github.com/STRML/react-grid-layout
More specifically, their simplest implementation allows you to define a fixed width container (1200 in this case) like so:
<ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
<div key={'a'}>a</div>
<div key={'b'}>b</div>
<div key={'c'}>c</div>
</ReactGridLayout>
If you want to fix the parent div's size and then have the inner divs automatically resize based on the parent div you can use the flex box layout which you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In your case you can set the styling of the first div to:
.container {
display: flex;
}
And for the children (in your case identified by m1, m2, and m3) you need to set the css property flex-grow to how big do you want it to be relative to the others. Say, if you want m1 and m2 to have the same size and m3 to be twice as big, you would do the following:
#m1, #m2 {
flex-grow: 1;
}
#m3 {
flex-grow: 2;
}
Depending on what you want to do, you might want to consider renaming the ids/classes.
In case you are looking to get the exact size of the parent of a div you can do this as following:
render() {
return <div ref="node"></div>
}
componentDidMount() {
const parentWidth = this.refs['node'].parentNode.clientWidth;
// Do whatever you need here (like setting state of the react component)
}
I have an empty div element like this:
<div class="mydiv"></div>
My product owner now wants to fill this div with pictures until there is no more space left (in vertical direction):
<div class="mydiv">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
<!-- keep going until mydiv is full -->
</div>
Unfortunately, the size of this div element is unknown until the page is actually loaded since it's a responsive website and thus the size of the div is dynamically adapted to the size of the screen/browserwindow. We do know the size of the images though.
Is there a pure HTML/CSS solution for this?
The only way I can think of is to check the width + height of the div during runtime via JavaScript and then do the math to see how many pictures are probably gonna fit in there and then insert only the images that will probably go in.
Ok so there is a way to use it with "hacks" :
I made a first container that is the with you defined.
set overflow:hidden to this container
Then i made another container inside the first one but with greater width
Inside this container put all the images ( works vertically and horizontally, add float:left to my example to make it work horizontally )
Here is the example
You see that i made 4 images ( faked them with fix position divs ) and that we can see 2.5 of them because of the container width.
Hope this trick is what you're looking for :)
This is my solution in javascript :
var mydiv = document.getElementById('mydiv') // or by class not important
while(!(mydiv .offsetHeight < mydiv .scrollHeight
|| mydiv .offsetWidth < mydiv .scrollWidth)) {
mydiv.innerHTML = mydiv.innerHTML + '<img src="myimg.jpg" />;
}
I use Chrome and http://www.aaai.org/Conferences/AAAI/aaai13.php for test.
There is a structure like that.
<div class="content">
<div class="right">...</div>
<div class="left">...</div>
</div>
I just have no idea about why the "content" div's size is 940px * 70px which is much smaller than the size of the "right" div and the "left" div.
Sorry for not knowing how to screenshot for this problem
Elements which are floating doesn't use vertical space without clear. You can add empty element with "clear: both"-css to use that vertical space.
See more info from here:
What methods of ‘clearfix’ can I use?