how to move button to left - css

I am using angular2dart components and do not know, how to move the button on left side.
here is html:
<div class="forms">
<form (ngSubmit)="onSubmit()" #loginCtrl="ngForm">
<div>
<material-input type="text"
class="login"
required
floatingLabel
label="User"
[(ngModel)]="login.user"
ngControl="user"
#user="ngForm" ></material-input>
</div>
<div>
<material-input
class="login"
type="password"
floatingLabel label="Password"
[(ngModel)]="login.password">
</material-input>
</div>
<div>
<material-input
class="login"
type="text"
floatingLabel
label="Language"
[(ngModel)]="login.language">
</material-input>
</div>
<div>
<material-button raised class="btn-blue">Login</material-button>
</div>
</form>
</div>
here is the css:
.container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.container .row {
width: auto;
height: auto;
background: #fff;
border-radius: 2px;
display: inline-block;
margin: 1rem;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
padding: 20px;
}
.container .row .image {
width: auto;
height: auto;
padding: 10px;
background-color: #2D3E50;
}
.container .row .forms {
width: auto;
height: auto;
margin: auto;
}
.container .row .forms .input {
width: 256px;
}
.btn-blue {
background-color: #2196F3;
color: white;
font-weight: bold;
font-size: 1.2em;
width: 280px;
margin-left: -20px;
}
material-input.login {
width: 280px;
}

Add css to login button
{
width:auto;
float:left;
}
and class row to div which wrapped on login button.

Related

Shadow between two divisions in the CSS

