this is my first question here.
I'm having an issue getting my html form buttons side by side.. can somebody take a look and tell me whats wrong? it'd seem like they should by default be placed inline, but I guess that isnt the case.
Here is my html code.
<input type="submit" name="1" formtarget="" value="1">
<input type="submit" name="2" formtarget="" value="2">
<input type="submit" name="3" formtarget="" value="3">
<input type="submit" name="4" formtarget="" value="4">
and here is the CSS for the form input and individual name
#form input {
position: relative;
display: inline;
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
line-height: 44px;
-webkit-appearance: none;
}
and this is the same for each button besides the color changes.
#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
#form input[name="2"] {
margin-top: 8px;
height: 44px;
width: 50%;
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
Can someone help me set this up so that they are inline, side by side?
EDIT: This is what it shows.
http://jsfiddle.net/g01juc2z/2/
you have 4 elements set to width:50% which equals 200% width. Change them to width: 24% (inline-block elements have a natural spacing of 1 or 2px) or less and they will be aligned:
#form input[name="1"] {
margin-top: 8px;
height: 44px;
width: 24%; <---------------
background: #A901DB;
border-bottom: 1px solid #B404AE;
color: #FFF;
font-size: 18px;
text-align: center;
}
FIDDLE
in your css make these change where you write
[name="1"]
replace it with
[type="submit"]
and do not repeat it like a name
and another change is
width:24%;
Related
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;
}
I have a label to the left of a text input but it looks like the text is just slightly below the bottom of the input. Here is my relevant HTML:
<div id="nickbox">
<label for="nickname" id="nicklabel">Nickname:</label>
<input type="text" id="nickname" value="" maxlength="20" size="20" role="textbox"
aria-label="Enter your nickname." data-lpignore="true" autofocus />
<input type="button" id="nicknameconfirm" value="Set" />
</div>
And my CSS:
#nickbox {
border: none;
display: inline;
padding: 5px;
background-color: #ffffff00;
align-self:center;
font-size: 2em;
}
#nickname {
background-color: #44475a;
border: none;
height: 2em;
width: 20em;
outline: none;
}
This is what the results look like. What can I do to change this? I assume I need to add some CSS to #nicklabel. Thanks.
Put vertical-align: middle; into #nickname
#nickname {
background-color: #44475a;
vertical-align: middle;
border: none;
height: 2em;
width: 20em;
outline: none;
}
http://jsfiddle.net/6xqgb0mu/
What about this?
#nickbox {
display: flex; /* Change display on parent */
border: none;
padding: 5px;
background-color: #fff;
font-size: 2em;
}
#nickname {
background-color: #44475a;
border: none;
height: 2em;
width: 20em;
outline: none;
align-self: center; /* Apply to child */
}
Use position: sticky; Like here: jsfiddle
#nicklabel{
top: 13px;
position: sticky;
}
I'm working using Django. I'm new to coding and working on my first project. I do not know JQuery, but I read that it's possible to collapse/expand a window without JQuery.
I followed this webpage: CSS Expand/Collapse Section (A PEN BY Peter Nguyen)
The problem is that I'm trying to use this in a for loop. I'm able to get the layout how I want it, but when I use expand/collapse it only works for the first item in the loop. So, expand/collapse works perfectly on the first iteration of the loop, but not the rest.
HTML
{% for assignment in assignments %}
<form id=form action= "/project/assignments" method='post'>
{% csrf_token %}
<label class=labels><a href="{% url 'project:assg' assignment_id=assignment.id %}">
Assignment: {{assignment.denominator}} - {{assignment.description}} </a></label>
<input id="toggle" type="checkbox">
<label for="toggle" id=labels2>Criteria</label>
<div id=expand>
<section>
<p>[Number] [Name]: Expand content goes here.
</p>
</section>
</div>
<section>
<textarea id=boxes name="review">{{assignments.review}}</textarea>
<input type="hidden" name="Function_id" value={{assignments.id}}>
<input class=save_tasks type="submit" value="Save">
</section>
</form>
CSS
#toggle{
display: none;
visibility:hidden;
}
#labels2{
display: block;
padding: 0.5em;
text-align: center;
background-color: white;
border-top: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
color: black;
font-size: 20px;
font-weight: bold;
margin: -6px;
margin-top: 5px;
margin-left: 0px;
}
#labels2:hover {
color: #000;
}
#labels2::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent
50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background-color: white;
color:black;
font-size: 20px;
border-bottom: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
padding: 10px;
/* margin-top: -30px; */
}
#toggle:checked ~ #expand {
height: 180px;
}
#toggle:checked ~ #labels2::before {
content: "-";
}
How do I get the collapse/expand division to expand/collapse for all the items in the loop and not just the first one? Is my Django loop incorrect?
Thanks!
The loop is not the problem here.
You only use IDs in your code, and since they are supposed to be unique on a page, the browser uses only the first element that can be found.
The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
I have adjusted your code once in the necessary places:
.toggle {
display: none;
visibility:hidden;
}
.labels2 {
display: block;
padding: 0.5em;
text-align: center;
background-color: white;
border-top: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
color: black;
font-size: 20px;
font-weight: bold;
margin: -6px;
margin-top: 5px;
margin-left: 0px;
}
.labels2:hover {
color: #000;
}
.labels2::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
.expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background-color: white;
color:black;
font-size: 20px;
border-bottom: 4px solid #5e6b39;
border-left: 4px solid #5e6b39;
border-right: 4px solid #5e6b39;
width: 881px;
padding: 10px;
/* margin-top: -30px; */
}
.toggle:checked ~ .expand {
height: 180px;
}
.toggle:checked ~ .labels2::before {
content: "-";
}
{% for assignment in assignments %}
<form id=form action= "/project/assignments" method='post'>
{% csrf_token %}
<label class=labels>Assignment: {{assignment.denominator}} - {{assignment.description}}</label>
<input id="toggle-{{assignments.id}}" class="toggle" type="checkbox">
<label for="toggle-{{assignments.id}}" class="labels2">Criteria</label>
<div class="expand">
<section>
<p>[Number] [Name]: Expand content goes here.</p>
</section>
</div>
<section>
<textarea id=boxes name="review">{{assignments.review}}</textarea>
<input type="hidden" name="Function_id" value={{assignments.id}}>
<input class=save_tasks type="submit" value="Save">
</section>
</form>
At this point it is important that the input class="toggle" and the label class="labels2" get a unique distinction in the id and the for attribute, so that the click on the label also checks the correct input.
For this you should work with a dynamic value like toggle-{{assignments.id}} - Which I would also highly recommend in principle for all IDs in a loop.
I hope that could help :)
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/
I am trying to remove a hover class applied to a checkbox via CSS once the box has been clicked.
Does anyone know how to do this?
JSFiddle http://jsfiddle.net/sa9fe/
The checkbox code is:
<div>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox flaticon-boxing3" />
<input type="checkbox" id="checkbox-1-2" class="regular-checkbox" />
<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" />
<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" />
</div>
And the CSS for the checkbox are as follows:
.regular-checkbox {
vertical-align: middle;
text-align: center;
margin-left: auto;
margin-right: auto;
align: center;
color: #39c;
width: 140px;
height: 140px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #fff;
border: solid 1px #ccc;
-webkit-appearance: none;
background-color: #fff;
display: inline-block;
position: relative;}
.regular-checkbox:checked {
background-color: #39c;
color: #fff !important;}
.regular-checkbox:hover {
background-color: #f0f7f9;}
.regular-checkbox:checked:after {
color: #fff;
position: absolute;
top: 0px;
left: 3px;
color: #99a1a7; }
So any suggestions?
Also does anyone know how to change the highlight because at the moment it seems to highlight the edges of the box at a border radius of 3px whereas the boxes I am using are 6px.
So just add this
.regular-checkbox:checked, .regular-checkbox:checked:hover {
background-color: #39c;
color: #fff !important;
}
and if you want remove blue border add outline:0; on your .regular-checkbox class
http://jsfiddle.net/sa9fe/4/
Are you looking for this
.regular-checkbox:checked:hover {
background-color: #39c;
color: #fff !important;
}
Fiddle: http://jsfiddle.net/sa9fe/5/
if you are familiar with jQuery, you can define an onClick event for a particular checkbox and inside of function use removeClass(classname). You can find more at jQuery api site.