Adjust padding of input checkbox and vertical align with buttons - javascript

I try to vertically align an input checkbox with button at its right.
Here's an example of what I get for moment :
As you can see, the 2 checkbox on the left are misaligned (a little too much high compared to buttons) with their button at right (the first input is "Player Computer" and the second one is "Player1 Player2").
With Inspector, I tried to modify padding and margin on parent div of these checkbox/buttons but no luck.

Just remove padding from button-group class. and add vertical-align: middle; and display: inline-block; in checkbox And add below css to your code:
#formGame {
padding-left: 0;
pointer-events: all;
}
#formGame input[type="checkbox"] {
vertical-align: middle;
display: inline-block;
}
label {
padding-left: 3px;
}
.btn-group{
position: relative;
display: inline-block;
vertical-align: middle;
}
button.btn {
padding-left: 10px;
}
.btn-classic {
color: black;
background-color: white;
}
.btn-inverse {
color: white;
background-color: black;
}
#Player1VsPlayer2 {
margin-top: 10px;
margin-left: 12px;
}
#PlayerVsComputer {
margin-top: 15px;
margin-left: 12px;
}
#PlayableHits {
margin-top: 10px;
margin-left: 32px;
}
<form id="formGame">
<div id="PlayerVsComputer" class="checkbox">
<label><input type="checkbox" class="game" style=""/>
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player</font></font></button>
<button type="button" class="btn btn-classic btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Computer</font></font></button>
</div>
</label>
</div>
<div id="Player1VsPlayer2" class="checkbox">
<label><input type="checkbox" class="game">
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 1</font></font></button>
<button type="button" class="btn btn-classic btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 2</font></font></button>
</div>
</label>
</div>
</form>

Please do the following CSS changes.
First remove padding from button-group class.
.btn-group{
padding-top: 0px;
}
Then use the CSS3 solution display:flex. Like so.
form label{
display:flex;
align-items:center;
}

Another way is
Replace
<input type="checkbox" class="game">
To
<span class="btn-group"><input type="checkbox" class="game"></span>

1. The intended behaviour can be accomplished by applying vertical-align to the checkbox input elements, e.g:
input.game {
vertical-align: middle;
}
2. The padding-top property declared on the nested .btn-group elements must be removed, e.g:
#formGame .btn-group {
padding-top: 0px;
}
3. Instead, rather offset spacing between sibling elements by declaring a margin property on the containing label elements, e.g:
#formGame label {
margin-bottom: 10px;
}
Note: by using the unique ID attribute of the form element (#formGame) as a base selector for common elements (label) or framework classes (.btn-group) we can ensure that these changes only apply to the intended elements.

Remove the padding and margin properties and use vertical-align instead.

You've added some unnecessary CSS that is creating the problem. This will help you get what you're looking for and it'll work on old browsers too.
.btn-group {
padding-top: 0;
vertical-align: text-bottom;
}
/* Get rid of vertical align on elements inside button */
button font {
vertical-align: initial !important;
}
/* Restore whitespace removed by padding-top: 0 */
form#formGame > div {
margin-top: 10px;
margin-bottom: 10px;
}

Related

how to create a custom Input radio button which have attributes inside it