I am creating a site in order to monitor employees, and there are many interfaces within the site, and from these interfaces there is an interface to add a project, which is the interface shown in the image and as shown in the image there are two sections in the interface, the first part is colored in white and the second section is colored in blue.
How can I create shadow between the two sections?
<template>
<v-app>
<div class="mainPage">
<!-- right section -->
<div class="split left">
<div class="left_body_content">
<div class="left-body-content_logo">
<img class="logo" src="../../../../src/assets/logo_base.png" />
</div>
<div class="left-body-content_illustrationImage">
<v-img src="../../../../src/assets/create.svg"></v-img>
</div>
</div>
</div>
<div class="split-1 right">
<div class="right_body_content">
<div class="right_body_content_text">
<div class="text">
<h1>Create project</h1>
</div>
</div>
<div class="right_body_content_field">
<v-text-field
label="Project Name"
v-model="project_Name"
color="#5f48ea "
class="field"
>{{ project_Name }}
</v-text-field
>
</div>
<div class="right_body_content_button">
</div>
</div>
</div>
</div>
</v-app>
</template>
<style scoped>
.mainPage {
justify-content: flex-start;
align-items: flex-start;
position: relative;
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.split {
height: 100%;
width: 66%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
}
.left_body_content {
display: flex;
width: 100%;
}
.left {
left: 0;
background-color: #fff;
}
.left-body-content_logo {
display: flex;
width: 18%;
padding-left: 2rem;
}
.logo {
display: flex;
width: 100%;
z-index: -1;
}
.left-body-content_illustrationImage {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
background-size: cover;
background-position: center;
z-index: -1;
width: 90%;
height: 100%;
position: absolute;
padding-top: 7rem;
padding-left: 5rem;
}
.split-1 {
height: 100%;
width: 34%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 2rem;
}
.right_body_content {
display: flex;
width: 100%;
height: 100%;
}
.right_body_content_text {
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
width: 90%;
height: 50%;
padding-left: 2rem;
}
.text {
display: flex;
font-family: Aviliator;
color: #5f48ea;
}
.right_body_content_field{
display: flex;
justify-content: flex-start;
align-items: center;
position: fixed;
width: 25%;
height: 100%;
padding-left: 2.5rem;
}
.field{
display: flex;
width: 40%;
height: 30%;
}
.right {
right: 0;
background-color: blue;
}
</style>
Add class shadow to the div having class split-1 and define shadow class in styles as
.shadow{
-webkit-box-shadow: -3px 0px 0px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2,
-moz-box-shadow: -3px 0px 0px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: -3px 0px 0px #ccc; /* IE 9, Firefox 4+, Chrome 6+ */
}
this will add a shadow of 3px to the left of the div with class shadow
You can read more about box-shadow here - https://css-tricks.com/almanac/properties/b/box-shadow/
Here I have created two div's
and for shadow using:
box-shadow: /* offset-x | offset-y | blur-radius | spread-radius | color */
.first {
background-color: rgba(0, 0, 0, 0);
width: 500px;
height: 100px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
margin: 5px;
}
.second {
background-color: rgba(0, 0, 255, 1);
width: 500px;
height: 100px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
<div>
<div class="first">
</div>
<div class="second">
</div>
</div>

Force 100% height and vertically align content in FlexBox Columns

I've looked at many other questions and answers, but can't figure out why I can't force 100% height on some flexbox columns - i.e., "Genre" with one line of text to match the height of "Song & The Artist" with two lines - while also vertically aligning and centering all text:
Codepen: https://codepen.io/bluedogranch/pen/ZEYXGmx
HTML:
<div class="Rtable Rtable--4cols Rtable--collapse">
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell">Song<br /><span class="artist">The Artist</span></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell">Song<br /><span class="artist">The Artist</span></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
</div>
CSS:
html, body {
min-height: 100%;
margin: 0 auto;
}
.Rtable {
display: flex;
height: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.Rtable-cell, .genre-cell, .song-cell, .flag-cell, .link-cell {
box-sizing: border-box;
flex-grow: 0;
width: 100%;
height: 100%;
padding: 0.5em 0em 0.5em 0em;
overflow: hidden;
list-style: none;
color: #000;
font-size: 12px;
text-align: center;
}
.genre-cell {
width: 20% !important;
font-weight: bold;
}
.song-cell {
width: 40% !important;
}
.flag-cell {
width: 30% !important;
}
.link-cell {
width: 10% !important;
}
.Rtable--4cols > .Rtable-cell {
width: 25%;
}
.Rtable {
position: relative;
top: 1px;
left: 1px;
}
.Rtable-cell {
margin: -1px 0 0 -1px;
border: solid 1px #000000;
}
html, body {
min-height: 100%;
margin: 0 auto;
}
.Rtable {
display: flex;
height: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
margin: 0;
padding: 0;
}
.Rtable-cell, .genre-cell, .song-cell, .flag-cell, .link-cell {
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
width: 100%;
padding: 0.5em 0em 0.5em 0em;
overflow: hidden;
list-style: none;
color: #000;
font-size: 12px;
text-align: center;
}
.genre-cell {
width: 20% !important;
font-weight: bold;
}
.song-cell {
width: 40% !important;
}
.flag-cell {
width: 30% !important;
}
.link-cell {
width: 10% !important;
}
.Rtable--4cols > .Rtable-cell {
width: 25%;
}
.Rtable {
position: relative;
top: 1px;
left: 1px;
}
.Rtable-cell {
margin: -1px 0 0 -1px;
border: solid 1px #000000;
}
<div class="Rtable Rtable--4cols Rtable--collapse">
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell"><div>Song<br /><span class="artist">The Artist</span></div></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
<div class="Rtable-cell genre-cell">Genre</div>
<div class="Rtable-cell song-cell"><div>Song<br /><span class="artist">The Artist</span></div></div>
<div class="Rtable-cell flag-cell">Length</div>
<div class="Rtable-cell link-cell">Link</div>
</div>

why does box-shadow disappear for a div when i remove the relative position for the div?

i have a top_div which when set to relative position box shadow retains. and when i remove relative position box shadow disappears. could someone help me understanding this or where am i going wrong.
Below is the code,
<div class="top_div">
<div class="drawer">
<div class="menu">
<header>
<Svg>
<button></button>
</header>
<ul>
<li></li>
</ul></div></div></div>
.top_div {
z-index: 1;
display: flex;
position: relative;
width: 100%;
height: 48px;
padding: 0 12px 0 12px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
align-items: center;
}
.drawer {
display: flex;
flex-direction: column;
background-color: $white;
position: absolute;
width: 380px;
top: 55px;
right: 8px;
min-height: 40%;
max-height: 80%;
header {
height: 41px;
border-bottom: 1px solid #CCCCCC;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 0px;
padding-top: 2px;
svg {
margin-left: 16px;
}
}
ul {
overflow-x: hidden;
}}}

Trouble Aligning Buttons Within a div

I'm making a simple calculator page but I'm having a lot of trouble aligning the buttons the way I would like. I have all of my buttons inside of a div which is already the width I want each row of buttons to be. My problem is that no matter how I try to do the margins or the buttons either have extra room on the right side and they don't line up with the right side of the viewport or they are too big and they overflow onto the next line. I'm sure there is a simple solution to this but I'm too much of a beginner to see it. :(
Currently my CSS for the button container and buttons is as follows:
#buttons {
width:525px;
margin-left: 25px;
margin-top: 10px;
}
button {
width: 110px;
height: 110px;
border: 2px solid black;
border-radius: 20px;
margin: 10px 0px 0px 0px;
}
Codepen here.
Try width: 33% on the buttons. It tells the browser to use (roughly) 1/3rd if the available space for each button.
Flex box is worth learning.
Changes are noted with /**/ in the CSS.
Full example, https://codepen.io/anon/pen/LOZEPp
CSS
body {
background-color: #141414;
font-family: 'Rubik', sans-serif;
display: flex; /**/
justify-content: center; /**/
padding: 0; /**/
margin: 0; /**/
}
#calc-main {
background-color: #607466;
width: 550px; /**/
height: 700px; /**/
border: 3px solid black;
border-radius: 20px;
display: flex; /**/
flex-direction: column; /**/
justify-content: space-around; /**/
}
#calc-brand {
flex: 1; /**/
background: yellow;
text-align: center;
padding: 0; /**/
margin: 10px; /**/
}
#calc-viewport {
flex: 1; /**/
margin: 10px; /**/
font-size: 2em;
background-color: #D4D2A5;
padding: 0.25em; /**/
text-align: right;
border: 2px solid black;
border-radius: 20px;
}
#buttons {
margin: 10px; /**/
flex: 16; /**/
background: orange; /**/
display: flex; /**/
flex-direction: column; /**/
align-items: center; /**/
padding: 5px; /**/
}
.button-row { /**/
flex: 1; /* important */
background: yellow;
width: 100%; /**/
margin: 5px; /**/
display: flex; /**/
flex-direction: row; /**/
justify-content: space-between; /**/
}
button {
flex: 1; /* important */
max-width: 110px; /**/
max-height: 110px; /**/
border: 2px solid black;
border-radius: 20px;
margin: 10px; /**/
}
HTML
<body>
<div id='calc-main'>
<h1 id='calc-brand'>JAVASCRIPT CALCULATOR</h1>
<div id='calc-viewport'>
<p id='main-output'>0</p>
<p id='secondary-output'>0</p>
</div>
<div id=buttons>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
</div>
</div>
</body>
Try This:
.wrapper {
border: 1px solid #000;
text-align: center;
display: inline-block;
background-color: #607466;
}
.result {
margin:10px 20px;
}
input {
height: 20px;
border: 1px solid;
outline: none;
width: 100%;
background: yellow;
}
span {
background: #AAA;
width: 60px;
height: 60px;
display: inline-block;
margin: 0 20px 10px 10px;
line-height: 60px;
float: left;
cursor: pointer;
background: #FFF;
border: 1px solid;
}
span:hover {
background-color: #AAA;
}
.result ~ p {
padding-left: 10px;
clear: both;
}
<div class="wrapper">
<p class="result"><input type="text" name="result"></p>
<p><span>AC</span><span>CE</span><span>/</span><span>*</span></p>
<p><span>7</span><span>8</span><span>9</span><span>-</span></p>
<p><span>4</span><span>5</span><span>6</span><span>+</span></p>
<p><span>1</span><span>2</span><span>3</span><span>=</span></p>
<p><span>0</span><span>.</span><span>Invisible</span></p>
<br style="clear: both">
</div>

