I currently have 2 submit buttons that cannot be place side by side.
.submit-button {
color: #fff;
background: #55a1ff;
border: 0;
outline: 0;
width: calc(15%);
height: 50px;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-top: 70px;
margin-left:100px;
border-radius: 30px;
}
.cancel-button {
color: #fff;
background: #55a1ff;
border: 0;
outline: 0;
width: calc(15%);
height: 50px;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-left:450px;
border-radius: 30px;
}
<div class="arrange3">
<button type="submit" class="submit-button" name="save", value="save">Submit</button>
</div>
<div class="arrange3">
<button type="cancel" class="cancel-button" name="cancel", value="save">Cancel Claim</button>
</div>
How am i suppose to place the buttons side by side. It would be great if u can provide the code to me. Thanks
Make arrange3 class display inline.
.arrange3{
display: inline;
}
Related
I'm building the traditional todo list app in an effort to increase my understanding of Vuejs. Most of the functionality is working as expected, however my todo items are not displaying properly. Each item should have a "delete" button that shows up on the right side of its row, but the buttons are bleeding into the row below (see image).
What irks me is that the checkboxes are displaying properly, but the buttons are not. I've tried changing all the css for the buttons to that for the checkbox, but this didn't work
TodoItem.vue
<template lang="html">
<li class="todo-item" v-bind:class="{ 'is-complete': todo.completed }">
<div class="checkbox-holder">
<input type="checkbox" v-on:change="markComplete(todo.id)" />
</div>
<h2>{{ todo.title }}</h2>
<button v-on:click="deleteTodo(todo.id)" class="del">x</button>
</li>
</template>
App.scss
.todos {
position: absolute;
display: block;
width: 656px;
background-color: white;
margin-left: 266px;
border-right: $generic-border;
min-height: calc(100vh);
padding-left: 40px;
padding-right: 40px;
padding-top: 80px;
padding-bottom: 80px;
#include mq("900px") {
margin-left: 0;
width: auto;
}
h2 {
font-size: 20px;
font-weight: normal;
}
&__list li {
line-height: 1.4;
color: #333;
font-size: 14px;
list-style-type: none;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
margin-top: 20px;
padding: 20px;
&.is-complete {
text-decoration: line-through;
}
button {
#include btn("30px");
float: right;
display: block;
}
.checkbox-holder {
margin-right: 20px;
margin-left: 20px;
align-items: center;
justify-content: center;
line-height: 16px;
float: left;
.checkbox {
cursor: pointer;
border-color: gray;
color: #343434;
height: 16px;
width: 16px;
border: 1px solid gray;
border-radius: 16px;
}
}
}
}
Here's how the buttons are displaying.
You can see the below code.
li {
display: flex;
align-items: center;
}
<ul>
<li class="todo-item">
<div class="checkbox-holder">
<input type="checkbox"/>
</div>
<h2>Hello world</h2>
<button>x</button>
</li>
</ul>
I would like to create an alignment along a div container with the following structure. There are 3 buttons and one span element but this could be replaced with other elements if needed.
I started creating this
body {
margin: 0;
background-color: #222222;
}
.todoContainer {
display: flex;
align-items: center;
outline: none;
border: 0;
border-radius: 0;
border-bottom: 1px dotted #666666;
padding-bottom: 5px;
margin-bottom: 15px;
}
.todoContent {
font-size: 25px;
color: #ffffff;
}
.btnTodoAction {
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 40px;
border: 0;
background: #2a2a2a;
color: #555555;
}
.todoIsCompleted>.todoContent {
position: relative;
color: #666666;
}
.todoIsCompleted>.todoContent::before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 2px solid #85bf6b;
}
.todoIsCompleted>.btnToggleTodoState {
color: #85bf6b;
}
<div class="todoContainer">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 1</span>
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
<div class="todoContainer todoIsCompleted">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 2</span>
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
and tried to add float: right to the buttons on the right side but they didn't stick to the right side.
How can I achieve it? (A solution using display: grid would be fine too)
I have edited your code and here is what you expected , please have a look
I have used position style to make it right aligned by placing two button in one div<div class="pushRight"> and added styles for that div
body {
margin: 0;
background-color: #222222;
}
.todoContainer {
display: flex;
align-items: center;
outline: none;
border: 0;
border-radius: 0;
border-bottom: 1px dotted #666666;
padding-bottom: 5px;
margin-bottom: 15px;
position: relative;
}
.todoContent {
font-size: 25px;
color: #ffffff;
}
.btnTodoAction {
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 40px;
border: 0;
background: #2a2a2a;
color: #555555;
}
.pushRight{
position: absolute;
right:0
}
.todoIsCompleted>.todoContent {
position: relative;
color: #666666;
}
.todoIsCompleted>.todoContent::before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 2px solid #85bf6b;
}
.todoIsCompleted>.btnToggleTodoState {
color: #85bf6b;
}
<div class="todoContainer">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 1</span>
<div class="pushRight">
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
</div>
<div class="todoContainer todoIsCompleted">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 2</span>
<div class="pushRight">
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
</div>
We can achieve this using float, check the sample code.
Here added floating instead display:flex
For right alignment added a class
.pull-right{
float:right;
}
and it will be called in
<button class="btnTodoAction pull-right">D</button>
<button class="btnTodoAction pull-right">E</button>
In the following HTML/CSS snippet, I'm trying to align the output div below the input field in such a way that they have the same width whenever the window is resized.
Right now the elements get misaligned whenever the viewport dimensions are changed.
How do i refactor and improve my CSS to achieve the desired result?.
I am still very fairly new to web design and development in general and would appreciate it if i could get detailed answers and suggestions. Thanks.
CSS/HTML
html {
font-size: 62.5%;
}
body {
background-color: #c0c0c0;
font-size: 1.6rem;
}
.section {
position: relative;
margin-top: 2rem;
text-align: center;
}
header {
margin-bottom: -2rem;
}
.text-field {
display: inline-block;
background-color: #c0c0c2;
border-top: .4rem solid;
border-color: red;
border-radius: .3rem;
color: black;
width: 50%;
height: 4.2rem;
text-align: left;
text-decoration: none;
font-size: 1.5rem;
min-width: 17.5rem;
}
.btn {
display: inline-block;
background-color: blue;
border-color: black;
border-radius: 3px;
border-style: dotted;
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.output-div {
position: absolute;
display: block;
font-size: 1.4rem;
background-color: #fff;
border-top: .5rem solid;
border-right: .15rem solid;
border-bottom: .15rem solid;
border-left: .15rem solid;
border-color: clack;
border-radius: .3rem;
margin: .5rem auto auto 6.5rem;
min-width: 17.4rem;
padding: .1em;
width: 50%;
height: auto;
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word;
}
<br>
<!-- ✓ Oguntoye -->
<section class="section">
<header>
<h1>Header</h1>
</header>
<div class="user-interaction-area">
<form id="form">
<input class="text-field" type="text" placeholder="Input">
<button class="btn" type="button">Run</button>
</form>
</div>
<!-- output block-->
<div class="output-div">
<kbd class="input-output">Oy</kbd>
<samp class="run-output">vey!</samp>
</div>
</section>
I put your example code inside a codepen. https://codepen.io/melvinhicklin/pen/qyRwXB?editors=1100
From what I could see, the text areas already do a good job of staying the same width.
To align them, I added the following to the .output-div CSS Class:
position:relative;
left:-71px;
display:inline-block;
Essentially I have several divs and I'm trying to align them so that they stay in line with each other regardless of the size of the window. I have a dropdown bar (testRegion) and I have a large textarea where users can input SSNS (SSNinput). Much of the rest of the page, on the righthand should be a table that displays the results.
I apologize, I don't have access to it at the moment, so I can't really show you how I'd like it to look, even with a screenshot. But essentially the height of testRegion, SSNinput, and the buttons below, should equal the height of the table on the righthand side. The table is being created successfully at the bottom of the code here. (maintbl).
<div class="pageContent row col-lg-12" style="white-space:nowrap; width:1200px;" >
<div class="col-lg-2" style="width: 245px; display:inline-block; white-space:nowrap;">
<div class="row" style="white-space:nowrap; display:inline-block; width:245px;">
<select class=" btn btn-default dropdown-toggle" id="testRegion" data-toggle="dropdown" style="width:235px">
<option value="a">Acceptance</option>
<option value="i">Integration</option>
</select>
</div>
<div class="row" style="padding-top: 8px; border: dotted; white-space:nowrap; width:245px;">
<textarea id="SSNinput" rows="21" class="form-control" placeholder="Paste/Import SSNS Here" style="width: 235px; display: inline-block;"></textarea>
</div>
<div id="navbuttons" style="float: left; white-space: nowrap; padding-top: 10px; width:245px;">
<button id="Validate" title="Validate" class="glyphicon glyphicon-play" onclick="getParticipantPlans();"></button>
<button id="Import" title="Import" class="glyphicon glyphicon-log-in"></button>
<button id="Export" title="Export" class="glyphicon glyphicon-log-out" onclick="ExportToExcel();"></button>
<button id="Clear" title="Clear" class="glyphicon glyphicon-repeat" onclick="ClearArea();"></button>
</div>
</div>
<div id='jqxWidget' class ="col-lg-8" style="font-size: 13px; font-family: Verdana; display: inline-block; width:800px; ">
<div id="maintbl"></div> <!--table created here successfully.-->
</div>
</div>
I'm sorry I can't provide a better description for you all. Essentially the behavior now, is that the SSNinput and testRegion divs get all out of whack and not level with the table. I've tried a bunch of container divs, and setting whitespace to nowrap. Nothing seems to work. Any guidance here would be appreciated. Thanks.
EDIT
Here's the attached CSS I'm using.
#nav {
padding-right: 10px;
resize: none;
max-width: 230px;
min-width: 230px;
float: left;
}
#thead {
color: white;
background-color: #0c98cf;
font-family: Arial;
width: 100%;
text-align: center;
border-radius: 10px;
}
#maintbl td {
text-align: center;
}
#title-wrapper {
background-color: #086387;
}
#import {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
padding-left: 12px;
color: white;
}
#clear {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
padding-left: 12px;
color: white;
text-align: center;
}
#export {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
border-radius: 6px;
padding-left: 12px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
#validate {
cursor: pointer;
font-size: 1.9em;
background-color: #0c98cf;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 6px;
color: white;
}
#validate:hover {
color: white;
background-color: #808080;
}
#export:hover {
color: white;
background-color: #808080;
}
#import:hover {
color: white;
background-color: #808080;
}
#clear:hover {
color: white;
background-color: #808080;
}
#SSNinput {
resize: none;
border-radius: 0px;
overflow-y: auto;
display: inline-block;
border-radius: 9px;
}
/*drop area for importing in popup window*/
#drop {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 15pt bold, "Vollkorn";
color: #bbb;
}
So I've spent some time trying to figure this one out, but I've ended up turning to StackOverflow for help. I'm trying to get my search bar and go button to display on one line and am having trouble doing this.
The html code for the inputs is:
<nav class="sidebar">
<input type="text" id="search" placeholder="search">
<input type="button" name="button" value="Go" class="goButton">
</nav>
And the CSS for the two inputs is as follows:
#content .sidebar #search {
width: calc( 100% - 45px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
Can anyone suggest a fix for this? Currently, the inputs display as follows:
Thanks in advance.
It gets aligned when the text box is a little smaller and the margin-top of the button is removed:
#content .sidebar #search {
width: calc( 100% - 60px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
FIDDLE: http://jsfiddle.net/s0y93L87/
try put this:
#content .sidebar #search {
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
float: left;
width: 200px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 48px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
float: left;
}
There are a few reason why applyingwidth: calc( 100% - 45px ); to the text input isn't leaving enough room for the 45px-width button:
The browser is adding padding to the text input (+2 pixels for left and right padding) (at least in Chrome)
The browser is adding a border to the text input (+2 pixels for left and right borders) (at least in Chrome)
Because the text input and button are not on the same line, there is a single whitespace character separating them, adding more width.
Define explicit padding and border for the text input so browsers can't reset it, and adjust the 45px to 47px accordingly (to account for left and right 1px borders):
#content .sidebar #search {
border:1px solid #aaa;
padding:0;
width: calc( 100% - 47px );
}
And remove the whitespace between the two inputs by putting them on the same line in the HTML:
<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">
I also removed the top: -48px from your .goButton CSS.
Using a CSS reset can help eliminate this kind of problem of browsers adding unexpected styles.
Result: http://jsfiddle.net/k305a0jo/1/
Have you tried put it inside a table? something like this:
<nav class="sidebar">
<table>
<tr>
<td class='search'>
<input type="text" id="search" placeholder="search">
</td>
<td class='go'>
<input type="button" name="button" value="Go" class="goButton">
</td>
</tr>
</table>
</nav>
.sidebar #search {
width: calc(100%-45px);
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
}
/* Go button for search*/
.sidebar .goButton {
top:-48px;
background-color: #BA2022;
width:45px;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
}
td.search {
}
td.go {
}
tr {
width: calc(100%);
margin-bottom: 21px;
}
Here is a jsfiddle:
http://jsfiddle.net/yzmkxfa7/4/