Given below is the code which I coded using material ui.I'm still new to that area.I need to center my button.But it comes to the corner.Is there any problem in my code?
<Button className={clsx(classes.button)}
type="submit"
alignItems="center"
variant="contained">
{'Sign Up'}
</Button>
</div>```
button:{
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 8,
border: 0,
color: 'white',
height: 48,
width: "30%",
padding: '10px 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
justifyContent: 'center'
}
alignItems="center" does not work for me.
paper: {
textAlign: 'center',
color: theme.palette.text.secondary,
},
I enabled textAlign: 'center' and It fixed
justifyContent: 'center'
You can use justifyContent or AlignItems in
display:flex
mode. Otherwise you can use text-align: center or margin: auto to make your child element center.
Related
I hope its a simple question - how can I define a button with icon and text in material 15
<button mat-button>
<mat-icon>keyboard_arrow_left</mat-icon>
Back To Home
</button>
But it is not aligned
Found a solution for this issue. The reason for this is that button im Material are now bigger. Assigning icon this class will fix the issue:
.small-icon-button {
width: 1.5rem !important;
height: 1.5rem !important;
padding: 0px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
& > *[role='img'] {
width: 1.5rem;
height: 1.5rem;
font-size: 1.5rem;
svg {
width: 1rem;
height: 1rem;
}
}
.mat-mdc-button-touch-target {
width: 1.5rem !important;
height: 1.5rem !important;
}
}
I was trying to create an OTP screen with autofill functionality using the react-native-otp-inputs plugin. Everything is working fine, but when I try to add any button below this OTPInputs component the background colour of the button gets changed to a greyish one.
import React, {useEffect, useState, useRef, useCallback} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import OtpInputs from 'react-native-otp-inputs';
export function AuthenticationScreen({navigation}) {
useEffect(() => {
RNBootSplash.hide({duration: 250});
});
const otpRef = useRef();
const focusOTP = useCallback(() => {
otpRef.current.focus();
}, []);
const resetOTP = useCallback(() => {
otpRef.current.reset();
}, []);
return (
<View style={{backgroundColor: 'white', flex: 1}}>
<OtpInputs
style={{
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
paddingLeft: 30,
paddingRight: 30,
borderWidth: 1,
borderColor: 'blue',
}}
inputContainerStyles={{
borderWidth: 0,
borderBottomWidth: 1,
borderColor: 'black',
}}
inputStyles={{textAlign: 'center'}}
handleChange={(code) => console.log(code)}
numberOfInputs={6}
/>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginVertical: 40,
borderWidth: 1,
borderColor: 'red',
}}>
<TouchableOpacity
style={{
height: 50,
width: 100,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Continue</Text>
</TouchableOpacity>
</View>
</View>
);
}
This happens only if the all the otp fields are filled. Please find the attached screenshot for a detailed view.
As you can see I haven't added any background colour to touchable opacity, still it is showing a grey colour after the otp inputs are filled. What may be the reason for this ?
Apparently when you end editing the OTP fields it changes the next touchable opacity.
As workaround you can add self enclosed touchable opacity with no width and height like this
<TouchableOpacity/>
And here is a full example with your code
I'm just getting some experience with Google Charts and I'm having a hard time understanding the difference between setting a width and height in the chart options vs. setting the width and height in the chart area settings. For example, I've seen this done:
var options = {
width: '500px',
height: '400px',
chartArea: {
left: "15%",
top: "5%",
height: "80%",
width: "75%"
},
//chartArea: { top: 10, left: 80, bottom: 50 },
legend: { position: 'bottom', alignment: 'start' },
annotations: { alwaysOutside: true},
hAxis: {
gridlines: { count: 10 },
},
If I had to guess, this is telling Google Charts to use a 'canvas' size of 500 x 400 pixels but the chart itself should only consume 75% of the width of that and 80% of the height. Is this correct?
chart options height & width are for the entire chart in respect to the chart's container,
including axis labels, titles, legends, etc...
option chartArea is for the inside portion of the chart,
where the plot actually occurs, excluding any labels on the edges...
the following options will stretch the chart to the full width and height of the chart's container,
and stretch the chart area to the full width and height of the chart,
leaving room on the edges for the labels (top, left, bottom, right)
chartArea: {
height: '100%',
width: '100%',
top: 32,
left: 32,
bottom: 32,
right: 16
},
height: '100%',
width: '100%',
see following working snippet...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var chart = new google.visualization.ChartWrapper({
chartType: 'ScatterChart',
containerId: 'chart',
dataTable: google.visualization.arrayToDataTable([
['x', 'y'],
[10, 15],
[15, 13],
[18, 20],
[24, 26],
[34, 30],
[40, 43],
[49, 48],
[50, 55],
[65, 67],
[70, 70],
[72, 70],
[73, 70],
[80, 85]
]),
options: {
chartArea: {
height: '100%',
width: '100%',
top: 32,
left: 32,
bottom: 32,
right: 16
},
height: '100%',
width: '100%',
legend: {
position: 'top'
}
}
});
chart.draw();
window.addEventListener('resize', function () {
chart.draw();
}, false);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
.chart {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart"></div>
I am trying to create a login form like below on React Native:
I am having trouble creating a Form/ TextInput with solid border (don't worry about other CSS styling. I just need to get the solid border.)
Imports:
import { View, Text, TextInput } from 'react-native';
import { FormLabel, FormInput } from 'react-native-elements';
import { Container, Header, Content, Form, Item, Input, Label, Button } from 'native-base';
This is the style:
const styles = {
container: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
},
loginSquare: {
backgroundColor: '#FFFFFF',
height: 300,
width: 300,
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center'
},
loginHeader: {
backgroundColor: '#660008',
width: '100%',
height: 75
},
loginText: {
color: '#FFFFFF'
},
loginForm: {
width: 250,
height: 50
},
loginButton: {
backgroundColor: '#660008'
},
loginForm: {
height: 75,
marginLeft: 25,
marginRight: 25,
borderColor: 'gray'
}
}
and code:
render(){
return (
<View style={styles.container}>
<View style={styles.loginSquare}>
<View style={styles.loginHeader}>
<Text style={styles.loginText}>Login</Text>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Email"
/>
</View>
<View style={styles.loginForm}>
<TextInput
style={{height: 75}}
placeholder="Password"
/>
</View>
<View>
<Button block style={styles.loginButton}>
<Text style={styles.loginText}>Sign In</Text>
</Button>
</View>
</View>
</View>
The code sample above was my attempt using RN's TextInput component + pure CSS. I am also looking at NativeBase and RNElements (RNElements forms API: here, NativeBase forms API: here), but RN Elements does not mention anything about Text Input + Border, and while Native Base mentioned it, I tried, unsuccessfully:
<Form bordered>
<Item>
<Input placeholder="Username" />
</Item>
</Form>
What is one way I can create bordered input like the first screenshot?
If you want a border input then you need to add the borderWidth and borderColor prop to your TextInput style prop. The code for creating these 2 TextInput with border will be as below:-
<View style={{
justifyContent: 'center',
alignItems: "center"
}}>
<TextInput
style={{
borderWidth: 2, // size/width of the border
borderColor: 'lightgrey', // color of the border
paddingLeft: 10,
height: 75
}}
placeholder="Email"
/>
<TextInput
style={{
borderWidth: 2,
borderColor: 'lightgrey',
margin: 10,
height: 75,
paddingLeft: 10
}}
placeholder="Password"
/>
</View>
This will create your TextInput with your desired border :)
<View tyle={{flexDirectoin:'column',alignItems:'center'>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
<View
style{{flexdirection:'row',alignItems:'center',
borderWidth:1,borderColor:'#000000'>
<Image/>
<TextInput/>
</View>
</View>
Something roughly like this will do
A website I'm working on needs to use a certain shadow effect for some panels.
I have found the desired CSS shadow on the web but I have noticed it has some problems - when the target div is very tall, the shadow pops out behind it on its sides.
I discovered the shadow is built from two, solid colour, rectangular objects that cast the shadow. They hide behind the div at an angle which creates that 'curly', sheet of paper-like shadow effect. This angle also makes them pop out when used with a very tall div block.
I'm not very good with CSS so I don't know how to fix that. I've tried limiting the rectangles max-height property, but that makes them too short to leave any shadow below the div.
Is there a way to make the boxes stick to the bottom of the div and never extend around its sides?
This is the shadow I used:
.shadow {
position: relative;
}
.shadow:before, .shadow:after {
z-index: -1;
position: absolute;
content:"";
bottom: 12px;
left: 7px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.shadow:after {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
right: 7px;
left: auto;
}
You can see an example in this fiddle, the first div shows the shadow working properly, the second one shows the problem: jsfiddle
You can remove the top property on the pseudo elements and give a fixed height to them. You can also give a max-height value to pseudo elements to ensures they don't overflow the div when it is short :
DEMO
.box {
background-color: #3a6fa9;
display: block;
padding: 4px;
margin-bottom: 30px;
margin-left: 30px;
border: 1px solid #ddd;
border-radius: 4px;
width: 500px;
height: 300px;
}
.box-tall {
width: 500px;
height: 2000px;
}
.shadow {
position: relative;
}
.shadow:before, .shadow:after {
z-index: -1;
position: absolute;
content:"";
bottom: 12px;
height:100px;
max-height:10%;
left: 7px;
width: 50%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.shadow:after {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
right: 7px;
left: auto;
}
Instead of top: 80%;, you can just set a small height, such as height: 20px;:
.shadow:before, .shadow:after {
z-index: -1;
position: absolute;
content: "";
bottom: 12px;
left: 7px;
width: 50%;
height: 20px;
/* top: 80%; */
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
your fiddle updated: http://jsfiddle.net/e6yh07pd/3/
problem was the
top:80%;
value you have. can't understand why you used it... isteed remove it and just add a height fixed (px) for your after and before