I am using react styled components as styling in my project ok let me point out what actually i am feeling not right is the text between the box and also need to style it if it is checked
what i have tried ?
I craeted a outer div and inside it i put radio input which i display none and thought i can style the outer element but that make the radio button not clickable any solution to this problem if you present react specific solution will be great.
.radio__input{
display:none;
}
.radiobox{
width:60px;
height:60px;
border:1px solid black;
}
//i want the div radiobox to styled when one radiobox is selected
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
XS
</div>
<div class="radiobox">
<input type="radio" class="radio__input" name="radio"/>
S
</div>
You need to keep the radio button somewhere, for the sake of accessibility, and to still be able to select it.
A common solution to styling radio buttons is to style their <label> element instead, and use the CSS Adjacent sibling combinator to style it depending on the radio button’s state.
Some more things should be taken into account to make the component accessible to users who need assistive technology:
you should also use <fieldset> to provide an accessible name to the option group, even though “Green” might be self-explanatory
focus needs to be visible, and since you are hiding the radio button itself, one solution is to show it on the fieldset
each radio button still needs an accessible name, so add some hidden text also inside the labels
.color-options {
display: flex;
padding: .2em;
gap: .4em;
}
.color-options:focus-within {
outline: .2em solid blue;
}
.color-option {
width: 2em;
height: 2em;
}
input:checked+.color-option {
outline: .2em solid darkseagreen;
}
/* kudos to Scott O'Hara
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
<fieldset>
<legend>Color</legend>
<div class="color-options">
<input type="radio" name="color" value="gray" id="color-gray" class="visually-hidden">
<label class="color-option" style="background-color: gray" for="color-gray">
<span class="visually-hidden">
Gray
</span>
</label>
<input type="radio" name="color" value="black" id="color-black" class="visually-hidden">
<label class="color-option" style="background-color: black" for="color-black">
<span class="visually-hidden">
Black
</span>
</label>
<input type="radio" name="color" value="darkgreen" id="color-darkgreen" class="visually-hidden">
<label class="color-option" style="background-color: darkgreen" for="color-darkgreen">
<span class="visually-hidden">
Dark Green
</span>
</label>
</div>
</fieldset>
I used unique ids for every radio button, which is used by the <label> element's for attribute to associate the labels with the radio buttons. So now the input is also checked when the label is clicked. Then i just styled the initial and checked state. But remember that you can only style elements according to the checked state of an input when they are a sibling or children. You can't access the parent element like in this case the .radiobox container with pure css.
.radiobox {
position: relative;
width: 50px;
height: 50px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
}
input[type="radio"] {
appearance: none;
}
input[type="radio"] + label {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
input[type="radio"]:checked + label {
background: blue;
}
<div class="radiobox">
<input type="radio" id="s" name="radio"/>
<label for="s">S</label>
</div>
<div class="radiobox">
<input type="radio" id="m" name="radio"/>
<label for="m">M</label>
</div>

How do I differ position-x of two components on the same line?

Heres my code :
<input id="homebutton" type="image" style="display:inline" src="home.png" name="saveform" class="btTxt submit ml-3" onclick="location.href='home.html'"/>
<h5 id="theatrename" style="display:inline" class="text-center mt-5">name</h5>
So I managed to place the 'homebutton' and the 'name' on the same line, but I want the 'homebutton' to be placed at the left while the 'name' to be placed on the text-center.
I've already tried class="text-center" as like in the code above but it doesn't seem to work :/
How can I solve this?
to force align an element an option would be float property.
See this example bellow.
next option would be absolutely positioned. but be careful to padding in absolute position element to be sure it does not overlay the input.
div {
position: relative;
height: 25px;
}
#homebutton {
display: inline;
float: left;
width: 25px
}
#theatrename {
padding: 0 25px;
position: absolute;
text-align: center;
left: 0;
right: 0;
display: inline;
margin: auto;
}
<div>
<input id="homebutton" type="image" src="https://image.flaticon.com/icons/png/512/69/69524.png" name="saveform" class="btTxt submit ml-3" onclick="location.href='home.html'" />
<h5 id="theatrename" class="text-center mt-5">name</h5>
</div>

Why when hide a div it's space exist there

I want to hide a div when clicking a button. div hides well when clicking the button. But when div hides space still exists there.
It means there are two div(It can be more than two). I want to hide the div and space also and below div replace with hiding one.
I have mentioned my tried in jsfiddle: https://jsfiddle.net/c2pnv7o6/17/
How can I fix this?
I would say your problem is that you use those three <br> Tags. Those are not part of the div you are hiding. By hiding the ancor changes.
<br><br><br>
Try putting them in the div you hide, or use margin properties.
You are not removing the line breaks. Add them in the div element
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="modal-body">
<div id="prodcuctdiv">
<h6 style="margin: 5px;" class="modal-title">New Products</h6>
<div>
<p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">sss</p>
<p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">jjj</p>
</div>
<div>
<button onclick="myFunction1()" style="float:right;" id="addBtn" type="button" class="btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
</div>
<br><br><br>
</div>
The first div is hidden when the button is clicked. The reason the second div does not move all the way to the top is because you have three <br /> tags in the way. Remove them. Alternatively use margin-bottom on the div elements to provide the spacing, then when one is removed the white space is removed too.
In addition you should not use inline CSS or JS. Move that logic in to external stylesheet and script files. You should also look to amend the JS logic to use unobtrusive event handlers.
With all that said, try this:
jQuery($ => {
$('.test-btn').on('click', e => $(e.target).closest('.parent').hide());
});
h6.modal-title {
margin: 5px;
}
p {
border: 1px;
border-style: solid;
border-color: green;
padding: 0.5em;
width: 15%;
text-align: center;
margin: 5px;
display: inline-block;
}
.btn {
float: right;
}
#prodcuctdiv,
#prodcuctCon {
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<div id="prodcuctdiv" class="parent">
<h6 class="modal-title">New Products</h6>
<div>
<p>sss</p>
<p>jjj</p>
</div>
<div>
<button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
</div>
</div>
<div id="prodcuctCon" class="parent">
<h6 class="modal-title">New Con</h6>
<div>
<p>mmm</p>
</div>
<div>
<button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me2</button>
</div>
</div>
</div>

Change children color div when click parent div | CSS Pseudo

I dont know much about css.
I have _sideButton with default color white
._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px}
._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}
How when we choose BUTTON 2, the _sideButton turns red, and always becomes red.
When selecting BUTTON 1, BUTTON 1 _sideButton turns red, then BUTTON2 _sideButton becomes default (white).
*Here === JSFiddle ===
Thx Before -/-
/*** Here guys ***/
._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px}
._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}
._tabFolder{background-color:rgba(29, 33, 41, 1); cursor:pointer;position:relative;}
._tabFolder:hover{background-color:rgba(255,255,255,0.1)}
._tabFolder:active{background-color:rgba(29, 33, 41, 1)}
._itemPosition{align-items:center;display:flex}
._5bme ._sideFolder{background-color:#066cd2}
._iconText:hover ._1i5y,.uiPopover.selected ._1i5y{display:block}
._iconText{align-items:center;display:flex;justify-content:space-between;width:100%;margin-left:13px;}
<body style="background:grey;">
<div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;">
<div class="_sideButton"></div>
<div class="_iconText" style="width: 215px">
<span style="color:white;">BUTTON 1</span>
</div>
</div>
<div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;">
<div class="_sideButton"></div>
<div class="_iconText" style="width: 215px">
<span style="color:white;">BUTTON 2</span>
</div>
</div>
</body>
For CSS you can hide <input type='checkbox' or 'radio'> and use <label for='ID OF RADIO/CHECKBOX'></label>. The label would act as the button while the chx/rad would be placed before the label and would keep the label's "state" persistent (ex. change to red and stay red indefinitely.) The state would be determined by whether the rad/.chx was :checked.
Example
.radio:checked + .label { color:red }
A .radio button is :checked and right after it + is a .label that text turns red. The + is an adjacent sibling combinator and you may so this as well: ~ general sibling combinator.
You can also use the :target selector. Take an <a>nchor tag assign its href attribute the value of in element's #id. Then assign the element a :target selector. Similar to the rad/chx & label combo, it allows us to use CSS to change an elements style dynamically and keep it persistent.
Although the demo shows an "older" sibling (i.e. radio button) and "younger: sibling (i.e. label) relationship, this demo can easily work in a parent child relationship as well (hint: remove +). Note there's no required relationship that needs to be between an <a> and element:target (other than that they both have to be on the same document.
References
Checkbox/Radio Button & Label Hack
:target selector.
Modified OP: https://jsfiddle.net/zer00ne/764k6qo0/
Demo
/* Radio Buttons & Labels */
/* :checked & for='ID OF RADIO' */
.rad {
display: none
}
.lab {
border-radius: 9px;
border: 2px inset grey;
padding: 3px 5px;
font-size: 24px;
cursor: pointer;
margin: 20px 10px;
}
.lab::before {
content: 'WHITE';
}
.rad:checked+.lab {
background: red;
color: white;
}
.rad:checked+.lab::before {
content: '\a0\a0RED\a0\a0';
}
/* Anchor & Any Element */
/* href='#ID OF ELEMENT' & #ANY:target */
a {
display: inline-block;
margin: 0 5px;
color: yellow;
background: #000;
padding: 2px 4px;
}
a:first-of-type {
color: #ff4c4c
}
a:nth-of-type {
color: yellow
}
a:last-of-type {
color: lime
}
b {
display: block;
height: 48px;
width: 48px;
border-radius: 50%;
margin: 5px auto;
border: 3px outset grey;
background: rgba(0, 0, 0, .2)
}
#T1:target {
background: red;
}
#T2:target {
background: yellow
}
#T3:target {
background: green
}
<input id='R1' class='rad' name='rad' type='radio'>
<label id='L1' class='lab' for='R1'></label>
<input id='R2' class='rad' name='rad' type='radio'>
<label id='L2' class='lab' for='R2'></label>
<input id='R3' class='rad' name='rad' type='radio'>
<label id='L3' class='lab' for='R3'></label>
<hr>
<a href='#T1' target='_self'>STOP</a>
<a href='#T2' target='_self'>SLOW</a>
<a href='#T3' target='_self'>GO</a>
<b id='T1'> </b>
<b id='T2'> </b>
<b id='T3'> </b>

How to change the behavior of the following css button?

Hello I am working in the following small page, I have two buttons, one to hide a textarea and the other to show it, in fact they work well however I would like to color the buttom called: Hide in green, in order to do it I tried:
<div class="wrapper">
<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color= "green"; ><span>Hide</span></button>
</div>
but It doesn't affect the behavior of my button, I would like to appreciate any suggestion to fix the problem, I created the following jsfiddle file to show the problem:
https://jsfiddle.net/12bkgd4q/9/
You are setting background-color= "green"; outside style attribute, you need to put it inside style attribute
<button class="button buttom2" style="vertical-align:middle;background-color:green" onclick="hide()";><span>Hide</span></button>
JSFIDDLE
background-color is a style property, and the colour green is the property-value of that style property; as they're style properties they should be in the style attribute along with the other style(s):
<button class="button buttom2" style="vertical-align:middle; background-color: green;" onclick="hide()"><span>Hide</span></button>
What you may have been trying to use, but mis-remembering, is the old (now obsolete) bgcolor attribute, which would also set the background-color of an element.
flip around background color and the JavaScript call, like this:
style="vertical-align:middle; background-color:green;" onclick="hide();"
OBSERVATIONS:
Declaring inline-style css works, but the best approach is to use external css to separate style from content as well as using unobstrusive javascript to bind events.
SOLUTION:
Change misspelling in "buttom2" to "button2".
Remove inline-styles. (Remove style attribute from buttons tag). Add the desired css properties in your external CSS file.
Remove onclick event from your button tag and add identifiers to your buttons so that you can later bind event listeners with jQuery in a separate JS file.
CODE SNIPPET:
var sTextO = $("#texto");
$("#triggerBtn1").on("click", function() {
sTextO.show();
});
$("#triggerBtn2").on("click", function() {
sTextO.hide();
});
body {
background-color: blue;
}
textarea {
display: block;
margin-left: auto;
margin-right: auto;
}
#out1 {
width: calc(100% - 150px);
text-align: center;
font-style: normal;
font-weight: bold;
font-size: 28px;
white-space: pre;
background-color: black;
padding: 25px;
border: 25px solid navy;
margin: 25px;
box-shadow: 0 8px 16px red;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 4px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 25px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
vertical-align: middle
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 28px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.button2 {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="70" rows="15" id="texto"></textarea>
<div id="out1"></div>
<div class="wrapper">
<button id="triggerBtn1" class="button button1"><span>Show</span>
</button>
</div>
<div class="wrapper">
<button id="triggerBtn2" class="button button2"><span>Hide</span>
</button>
</div>
MORE INFO:
JS: Why is using onClick() in HTML a bad practice?
CSS: What's so bad about in-line CSS?
Add this into css
.button2 {
background: green;
}
And there is a typo here -
<button class="button buttom2" style="vertical-align:middle" onclick="hide()" background-color="green" ;><span>Hide</span></button>
Change the classname from "buttom2" to "button2"
The color should be set in the style attribute of the button tag.
<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()">
https://jsfiddle.net/Lhe768Ld/
Issue was with " " , basically style tag ended just after vertical-align, so it does not recognize the background-color. Include them inside " ".
Hope this would solve your issue:
<button class="button buttom2" style="vertical-align:middle; background-color:green" onclick="hide()"><span>Hide</span></button>

Categories