I am using react bootstrap, I am trying to align items vertically within a row but with no luck. My problem is I have a button in one of the columns, so for the other columns all the texts are shifted up a bit while the button and its content have a larger height.
My question is how can I make all columns within a row to have the same height and to all align in the middle vertically?
The only solution I managed to find so far is using CSS:
tranform: translateY(-50%)
this does the trick, but I was looking for a better more dynamic solution as this needs to be applied for every column excepts for the button column
EDIT: When I say columns and rows, I'm talkign about bootstrap's Col and Row, not actually a table or rows and columns; sorry for the misunderstanding
You can apply any of Bootstrap's classes to a React Bootstrap component. So, per the Grid System docs, the following columns will both be centered vertically:
<Row className="align-items-center">
<Col>
<h1>{title}</h1>
<p>{details}</p>
</Col>
<Col>
<button>{callToAction}</button>
</Col>
</Row>;
If you are using table rows, you can wrap contents within a <div>..</div>
like:
<tr>
<div classname="align-me"></div>
</tr>
and then you can use flexbox to align them dynamically:
tr .align-me {
display: flex;
align-items: center;
}
I had the same problem, and I found this:
<td className="align-middle"></td>
ref: https://www.codegrepper.com/code-examples/html/bootstrap+table+text+vertical+align+center
I tried the snippet in #kburgie's answer, but it did not work for me, my Row wouldn't budge an inch. So, I drew a border around that Row, to figure out what was happening.
Seems that Row has just enough height to fit its children, not an inch more, and that's why it can't move vertically. Gave the row some height, and it worked effortlessly.
.viewport-height {
height: 100vh;
}
<Row className="align-items-center viewport-height">
<Col>
<h1>{title}</h1>
<p>{details}</p>
</Col>
<Col>
<button>{callToAction}</button>
</Col>
</Row>
Could've added this as a comment to #kburgie, but I lack reputation.
Related
So basically I am using material ui to set up a grid system to display videos in 2 rows. I have achieved the general layout but I can't seem to remove the white space/padding between the elements. I tried nowrap as the docs suggest but it doesn't work as intended. Here is my component:
<Grid
container
spacing={1}
direction="row"
justify="center"
alignItems="center"
>
{media.map((media) => (
<Grid item xs={6} key={Math.random()}>
<video
className="media__object"
autoPlay
loop
src={media.mp4}
/>
</Grid>
))}
</Grid>
Here is some of the css of media__object
.gif__object {
border-radius: 5px;
height: 100%;
width: 100%;
object-fit: cover;
}
Here is what the current situation looks like. I added some background color to make the space easily visible.
Thank You!
As far as I'm aware, you're not going to be able to get rid of that vertical space with CSS alone - you'll need some JS. The design style I understand you want is called 'masonry'.
What you're seeing is two rows with two columns in each. The row will be the height of the tallest column within it, then after the page width is filled (two half-width columns), it drops down to a new row. That's a limitation of CSS (there are some CSS-only workaround attempts for the desired layout, but they're not well supported). An alternative would be to create two columns and fill them separately, then they're not occupying the same 'row' as the item next to it. But I don't think that's what you want to do either since the order of elements will be off and you'll have to work out how to fill them evenly.
Try something like this JS masonry library.
I found many ui library or framework's grid system has no easy way to merely center vertically a block with width. I just want says a block with max-width of 200px in the center, how can I avoid using custom css to style it?
https://codesandbox.io/s/antd-layout-ch745
doc: https://ant.design/components/grid/
To achieve the centering is easy. In a 24 column grid you can use the Col component and play around the span numerics to make sure width is same left and right. For example, these are all column settings that would get you centering:
<Col span={12} offset={6}>
<Col span={10} offset={7}>
<Col span={8} offset={8}>
<Col span={6} offset={8}>
Simply pick a span that is an event number, and the offset equals (24 - span) / 2.
The problem is the max-width: 200px. To restrict the max width to a value no matter what screen size it is, I am afraid you're going to have to write custom CSS for it, simply because there is nothing that will get you a specific value without you specifying what that value is.
In that case, I suggest creating one row and one column that spans that entire row, and use flex to center your element:
<Col span={24}>
<div style="display: 'flex'; justify-content: 'center';">
<div style="flex: 1; max-width: '200px'">
</div>
</div>
</Col>
Prompt
Suppose we want to distribute a row of inline-block elements inside a div of flexible width, we consider the spaces on the far end of the first and last elements to be significant and should be part of the spacing.
Mark-up
<div id="whole-thing">
<!-- inline-block element, width shrinks to widest row -->
<div id="row1" class="row">
<!-- block element (100% width) -->
<div id="box1" class="box">
<div id="box2" class="box">
..
</div>
<div id="row2" class="row">
..
</div>
..
</div>
Picture
I.e. Turn something like this
into this:
In this case, the width of the whole thing shrinks up to the 2nd row (widest) so there's no spacing between any of the boxes on that row.
But the content in each boxes may vary, and the spacing should adjust accordingly if necessary:
Attempts
justify-content: space-between (or other styling/work-arounds to the same effect):
Is not what we want.
justify-content: space-around should be it apart from the fact that it distribute the spaces with half-size spaces on either end, which, again, is not what we want, but almost..
Compare:
js hack. Well, it works, but I am still hanging on to the hope that there's a clean way to go about implementing this.
Adding an empty div at the beginning and the end of every row div and then use space-between.
Also works, and it's how I got the above pictures of the solution. But then I would end up with a bunch of empty divs.
Should I use table layout for this (in css, not in mark-up)? If so, how?
This is making me weep. I would be thankful for any help towards a clean solution to this.
Here's a link to fiddle
Solution
Fiddle
Placing content:'' ::before and ::after the rows (these pseudo-elements are direct children of the selected) effectively implements the 4th point above (space-between + empty elements at both ends) without redundant mark-up.
I agree this should be covered by flexbox itself.
Currently we only have space-around but it's just incomplete.
ATM the best solution for you is to wrap rows inside two pseudo elements. Basically it's your solution, but you won't need to touch the actual markup since it's generated content.
http://jsfiddle.net/5rmUj/
.row::before, .row::after
{
content:'';display:block;
width:0;height:0;
overflow:hidden;
}
Webkit inspector is unable to tell me why my table cells are not obeying the width style. I can get them to either stretch to fit the entire line (by setting white-space: nowrap or to stretch to fit the longest word, but I just want the cells to be some number of pixels wide.
First of all, check this out:
Fixed Table Cell Width
Now,
for fixed cell size (<td>) use:
<col width="50px"/>
before your
<tr>
Alternatively, use:
<table width = 100>
OR
<table style="width:100px">
To fix the table size.
The "break word" value for "word wrap" property in your css is useful in these cases:
word-wrap:break-word
Try adding table-layout: fixed; to your table's CSS declaration.
I'm using the latest version of Firefox and Chrome on Win XP. I want to display two tables on the same horizontal plane. However, I'm having a problem. Right now I have:
<table width="100" style="display: inline-block;">
...
</table>
<table width="100" style="display: inline-block;">
...
</table>
However, right now, the two tables overlap because the content of the first table is bigger than 100 pixels. Without changing the width, does anyone know how I can change/add to the styles so that the second table will appear to the right of the first table but clear all of the first table's contents?
In principle you could just set overflow: hidden on the first table, but IE (even IE 9) does not implement it properly in this case. The workaround is to wrap your tables in div elements and set the relevant properties on them:
<style>
.tablediv { display: inline-block; width: 100px; overflow: hidden }
</style>
<div class=tablediv>
<table>
...
</table>
<div class=tablediv>
<table>
...
</table>
This way, the content in one of the tables that does not fit into the allocated width is complete absent from the rendering. So it might be more effective than desired, but the question was not quite clear in this respect.
If you are sure the first table never is wider than 100 pixels, you can leave the first table as is and give the second table an absolute position.
Don't change the display property, it will disrupt things.