I am using the Material-UI library for React.
I am trying to make a simple form that looks like:
However, I can't figure out how to align the button with the TextField.
I tried changing the margin-top but it increases the margin of the entire wrapper.
Below is the code sandbox for it.
Any tips on getting this fixed?
https://codesandbox.io/embed/material-demo-y5eg7?fontsize=14&hidenavigation=1&theme=dark
In your styles.css file you can add {position: relative; top: 10px} to the small-button className then adjust the top value until you are happy with the position alternatively you might be able to wrap the row in a div and use {display:flex; flex-direction:row; justify-content:center;} to align them all.
Change the below styles in styles.css
.horizontal-form { /* This is newly added style */
display: flex;
align-items: center;
}
.input-text-wrapper {
/* margin-bottom: 1.2em; */ /* comment these styles */
}
.input-text-wrapper-small {
width: 33%;
/* margin-bottom: 1.2em; */
display: inline-block;
}
.small-button {
width: 10%;
/* display: inline-flex;
align-items: center; */
}
jsx
Remove the small-button div from inside the input-text-wrapper div and Then Enclose the input-text-wrapper div and small-button div inside a newly created horizontal-form div
...
</Typography>
<div className="horizontal-form">
<div className="input-text-wrapper">
<div className="input-text-wrapper-small">
...
</div>
<div className="input-text-wrapper-small">
...
</div>
<div className="input-text-wrapper-small">
...
</div>
</div>
<div className="small-button">
<Button variant="contained" color="primary">
Add
</Button>
</div>
</div>
</CardContent>
....
Just replace this line
<div className="input-text-wrapper">
with
<div className="input-text-wrapper" style={{display:"flex", alignItems:"center"}} >
AND remove margin-bottom from your style.css
.input-text-wrapper-small {
width: 30%;
/*margin-bottom: 1.2em;*/
display: inline-block;
}
Related
I have a two basic div containers and I am trying to apply some styles to it. I do import my CSS styles from a separate .module.css file and the first style gets picked up in the className property, when assigned. However, the same thing is not working for the second div. The css property for class 'sales' is not being picked up
dashboard.js
import HomeSalesmanStyles from '../../../styles/SalesmanHome.module.css';
const HomeSalesman = ({name}) => {
return(
<>
<div className={HomeSalesmanStyles.container}>
<h4>
Hello, {name} 👋
</h4>
</div>
<div className={HomeSalesmanStyles.sales}>
Hello
</div>
</>
)
};
export default HomeSalesman;
SalesmanHome.module.css
.container {
display: flex;
justify-content: center;
margin-top: 5%;
};
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
Any ideas where the issue is?
----------- Edit ------------
The issue was wrong css module name import! After correcting to the right file, everything works.
This looks like a syntax error in the CSS: adding a semicolon after a rule is invalid.
.container {
display: flex;
justify-content: center;
margin-top: 5%;
} /* <- no semicolon */
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
<div class="container">
<h4>
Hello, {name} 👋
</h4>
</div>
<div class="sales">
Hello
</div>
I just got into react-bootstrap today. I want the form to be in a div with margins on left and right side. My jsx looks like this:
const Settings = () =>{
return(
<div className="content">
<div className="box">
{/* Actual form with course info */}
<Form className="course-info">
<Form.Group as={Row} controlId="formHorizontalEmail">
<Form.Label variant="settingsLabel" column sm={3}>
Course Title
</Form.Label>
<Col sm={5}>
<Form.Control/>
</Col>
</Form.Group>
</Form>
</div>
</div>
);
}
CSS:
/* A big wrapper for everything on this page */
.content{
display: flex;
align-items: center;
justify-content: center;
}
/* The box containing the class settings */
.box {
width: 600px;
height: 600px;
border: 30px solid #A6D1DF;
margin-top:50px;
}
.center-items{
margin-top: 1em;
text-align: center;
}
/* Gives the form left/right margin and sets text color */
.course-info {
padding-left: 20px;
color: #9E7772;
}
Form.Label-settingsLabel {
font-size: 1em;
color: red;
}
And the form content overflows the right-hand side of the box, and removing the margin fixes the problem.
However, I still want that margin for styling purposes. Any suggestions? Thanks
Thanks in advance for your help.
I will update this post with the solution because I think some people can have the same issue and after some search on the web I found no answer.
The problem
I use a modal component in a component included in my App.vue. Everything works except with the navbar because when i put the mouse in the window, the navbar become white and go over the black background of the modal.
You can see the front in the image below when the mouse is out.
// Unfortunatelly I need 10 reputations to add it.
To fix that I tried lot of things but nothing works right now. If I delete z-index:1 from the navbar the problem is fixed but if i put some font awesome content on my website, the navbar will appear behind.
The css
nav {
display: flex;
background-color: #FFFFFF;
height: 50px;
position: sticky;
top: 0px;
z-index: 1;
}
.modal-mask {
position: fixed;
top: 0;
left:0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal {
background-color: #FAFAFA;
display: flex;
flex-direction: column;
}
The App.vue
<template>
<div id="app">
<NavBar></NavBar>
<router-view/>
</div>
</template>
<script>
import NavBar from './components/layout/Navbar'
export default {
components: {
NavBar
},
}
</script>
The modal
<template>
<div class="modal-mask">
<div class="modal"
role="dialog">
<slot name="body">
No content
</slot>
</div>
</div>
</template>
<script>
export default {
name: 'modal',
methods: {
close() {
this.$emit('close');
},
},
};
</script>
z-index only works with position try to give position to .modal class relative or absolute
I'm working with Ionic framework, and I need to have a footer with background color red and with a text align in the center. The footer need to have a behaviour like a button; The footer is should be like a Button where in the center there is the text 'REGISTER':
I try this code:
IONIC HTML:
<ion-content>
Some content!
</ion-content>
<ion-footer-bar class="myColor">
<div class="buttons">
<button class="button">REGISTER</button>
</div>
</ion-footer-bar>
CSS:
.myColor{
color:red
}
.button{
color:white;
text-align:center;
}
But, it doesn't work. i don't know;
Some of you have some good advice:
Thanks!
You should just set the whole footer as a clickable element like this:
<ion-footer-bar class="myColor" ng-click="myRegisterFunction()">
REGISTER
</ion-footer-bar>
And then you can just use simple css:
.myColor {
background-color: blue;
text-align: center;
justify-content: center;
align-items: center;
color: white;
}
And in your controller you can call the function:
$scope.myRegisterFunction = function() {
// do the registration stuff
}
ion-footer-bar{ --background : blue; }
I have no idea why the vertical alignment doesn't work as in the demos. The title appears below the left button. I have tried JQM 1.4.3 & 1.4.5 same result.
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a class="ui-btn-left ui-nodisc-icon ui-btn-inline ui-mini" href="#mypanel"
data-icon="grid" data-iconpos="notext"></a>
<h1 class="ui-title">Add Program</h1>
</div>
http://jsfiddle.net/59XDP/47/
It is because .ui-title is set to display: block which occupies a new row. Solution is to try inline-block
CSS
.custom-title {
display: inline-block;
margin: 0 40%;
}
HTML:
<h1 class="ui-title custom-title">Add Program</h1>
Output:
JSfiddle
I have used !important in JSfiddle, you make sure you load the Custom CSS afterwards to overwrite it.
All you have to do is set text-align: center; on the div.header element and display: inline-block; on the h1.ui-title element
(Demo)
.header {
text-align: center;
}
.ui-title {
display: inline-block;
}