I have two questions.
first,
I have a form and I'm trying to center everything to the center of it and in the same time align the text to the left side of the fields.
I'v tried to give justify-center and align-items to the "container" class and to the "form-style" class and nothing works.
Part of the code and a Codepen link
.form-style {
width: 50%;
position: relative;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
And,
.container {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
Second,
I'm trying to make my submit button to get 100% width and nothing - there's space at the sides,
input[type="submit"] {
display: block;
background-color: #08ABD9;
font-family: 'jura', sans-serif;
font-size: 16pt;
font-weight: bold;
height: 40px;
border: none;
margin-top: 40px;
margin-bottom: 0px;
width: 100%;
}
Start here: There's a syntax error in your code. The display: flex on the container is not being recognized due to the presence of an invisible character. None of the flex properties are working.
So first fix that. Just delete the line entirely and re-write display: flex. You will notice major changes in your layout.
Second, your flex-direction is set to column on your label/input containers. That stacks your form elements vertically.
#fname, #email-a, #phone, #dropdown, #mrole, #age, #textbox {
display: flex;
flex-flow: column wrap;
width: 100%;
margin-left: 40px;
}
If you want the text and input to line up in a row, use flex-direction: row.
Lastly, with regard to your submit button, your container has left and right padding which prevents the button from reaching the edges.
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Once you remove the padding rules, the button will extend from edge to edge.
Related
mocked up an example of my issue (simplified) in this codepen: https://jsfiddle.net/bhuaL0vf/12/
I'm basically unsure of what styles on the styled-link are preventing the open-text from floating right to the end of the row - so that it sits right at the end as opposed to cosied up-beside it. I've re-created this elsewhere with these styles however inline-flex is not necessary there so I am assuming it is to do with that.
TEMPLATE:
<li class="styled-link">
<span class="open-text">Open</span>
List item one
</li>
STYLES:
.styled-link {
display: inline-flex;
align-items: center;
font-size: 12px;
color: #63666a;
}
.open-text {
float: right;
font-size: 14px;
display: block;
margin-right: 35px;
}
Apologies if I'm missing something really obvious, a little unfamiliar with inline-flex.
You can replace inline-flex with flex and justify the flex items using justify-content property to achieve the desired alignment as per your needs.
For example:
.styled-link {
display: flex; /* Replaced inline-flex to flex /*
align-items: center;
font-size: 12px;
color: #63666a;
justify-content: space-between; /* Add space between flex items */
}
/* Removed float */
.open-text {
font-size: 14px;
display: block;
margin-right: 35px;
}
In my project I have two columns, each with their own mat-accordion which holds some mat-expansion panels.
When I click to open any one of the expansion panels, it is moving the opposite column downwards.
Here is the CSS. Basically, the "row" holds the two columns, which hold the accordions.
.row {
padding-top: 120px;
padding-left: 25px;
padding-right: 25px;
flex-flow: row wrap;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
}
.column {
flex-direction: column;
box-sizing: border-box;
display: flex;
flex: 1 1 50%;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 50%;
max-width: 50%;
}
.mat-expansion-panel {
background: rgba(0, 0, 0, 0.7);
width: px;
margin-bottom: 1.5rem;
}
.mat-expansion-panel-header {
height: 150px;
font-family: Gotham HTF;
font-size: 26px;
justify-content: space-between;
text-align: center;
}
I would like the opposite column to be held in place if it is not being clicked.
Is there a way to keep the opposite column held in place so that only the column with the mat-expansion panel that was clicked is moving? If there is no such way, is there a way to replicate a mat-expansion panel using mat-card with header and content? I need everything to stay still.
Just like I guessed. You're row content is being align to the center. Change the align-items to for example flex-start to align the row content to the top of the row.
.row {
...
align-items: flex-start;
}
I have been searching around, but for the life of me I cannot figure out what's going on. My text is getting wrapped at certain tags, while I want it all on one line.
I have aligned three DIV elements next to each other through the use of display: flex;
This all works out quite nicely and display is exactly the way I want it. Except for the fact that, for some unexplicable reason (at least to me), if I put a text snippet in one of those divs and that text snippet contains something between tags like <span></span> or <b></b>, the text is automatically wrapped before and after the tag onto a new line.
I have the code here:
.pagetitlewrapper {
width: 99%;
background-color: #c1dbff;
border-radius: 25px 25px 0px 0px;
padding: 10px;
display: flex;
text-align: center;
}
.pagetitleleft,.pagetitlecenter,.pagetitleright {
width: 33%;
align-items: stretch;
display: flex;
justify-content: center;
flex-direction: column;
}
.pagetitleleft {
text-align: left;
font-size: 9;
}
.pagetitlecenter {
text-align: center;
}
.pagetitleright {
text-align: right;
font-size: 9;
resize: vertical;
}
<div class='pagetitlewrapper'>
<div class='pagetitleleft'>Welkom, FNAME LNAME</div>
<div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div>
<div class='pagetitleright'>
Licensed to <span>DON'T WRAP</span> - License valid until xx/xx/xxxx.
</div>
</div>
Around the DON'T WRAP, I have put <span> tags to illustrate the problem. If you remove these tags, the text is all displayed on one line as I want it. Basically I want to be able to make DON'T WRAP bold without it wrapping the text before and after.
I have been searching the web, to no avail. I found a couple of code snippets online which surprisingly did the same thing. I wonder why nobody ran into this problem before?
I have tried to play a bit with white-space: nowrap; in CSS, but that didn't seem to work either.
Anyone has any idea? Someone can point me in the right direction?
Thanks,
Kenneth
Why it break line is because of the display: flex; flex-direction: column on the pagetitleleft/center/right elements, which make the span a flex column item and take 100% width.
By dropping the display: flex on the pagetitleleft/center/right elements and set align-items: center to their parent, their text will center vertically
.pagetitlewrapper {
width: 99%;
background-color: #c1dbff;
border-radius: 25px 25px 0px 0px;
padding: 10px;
display: flex;
align-items: center;
}
.pagetitleleft,.pagetitlecenter,.pagetitleright {
width: 33%;
}
.pagetitleleft {
text-align: left;
font-size: 9;
}
.pagetitlecenter {
text-align: center;
}
.pagetitleright {
text-align: right;
font-size: 9;
resize: vertical;
}
<div class='pagetitlewrapper'>
<div class='pagetitleleft'>Welkom, FNAME LNAME</div>
<div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div>
<div class='pagetitleright'>
Licensed to <span>DON'T WRAP</span> - License valid until xx/xx/xxxx.
</div>
</div>
This behavior makes sense and is defined in the flexbox specification.
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
Your right column (.pagetitleright) is a flex container with flex-direction: column:
.pagetitleleft,.pagetitlecenter,.pagetitleright {
width: 33%;
align-items: stretch;
display: flex;
justify-content: center;
flex-direction: column;
}
In this container, you have three flex items:
<anonymous-flex-item>Licensed to</anonymous-flex-item>
<span>Licensed to</span>
<anonymous-flex-item>- License valid until xx/xx/xxxx.</anonymous-flex-item>
As a result, you're getting three flex items stacked vertically.
It doesn't matter if you use span, b, strong, em. Whatever elements you create in the container become flex items and behave accordingly.
If you don't want these elements to stack vertically, then don't use flex-direction: column.
There is a simple solution. just add white-space: pre-wrap;
Some-Flex-Container {
display: flex;
white-space: pre-wrap; /* solution */
}
Lately I was creating a searchbox for my website, but I wanted it to be constantly centered in every y and x dimension.
I have div container searchbox:
.searchbox {
position: absolute;
text-align: center;
width: 100%;
left: 0%;
top: 55px;
height: 115px;
background-color: black;
}
Inside searchbox container, I made special mover container:
.mover {
margin: 0 auto;
width: 50%;
}
As you see width is 50% because I thought it would center it, but it didn't, and margin is automatic, which I don't think even works without 50% width.
Full code and Result.
I think my style is kinda messed up and there are useless things which may affect automatic margin.
What may the problem be? does margin: auto; doesn't work with current position of div? What do I need to change? If not, what's the problem?
I will be very thankful if you upload solution on my current fiddle.
UPDATED ANSWER
Here is correct code: https://jsfiddle.net/uda77168/7/
First...
1. Removed all absolute, top, left, right, bottom CSS properties.
Reason: Absolute positioning is generally a bad thing to do, because it gives sites an unresponsive layout.
2. I've also removed float CSS properties.
Reason: float is not bad, but it's unnecessary if you're using flexbox.
3. Set .search {width: 100%}
Reason: make the search bar bigger.
4. Removed width properties for #condition and #stattrack.
5. Made the margins more consistent.
6. Placed <label> before <select>.
Center Vertically
1. <body> is the flexbox that will center things vertically. In order for that to work, the width and height for <html> and <body> have to be defined.
html, body {
width:100%;
height:100%;
}
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. Next, we need to define <body> as a flexbox and give it some flexbox properties:
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
You can just copy-paste flexbox code like the one above from here.
Center Horizontally
1. Create a div around .statbox, .conbox, and .rarbox, and give it a width and make it a flexbox (again, the flexbox code is copied):
<div class="horizontal-flexbox"></div>
.horizontal-flexbox {
width: 100%;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. I've also set .statbox, .conbox, and .rarbox each to be 33.3% width long. Added together, that's 99.9% – just under 100%.
.horizontal-flexbox > div {
width: 33.3%;
margin-top: 10px;
}
3. I've also included some other stuff, but that's not important. Make sure you learn flexbox, it's real useful!
Your input.search class has a specified width in px which is larger than the container.
.search {
width: 100%;/*changed this line*/
height: 35px;
margin-top: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
border: solid 1px black;
border-radius: 7px;
}
However using percentages can lead to unpredictable layouts when viewed on different screen resolutions.
Use this:
.searchbox {
display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
}
And
.mover{width:50%;}
Trying to make a grid system with divs and I can use Text-Align Center but it just doesn't work as well. If I use the flex css the div's just ignore the barrier I created where it's suppose to break up the div's. The problem with not using flex is that I cant use margin to have the edge of the divs aligned with the logo and nav bar's end.
http://tsuts.tskoli.is/2t/2809984199/skapalon/ - Hosted here
If you check the css you can see two container divs, one whom is commented out and the other one is being used. The one who is being commented out is being using flex and the one I'd like to fix.
All help is much obliged, Thanks in advance.
/*.container{
display: flex;
justify-content: space-between;
min-height: 100vh;
width: calc(100vw - 500px);
margin: 0 auto;
}*/
.projectskort{
display: inline-block;
margin-top: 10px;
width: 224px;
height: 270px;
border-radius: 3px;
background-color: white;
}
Remove both your .container classes and replace them with
.container{
min-height: 100vh; /*Remove to see the difference*/
width:72%; /*Modify it for your needs*/
margin: 0 auto;
display: flex;
flex-wrap: wrap; /*Recommended property*/
justify-content: space-between;
}
.projectskort{
display: flex;
margin-top: 10px;
width: 224px;
height: 270px;
border-radius: 3px;
background-color: white;
}
That's what i understood from your question