This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I am adding buttons in an html form. There is an issue where the margin keeps growing by the width of the margin plus the width of the button on the previous row, as below:
I'm trying to make it so that all the buttons have an equal margin from the left.
My html looks like this:
<form class="my-form" id="atlas-info">
<div id="property-header">Atlas Settings</div>
<hr />
<div class="form-group" id="tag-entry">
<label>Select tagging group: </label>
<br />
<input type="text" name="name" id="tree">
</div>
<div class="input-group">Dynamic key: </div>
<button type="button" class="dynamic-key-button" id="filter-setting"></button>
<label class="dynamic-key-text">Show if / show if not</label>
<br />
#*below should not be hard coded, needs to be a loop of some sort*#
<button type="button" class="dynamic-key-button" id="organisation"></button>
<label class="dynamic-key-text">Organisation</label>
<br />
<button type="button" class="dynamic-key-button" id="job-executor"></button>
<label class="dynamic-key-text">Job executor</label>
<br />
<button type="button" class="dynamic-key-button" id="job-step"></button>
<label class="dynamic-key-text">Job step</label>
<br />
<button type="button" class="dynamic-key-button" id="product"></button>
<label class="dynamic-key-text">Product</label>
<br />
</form>
And my CSS as below:
.dynamic-key-button {
height: 20px;
width: 20px;
border-radius: 10px;
border: solid;
cursor: pointer;
padding-bottom: 12px;
float: left;
transition-duration: 0.4s;
margin-left: 9px;
}
Any help would be appreciated.
just add display:block; and remove float:left;
check the snippet
.dynamic-key-button {
display:block;
height: 20px;
width: 20px;
border-radius: 10px;
border: solid;
cursor: pointer;
padding-bottom: 12px;
transition-duration: 0.4s;
margin-left: 9px;
}
<form class="my-form" id="atlas-info">
<div id="property-header">Atlas Settings</div>
<hr />
<div class="form-group" id="tag-entry">
<label>Select tagging group: </label>
<br />
<input type="text" name="name" id="tree">
</div>
<div class="input-group">Dynamic key: </div>
<button type="button" class="dynamic-key-button" id="filter-setting"></button>
<label class="dynamic-key-text">Show if / show if not</label>
<br /> #*below should not be hard coded, needs to be a loop of some sort*#
<button type="button" class="dynamic-key-button" id="organisation"></button>
<label class="dynamic-key-text">Organisation</label>
<br />
<button type="button" class="dynamic-key-button" id="job-executor"></button>
<label class="dynamic-key-text">Job executor</label>
<br />
<button type="button" class="dynamic-key-button" id="job-step"></button>
<label class="dynamic-key-text">Job step</label>
<br />
<button type="button" class="dynamic-key-button" id="product"></button>
<label class="dynamic-key-text">Product</label>
<br />
</form>
Related
I have the following multiple radio group with same name
the label next to radio buttons work good with first form1
but in the second from2 the labels works on the radio buttons on the first form1
as this link https://jsfiddle.net/2dp63kw0/
<style>
.custom-radio label {
color:#FFF;
border-radius:20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size:10pt;
font-family:arial;
background-color: #6D778A;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: inline-block;
}
.custom-radio input[type="radio"]:checked + label {
background-color: #114ABB;
}
</style>
<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction0" value="left" />
<label class="btn btn-default" for="direction0">left</label>
<input type="radio" name="direction" id="direction1" value="top" />
<label class="btn btn-default" for="direction1">right</label>
</div>
</form>
<hr>
<form id="form2">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction0" value="left" />
<label class="btn btn-default" for="direction0">left</label>
<input type="radio" name="direction" id="direction1" value="top" />
<label class="btn btn-default" for="direction1">right</label>
</div>
</form>
every labels next to radio buttons work on form which it belongs to
Change the "name" and "for" attributes in the second form with id=form2.
Also, use class instead of id if you want to apply same properties, as id is unique and used for a single element.
Try this:
.custom-radio label {
color:#FFF;
border-radius:20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size:10pt;
font-family:arial;
background-color: #6D778A;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: inline-block;
}
.custom-radio input[type="radio"]:checked + label {
background-color: #114ABB;
}
<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction0" value="left" />
<label class="btn btn-default" for="direction0">left</label>
<input type="radio" name="direction" id="direction1" value="top" />
<label class="btn btn-default" for="direction1">right</label>
</div>
</form>
<hr>
<form id="form2">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="directionb" id="direction2" value="left" />
<label class="btn btn-default" for="direction2">left</label>
<input type="radio" name="directionb" id="direction3" value="top" />
<label class="btn btn-default" for="direction3">right</label>
</div>
</form>
The id values you have used for the input tags are not unique so the first element with the id value is used.
From MDN:
The id global attribute defines an identifier (ID) which must be unique in the whole document.
Change the id values for the input tags in your second form.
.custom-radio label {
color:#FFF;
border-radius:20px;
display: inline-block;
width: 60px;
padding: 5px;
font-size:10pt;
font-family:arial;
background-color: #6D778A;
transition: all 0.3s;
}
.custom-radio input[type="radio"] {
display: inline-block;
}
.custom-radio input[type="radio"]:checked + label {
background-color: #114ABB;
}
<form id="form1">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction0" value="left" />
<label class="btn btn-default" for="direction0">left</label>
<input type="radio" name="direction" id="direction1" value="top" />
<label class="btn btn-default" for="direction1">right</label>
</div>
</form>
<hr>
<form id="form2">
<div style="padding:20px;display:inline" class="custom-radio">
<input type="radio" name="direction" id="direction3" value="left" />
<label class="btn btn-default" for="direction3">left</label>
<input type="radio" name="direction" id="direction4" value="top" />
<label class="btn btn-default" for="direction4">right</label>
</div>
</form>
The line should be beside the button and before the search bar
.vertline{
border-right:4px solid black;
height:200px;
}
<div class="vertline">
<button class="hin"></button>
<label>Home</label>
<span><input type="text" placeholder="search videos" name="search"></span>
<span><input type="submit" value="" class="tel"></span>
</div>
If I understand you correctly, just put the the vertline class to the the span with the input field. Heres an example:
.vertline {
border-right: 4px solid black;
padding-right: 5px;
display: inline-block;
}
<div>
<button class="hin"></button>
<label>Home</label>
<span class="vertline"><input type="text" placeholder="search videos" name="search"></span>
<span><input type="submit" value="" class="tel"></span>
</div>
.line{
border-left:4px solid;
padding-left:5px;
}
<div class="vertline">
<button class="hin"></button>
<label>Home</label>
<span><input type="text" placeholder="search videos" name="search"></span>
<span class="line"><input type="submit" value="" class="tel"></span>
</div>
Here is my code:
<div class="checkbox">
<input id="230am" type="checkbox" onclick="openPopup()"> <label for="230am"></label>
<div id="popupBk">
<div id="title">Reminder</div>
<div id="timeSelect">
Start time: <input id="field1" /><br /><br />
End time: <input id="field2" /><br /><br />
</div>
<button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button>
<div id="close_popup" title="Close this menu" onclick="closePopup()">
<p>X</p>
</div>
</div>
</div>
<div class="checkbox">
<input id="3am" type="checkbox"> <label for="3am"></label>
<div id="popupBk">
<div id="title">Reminder</div>
<div id="timeSelect">
Start time: <input id="field1" /><br /><br />
End time: <input id="field2" /><br /><br />
</div>
<button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button>
<div id="close_popup" title="Close this menu" onclick="closePopup()">
<p>X</p>
</div>
</div>
</div>
Below are my css:
#popupBk{
position: absolute;
width: 25%;
height: 20%;
border: 2px solid grey;
border-radius: 2px;
background-color: white;
margin-left: 3%;
box-shadow: 2px 2px 10px;
display: none;
}
So I am trying to do a calendar app. I put two popup in two checkboxes just want to do that different popup will display under each checkbox once I click. Any ideas how to do this?
i think there is a way to make each class name differently and then create its own css, but if that it might needs a huge work. Or is there any other way?
Thanks.
You can use the :checked state of checkboxes in CSS, coupled with the general sibling selector (~) to do this.
Read about sibling selectors here: https://css-tricks.com/child-and-sibling-selectors/
Here's a live example:
.wrapper {
float: left;
}
.hidden {
border: 1px solid #000;
display: none;
}
input[type="checkbox"]:checked ~ .hidden {
display: block;
}
<div class="wrapper">
<input type="checkbox" id="box1" /> <label for="box1">Show Box 1</label>
<div class="hidden">Box 1</div>
</div>
<div class="wrapper">
<input type="checkbox" id="box2" /> <label for="box2">Show Box 2</label>
<div class="hidden">Box 2</div>
</div>
If i edit the margin-left from 1 div, the form(div) moves also. How can i fix this? I want to have like 3 columns with some text.
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
If understand correctly, you want to edit each DIV individually?
in that case at the moment you can't as the div id="loginwrapper" is a div that controls all of your code. if you want to edit input manually give them a class and edit them in css
for example
#loginwrapper {
width: 240px;
height: 305px;
float: left;
margin-left: 25px;
background: #8FB0BF;
padding: 5px;
}
.input_one{ <----this is the class name of the input (this can be anything you like)
margin-right: 25px !important
}
<div id="loginwrapper">
<div id="login" align="left">
<input name="naarlogin" type="button" id="loginn_btn" value="Klanten Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Registreren" />
<br></br>
<input name="naarlogin" type="button" id="loginn_btn" value="Instructeurs Login" />
<br></br>
<input name="naarregister" type="button" id="registerr_btn" value="Instructeurs Registreren" />
<br></br>
</div>
</div>
I have following HTML button in my webpage:
The buttons have to be fixed width and if texts overflow it's width it should be wrapped by white-space:normal. The Search Staff (F2) and Select Item(F3) are wrapped correctly. But don't know why Company(F8) and Product(F4) buttons are not wrapping inside button. Here is the HTML layout for those button:
.menu_button {
width: 100px;
height: 50px;
background-color: #D0D0D0;
color: #0000FF;
font-size: 14px;
font-weight: bold;
cursor: pointer;
border-width: 4px;
white-space: normal;
vertical-align: middle;
}
<div id="option_bar">
<input id="check" type="button" class="menu_button" name="list_item" value="Item
(F1)" />
<input id="check" type="button" class="menu_button" name="company" value="Company(F8)" />
<input type="button" class="menu_button" name="search" value="Search Staff
(F2)" />
<input type="button" class="menu_button" name="select_item" value="Select Item
(F3)" />
<input type="button" class="menu_button" name="product" value="Products
(F4)" />
<input type="button" class="menu_button" name="bid" value="Bid
(F6)" />
<input type="button" class="menu_button" name="letter" value="Letter
(F7)" />
<input type="button" class="menu_button" name="price" value="Price
(F9)" />
<input type="button" class="menu_button" name="print" value="Print
(F12)" />
</div>
How to fix it?
Try adding a space before the open bracket.
You can use the word-wrap property.
The word-wrap property allows long words to be able to be broken and wrap onto the next line.
CSS syntax:
word-wrap: normal|break-word|initial|inherit;
p.test {
word-wrap: break-word;
}
Another way you can the same result is add an space between parenthesis and the last word letter.
Add space to before "(F8)" and before "(f4)"
I am not sure what you are trying to achieve from this, but still you can add space between "Company" and "(F8)", that would do exactly what you require like in Search Staff (F2), similarly you can do this for Product (F4).
<div id="option_bar">
<input id="check" type="button" class="menu_button" name="list_item" value="Item
(F1)" />
<input id="check" type="button" class="menu_button" name="company" value="Company (F8)" />
<input type="button" class="menu_button" name="search" value="Search Staff
(F2)" />
<input type="button" class="menu_button" name="select_item" value="Select Item
(F3)" />
<input type="button" class="menu_button" name="product" value="Products
(F4)" />
<input type="button" class="menu_button" name="bid" value="Bid
(F6)" />
<input type="button" class="menu_button" name="letter" value="Letter
(F7)" />
<input type="button" class="menu_button" name="price" value="Price
(F9)" />
<input type="button" class="menu_button" name="print" value="Print
(F12)" />