I want to place some elements on the left and some the right. But the elements on the right are not staying on line, especially after addition of mat-form-field. I'm getting:
On the right side, the Right Button and the Icon are on the same line, but the mat-form-field does not stay with them on the same line.
My html is:
<div class="mat-table-container">
<div class="mat-table-button-wrapper">
<div id="left-aligned-wrapper">
<button class="btn btn-primary">
Left Button
</button>
</div>
<div id="right-aligned-wrapper">
<mat-form-field appearance="standard">
<input matInput placeholder="Placeholder">
</mat-form-field>
<button type="button" mat-button>
Right Button
</button>
<button class="btn btn-default">
<i class="my-icon my-icon-filter"></span>
</button>
</div>
</div>
</div>
My CSS is:
.mat-table-container {
position: relative;
.mat-table-button-wrapper {
height: 50px;
padding-left: 0em;
padding-top: 1em;
#left-aligned-wrapper {
float: left;
}
#right-aligned-wrapper {
float: right;
}
}
}
What could be going wrong here?
I would recommend you use flexbox instead of float in this situation.
This would result in your CSS looking something like this:
.mat-table-container {
position: relative;
.mat-table-button-wrapper {
height: 50px;
padding-left: 0em;
padding-top: 1em;
display: flex;
justify-content: space-between;
}
}
i.e. removing applying display: flex to your wrapper class and using justify-content: space-between to space your content accordingly.
This would also make sure your content doesn't jump to the next 'line'.
Please applied width: 50% in both elements.
Or use display: flex property.
.mat-table-button-wrapper {
display: flex;
align-item: center;
justify-content: space-between;
}
Related
I am trying to display the <h1> on it's own line as well as the <h3> and all the buttons on 1 line together. I am using flex and I know how to do this normally, what I tried to do was display: block; on the buttons and h3 to have them on their own lines, this didn't work and I tried googling my way and finding some kind of flexbox guide to figure it out myself.
body {
margin: 0%;
background-color: #6987D5;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container h1 {}
.container button {
border: 0px;
background-color: #315dcc;
padding: 1%;
color: white;
}
<div class="container">
<h1>Stopwatch</h1>
<h3>00:00</h3>
<button type="button">Start</button>
<button type="button">Stop</button>
<button type="button">Reset</button>
</div>
You have to add a <div> around the buttons to combine them.
body {
margin: 0%;
background-color: #6987D5;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container h1 {}
.buttons {
display: flex;
}
.container button {
border: 0px;
background-color: #315dcc;
padding: 1%;
color: white;
}
<div class="container">
<h1>Stopwatch</h1>
<h3>00:00</h3>
<div class="buttons">
<button type="button">Start</button>
<button type="button">Stop</button>
<button type="button">Reset</button>
</div>
</div>
If you want the tree buttons in a row, they need their own flex container. To display items in a column, you don't need flex since that is the default behaviour.
HTML
.container {
display:flex;
}
<div>
<h1>Stopwatch</h1>
<h3>00:00</h3>
<div class="container">
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>
</div>
</div>
CSS
.container {
display:flex;
}
You can wrap buttons and text within separate container divs like this.
<div class="container">
<h1>Stopwatch</h1>
<h3>00:00</h3>
</div>
<div class="container">
<button type="button">Start</button>
<button type="button">Stop</button>
<button type="button">Reset</button>
</div>
Your .container is flexed which is why you have everything flowing from left to right. You can set flex-direction: column; but that will just be complicating what is there by default.
All h element is blocked element which means they will fill up any available space. So remove display: flex; from the .container class selector and wrap your buttons in grid or flex container.
.button-group {
display:grid;
grid-template-colums: repeat(3, 1frm);
gap:1rem;
}
or
.button-group button{
gap: 1rem; //May not work on all browsers
display:flex;
flex-wrap:wrap;
}
and
<div class='button-group'>
<button>Start</button>
<button>Stop</button>
<button>End</button>
</div>
In theory you can just add:
flex-direction: column;
to the .container css
but it will make also start and stop buttons in column, is this what you wanted?
I am trying to write sass that will apply on both buttons inside two separate divs, but all the style that I write apply only to one button, is there any way I can target all buttons?
This is my html:
<div class="main-cta-buttons">
<div class="subscribe-form">
<div>
<button class="btn btn-primary btn-lg btn-xs-block test" style="min-width: 220px;" aria-label="become a marketer">Become a Marketer</button>
</div>
</div>
<button class="btn btn-primary btn-lg btn-xs-block test" style="min-width: 220px;" aria-label="become a partner">Become a Partner</button>
</div>
</div>
</div>
and this is my sass:
.main-cta-buttons{
display: flex;
// align-items: center;
justify-content: space-evenly;
max-width: 70rem;
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
#media(max-width: 736px){
flex-direction: column;
max-width: 100%;
}
.subscribe-form{
> div {
#media(max-width: 736px){
margin-bottom: 2.6rem;
}
}
& button {
text-align: center;
justify-content: center;
display: flex;
}
}
}
I tried pretty much anything I could think of, but these buttons styles only show up on the first button.
Thank you
you can try using *
and every child will get css props
div.main-cta-buttons * {
// CSS Property
}
I would write the following (S)CSS (taking into account the HTML you provided):
.subscribe-form .btn { styles be here }
That way you can style both buttons in the subscribe-form container.
P.S.: A note regarding your use of aria-label. The information is already in the button as text, so putting the same text as a value for aria-label on the button makes the text redundant. In the worst case it would be read twice by screen reader software or other assistive technology.
I have a few html elements next to each other in a container positioned with display:inline-flex.
This works well for button elements, but as soon as I try to add an input type="text" element, the textbox is placed below the buttons (only in Internet Explorer 11; not sure about IE10 or below).
It works as expected (textbox in same line as buttons) in Firefox, Chrome and even Edge.
How can I get IE to display this correctly?
See jsFiddle for full html and css code to illustrate the problem: https://jsfiddle.net/vm2kcwd9/1/
.container {
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>
IE11 is known for having many flex-related bugs.
A simple and easy solution in this case would be to make the parent a flex container:
.container {
display: flex; /* new; forces all children into a single row */
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
/* vertical-align: top; <--- not necessary anymore */
justify-content: center;
align-items: center;
margin: 5px; /* for demo only */
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>
Also, since you're making button elements into flex containers, consider this:
Flexbox not working on <button> element in some browsers
Easy solution just add display:flex to parent instead
.container {
display: flex;
justify-content: center;
/* align-items: center; you might not need this */
height: 2em;
}
.container>* {
height: 100%;
margin: 10px;
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>
I am making a website and I'm having a small amount of problems with aligning some buttons to the right side of the page.
I've tried using text-align: right and float: left.
Can anyone try to see what I'm doing wrong?
It's currently live at http://biolinks.redxte.ch/
Anything is appreciated.
Use this
.button-parent {
text-align: right;
}
button {
display: inline-block;
}
or if you want to make it position absolutely, you can use this
.add-me {
position: absolute;
right: 20px;
}
You can use
.add-me{
margin-left : 80%;
}
I am a beginner but I think this will solve your problem.
Just add .col-sm-12 div after the row and it work perfectly
<div class="row social" id="snapchat">
<div class="col-sm-12">
<img src="/i/snapchat.svg" class="social-img">
<span class="social-text">Snapchat</span>
<span class="add-me">
Add Me
</span>
</div>
</div>
If you wrap the stuff you want on the left in an element, you can use flexbox with justify-content: space-between to push the elements on the far edges of the row.
You can also use flexbox on each of those elements with align-items: center to center everything vertically.
I wrapped the content on the left in a div with class .icon, and then all you need to apply is this CSS
.social, .icon, .add-me {
display: flex;
justify-content: space-between;
align-items: center;
}
Here's a demo.
/* included this from your site so the image won't be huge */
.social-img {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
}
/* this is the part you need */
.social, .icon, .add-me {
display: flex;
justify-content: space-between;
align-items: center;
}
<base href="http://biolinks.redxte.ch/">
<div class="row social" id="instagram">
<div class="icon"> <!-- added this div -->
<img src="/i/instagram.png" class="social-img">
<span class="social-text">Instagram</span>
</div>
<span class="add-me">
View Profile
</span>
</div>
You can use the basic One. Which is:
<button class="btn" style="float: right;">See More..</button>
This is definitely such a basic question but I'm trying to do this in Ionic. I've been trying
margin: 0 auto;
text-align: center;
position: relative;
so many things but it's not working, help?
UPDATE: So I've tried one of the solutions and this is my CSS, but it still doesn't work, its center, but all the way at the top
.square{
width: 25vw;
height: 8vw;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
HTML:
<div class="container"
<div class="button-wrapper">
<button class="button button-outline square button-calm">
Male
</button>
<button class="button button-outline square button-royal">
Female
</button>
</div>
</div>
You can use flexbox to achieve this. Firstly wrap the buttons within a container:
<div class="container">
<div class="button-wrapper">
<button class="male">Male</button>
<button class="female">Female</button>
</div>
</div>
Then, in the CSS, apply vertical and horizontal centring to the children of the container:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
Codepen example
I have no experience with iconic framework. But I think following suggestions might work, give it a try:
1) You can try <center> tag
2) or you can try left:50%; (which is setting the left margin)
I've decided to do
.square{
width: 25vw;
height: 10vw;
}
.container {
padding-top: 35vh;
display: flex;
justify-content: center;
align-items: center;
height: 100%
}
not sure how good of a convention this is, but it seemed to center it decently on different devices