Firefox CSS position unpredictable behaviour

I have same HTML/CSS code working different in Chrome or Safari versus Firefox.
But Firefox also works sometimes.
For instance, if you resize the codepen window, inspect or make a change to the label of the input in Firefox, it behaves correct and then incorrect again.
Codepen Example
body {
overflow: hidden;
padding: 20px;
}
div, input {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
width: 100%;
padding: 40px 0px;
z-index: 10;
flex: 1 1 0%;
font-size: 16px;
}
.my-field {
display: flex;
flex-flow: column nowrap;
width: 100%;
font-size: 18px;
align-items: flex-start;
margin: 15px 0px;
}
.label-wrap {
display: flex;
align-items: center;
position: relative;
font-size: 0.85em;
margin-bottom: 5px;
width: 100%;
}
.label {
flex: 1;
}
.input-wrap {
display: flex;
position: relative;
width: 100%;
align-items: center;
}
.icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
z-index: 10;
padding: 6px;
position: absolute;
left: 0px;
margin-left: 2px;
}
.my-input {
display: flex;
position: relative;
width: 100%;
border-radius: 5px;
}
input {
width: 100%;
height: 48px;
line-height: 38px;
padding-left: 40px;
padding-right: 44px;
font-size: 1em;
text-align: inherit;
font-family: inherit;
border: 1px solid rgb(204, 204, 204);
resize: none;
}
<form>
<div class="my-field">
<div class="label-wrap">
<div class="label">
<span>Change this labe</span>
</div>
</div>
<div class="input-wrap">
<div class="icon-wrap">
<svg viewBox="0 0 24 24" width="100%" height="100%">
<g>
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
</g>
</svg>
</div>
<div class="my-input">
<input name="name" placeholder="Or resize codepen layout" autocomplete="off" spellcheck="false" type="text">
</div>
</div>
</div>
</form>
Inside Stack Overflow Chrome vs Firefox comparison
In Chrome:
In Firefox:
In Safari:
Any tip on how manage this in a safe way is welcome, thanks.
To make it work on every browser, you can remove
display: flex;
align-items: center;
justify-content: center;
on the icon-wrap div and add
top: 50%;
transform: translateY(-50%);
So you will vertically align the icon only with the absolute position.
This solution should work on Chrome, Safari & Firefox :)
body {
overflow: hidden;
padding: 20px;
}
div, input {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
width: 100%;
padding: 40px 0px;
z-index: 10;
flex: 1 1 0%;
font-size: 16px;
}
.my-field {
display: flex;
flex-flow: column nowrap;
width: 100%;
font-size: 18px;
align-items: flex-start;
margin: 15px 0px;
}
.label-wrap {
display: flex;
align-items: center;
position: relative;
font-size: 0.85em;
margin-bottom: 5px;
width: 100%;
}
.label {
flex: 1;
}
.input-wrap {
display: flex;
position: relative;
width: 100%;
align-items: center;
}
.icon-wrap {
/* Remove this */
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
width: 40px;
height: 40px;
z-index: 10;
padding: 6px;
position: absolute;
left: 0px;
margin-left: 2px;
/* Add this */
top: 50%;
transform: translateY(-50%);
}
.my-input {
display: flex;
position: relative;
width: 100%;
border-radius: 5px;
}
input {
width: 100%;
height: 48px;
line-height: 38px;
padding-left: 40px;
padding-right: 44px;
font-size: 1em;
text-align: inherit;
font-family: inherit;
border: 1px solid rgb(204, 204, 204);
resize: none;
}
<form>
<div class="my-field">
<div class="label-wrap">
<div class="label">
<span>Change this labe</span>
</div>
</div>
<div class="input-wrap">
<div class="icon-wrap">
<svg viewBox="0 0 24 24" width="100%" height="100%">
<g>
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
</g>
</svg>
</div>
<div class="my-input">
<input name="name" placeholder="Or resize codepen layout" autocomplete="off" spellcheck="false" type="text">
</div>
</div>
</div>
</form>

Resources