In my React.js im using conditional rendering to display or not display some elements.
The problem I'm having is that since my Main element is a flexbox all elements move when new element is rendered.
Example image from my project:
MainElement
On the link, there are two pictures, 1st picture is when button is toggled to 'Learn' mode, and 2nd picture is image on 'Normal' mode.
On the bottom of the picture we can see that rendering the 'Record:' element shifts all middle elements upwards (since the CSS justify-content of flexbox is set to 'space-between').
main.css:
main {
font-family: 'Inter', sans-serif;
font-family: 'Libre Baskerville', serif;
margin: 75px auto;
background-color: #29416E;
border: 3px solid #D9C241;
height: 650px;
width: 1100px;
max-width: 1300px;
border-radius: 5px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
Main.js:
<div>
<h3> {points} points / {mistakes} mistakes</h3>
{normalMode && <h4 className='main--textCenter'>Record: {pointsRecord ? pointsRecord : 0}</h4>}
</div>
The goal I'm trying to achieve is that when rendering new elements, elements stay on the same spot, and the conditional element pops up in its designated place without moving any other elements.
Question I'm having is how to solve this issue? Should I avoid flex when conditional rendering, or is there a way to bypass this by rendering empty placeholder objects?
From my own understanding, everything is working as it should. Since, please take note, there is conditional rendering, some blocks of HTML are literally not there if that condition is not met.
That's why I said it's working as it should, your flexbox and CSS, in general, are working fine.
My suggestion
Actually, this has been a hint from the placeholder elements thing you mentioned in your post.
Since you know for a fact that you want to display an element based on a condition ie normal mode set to true you could display another element while this condition is not met ie normal mode set to false.
I would suggest more CSS for the element you should display if the normal mode is set to false.
This would interchange these elements based on the condition that has been or is currently matched.
I hope I leave you in good shape.
Happy Hacking!!!
Related
Example: https://jsfiddle.net/notayam/4mLzus0y/
I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.
Adding vertical-align: middle !important; didn't help.
I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.
I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.
Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.
The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.
.btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: unset !important;
}
I don't know if I understood what you want, but here is some solution:
.btn-group .btn {
padding-top: 0;
padding-bottom: 0;
/* This is to clear line height */
line-height: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.
The problem is I am using BootSlider.js that I cam across online, and it does everything that i require it to, apart from one thing. The actual slider set white-space:none on its main div.
So as you will see in the slider panels in the url above, I have text in each panel that needs to wrap. This text is in a tag. If I set white-space: wrap on the SPAN in each panel, then you will see that the more wrapping text, the further away from the top each panel sits.
I have tried to see what the CSS problem is but am stuck - would be great if anyone could help?
It's using bootstrap 3 no option to use 4 sadly.
Try to add this rules to .index-inner1
.index-inner1 {
display:flex; /* add this line */
flex-direction: column; /* add this line */
padding: 8px !important;
min-height: 290px !important;
cursor: pointer !important;
}
I have some ads I need displayed as rows of three within a div #ad-720.
I had it working then something changed and now they are all in a column. The footer is also cut off instead of being fullwidth. I've tried adding display: inline-block and a few other suggestions I've found here thru search but nothing is working.
I'd appreciate any guidance I can get. I'm mostly a graphics guy who gets asked to solve code problems here and there! ;)
http://www.cavallino.com/
Right now the CSS for the div is set to:
#ad-720 {
display: inline-block;
text-align: center;
padding-top: 10px;
padding-bottom: 0px !important;
}
For starters the display setting for the is set to block. Try setting it to inline. If that doesn't handle it, post the relevant HTML/CSS here and we will help you out.
There is a menu i have implemented lately, This is the link to the menu tutorial: http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/, My question take place at:
.nav a {
display: block; // This line here
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
As you can check on this page: http://pepsized.com/demo/?id=1043 (The reason i want you to check on this page is so you can see effect take place for all 3 examples), So if you remove the display : block nothing is changed, All work the same way it worked with display : blcok, So i assume the display : block, Is mabye for older browsers, different browsers, But i can't point the reason, So if anyone know why the display : block, I will be very thankful, Thank you all and have a nice day.
float: left or float: right forces display to have a computed value of block.
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
That is why removing display: block makes no difference. You can safely remove it if you want to.
The only possible reason to leave it there is to show your intent to anyone reading your CSS: that you want the element to be shown as a block-level element.
It was probably included in the first place because the author of that CSS was unaware that float forces display: block.
Display: block tells the browser that you want a certain element displayed in a "block": it is the only element on that "line" of the browser (so you can't fit multiple elements next to each other). You can also have "inline", which is the opposite. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/display
SOURCE w3c
In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the 'margin'
properties. Vertical margins between adjacent block boxes in a block
formatting context collapse.
In a block formatting context, each box's left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box's content area may shrink due to the floats).
AND ANSWER OF YOUR QUESTION
position:relative or float:left/right; makes an element to behave like an block element..display:block; wont have any effect if you are using position:relative; or float:left/right;
Here you can find all the values of the display property and its behaviour: http://www.w3schools.com/cssref/pr_class_display.asp
I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone