i am trying to get a fontawesome icon to be right aligned while a input field on same line shoule be left aligned. both units should be responsive and stay at there positionings.
i created a sandbox and a img where it is wrong to show what i mean.
https://codesandbox.io/s/bold-wind-cut7z?file=/src/components/HelloWorld.vue
https://cut7z.csb.app/
this is what i want
Here you go https://jvfe7.csb.app/
I removed the w-50 class which made the element only stay at 50% width and I remove the left: 300% from the icon. The flex property on the input field is also overridden by a flex: none property and then instead controlled it with the code beneath.
Then I added
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%
To the element containing both the input field and the icon. The justify-content: space-between makes the two element stay at both the sides, which you want.
Related
I have a problem with section 'descr'.
When I open PC window, all content positions in center.
When I open mobile format, first section 'container' is ok (in center), but 'descr'
on the left side.
Why it could be?
'main' - is flex, and justify-content:center.
Also I added width:100% for 'main', but nothing changes
When flex-direction: column, justify content and align items are changing directions. So, you must use align-items: center; to set them on the center, because flex-direction is set to column.
You must add align-items: center not justify-content: center, because when you add flex-direction to column you reverse things.
.main {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
The main axis is defined by flex-direction, which has four possible values:
row
row-reverse
column
column-reverse
Should you choose row or row-reverse, your main axis will run along the row in the inline direction.
If flex-direction is set to row the main axis runs along the row in the inline direction.
Choose column or column-reverse and your main axis will run from the top of the page to the bottom — in the block direction.
If flex-direction is set to column the main axis runs in the block direction.
Therefore, by using flex-direction: column; you are saying that your main axis is the vertical axis. This means that justify-content: center; will align your items vertically, not horizontally. So, to align them horizontally, you must use align-items: center; to align the items along the cross axis.
I am creating a section in a website with three divs. I'm displaying the divs in one line with display flex and orientation row.
To make the design responsive, I want it to appear as a column as the screen size decreases. In the media query, I'm setting the container to flex-direction: column; but it's not working as intended. Two divs appear in a column, while the middle one is on the side. I have no idea why it is not working when in my last project I did the same thing and had no issues. Link to the code below so you can see what I wrote:
https://codepen.io/DanDiaz/pen/PopmOdq
.grid {
height: 95vh;
padding-top: 5vh;
display: flex;
flex-direction: column;
}
I think thats due to the 'flex-wrap: wrap' on class .grid!
If you remove this property, it works :) Just need to set the proper image height then.
I would like to display my clients first and last name in 2 different inputs in the center of the client page and give each input a minimum width to avoid extra spacing between the two.
I've tried to use min-width or use the "size" attribute for the inputs but it's causing problems when the first input has too much characters.
<div className="input-client-name">
<input value={this.state.fname}/>
<input value={this.state.lname}/>
</div>
.input-client-name {
display: flex;
}
.input-client-name input {
min-width: 0;
max-width: min-content;
}
I expect the output of: " firstName LastName " without worrying from the characters length of each of the ones.
If you're working with flexbox, it's advised to not play with width since we flexbox for achieving responsive behaviour and setting width (even max and min widths) to a value defeats that purpose.
Since you want input boxes displayed side-by-side, and based on window size - you may want to wrap second input box to next line - add a flex-flow to your parent.
.input-client-name {
display: flex;
flex-flow: row wrap;
}
flex-flow is a combination of flex-direction and flex-wrap properties.
Next, you want to give a min width to your input boxes, you can achieve this by using flex-basis - which works as an initial size for your element.
.input-client-name input {
flex-basis: 40%;
margin: 8px;
}
Note: margin is added as space between two input boxes. You can choose to use justify-content: space-between or justify-content: space-evenly for same purpose.
Additional references:
A demo fiddle for this is availale here.
Want to learn more about flexbox? Read a nice article on it here.
Hope this helps.
input {
text-align: center;
width: auto;
}
We're using flexbox in our Angular 2 app but I'm running into an issue where, while once data is loaded the div containing pagination components appears below the data, in the second or so where the data is still loading the pagination components float to the top of the screen. I want to lock the position of the pagination components so a user doesn't see that movement. This is the css for the pagination component:
.pagination {
display: flex;
justify-content: flex-end;
}
What can I add to force this to position at the bottom of the page so it doesn't float to the top before the data loads? When I tried adding position: fixed and bottom: 0 it overrode other flex positioning and aligned left, when it should be right. So I want to use flex to do this - not standard css.
So, to summarize, I need this to force align right, AND align bottom.
.pagination {
display: flex;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
}
An initial setting of a flex container is flex-direction: row. This means that the main axis is horizontal and justify-content – which only works on the main axis – will align flex items horizontally.
For vertical alignment in a row-direction container use align-items (for a single line container, i.e., nowrap) and/or align-content (for a multiline container, i.e., wrap)
At the bottom of my web site at http://clearwaterfloridabeachrentals2.imbookingsecure.com/ there is a nav menu and three boxes with images. They are not centered instead they are left aligned. What CSS code can I use to center it?
This is the CSS I have:
.row-fluid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.textwidget {
text-align: center
}
Adding the .textwidget css fixed the three boxes but the menu is still left aligned. Not sure what code directly affects it.
use text-align: center on the element
Use text-align: center for the div wrapping the three images.
And make the table width="100%" for the nav menu
Flexbox only works one level deep:
flexible container and flexed child. So you need to make the menu a flex container too and then justify-content: center the child elements
Add flex: 1 to the child elements when you need them spaced evenly.
But this may not work well in your design as it is rather nested.
Essentially your footer is a column of two flexible rows
menu (row of 8 flexed columns which need to be centered on the row)
copyright (row of 2 flexed columns which seem to need space-between)
React on this first so I can help you further with restructuring