I am trying to create a table with mdl where the user can check certain weekdays. For that, I want to have checkboxes with the label centered below them. For normal html I already found this solution. For the mdl-checkbox, this does not work, see the example. So far, I can only manage to center the label, but not the mdl-checkbox itself. Any suggestions as to how I can center both?
.myClass label{
text-align:center;
display:block;
}
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.amber-indigo.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass">
<label>
<input type="checkbox" id="one">
<br>This works
</label>
</div>
<div class="myClass">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-th">
<input type="checkbox" id="checkbox-th" class="mdl-checkbox__input">
<br>This doesn't
</label>
</div>
Related
This question already has answers here:
How to align the checkbox and label in same line in html?
(13 answers)
Closed 1 year ago.
Goal:
I want text to come after my checkbox
Problem:
My p tag comes directly after my check box input, but I can't get them on the same line and Next to each other.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<input type="checkbox">
</div>
<div class="col">
<p> Save My card for future payment</p>
</div><br>
</div>
</div>
Edit:
The best way to put Text after a checkbox or other user input button is to use a LABEL not a p tag.
<label for="check">text goes here</label>
<input type="checkbox" id="check">
If you're using Bootstrap as your class names suggest, this is the right way:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Save my card for future payment
</label>
</div>
</div>
</div>
See the docs at https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios.
If not, use standard checkbox markup so your form is accessible to those using assistive technology (and more standard):
<label>
<input type="checkbox">
Save my card for future payment
</label>
Notice that in both cases the label is clickable.
I assume that your code look like that.
.checkbox_div {
display: flex;
align-items: center;
}
.checkbox_div p {
display: inline-block;
}
<div class="checkbox_div">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<p>Paragraph text </p>
</div>
If not then format your code look like that. Take checkbox input and p tag inside a div.
And then add some css which is given below.
I am using an Apache server to learn web programming. I faced this problem while writing the CSS file for my page: The pseudo-classes don't work if defined in the CSS file. Even if I define them in the HTML, they only work when I use the id tag, and not the element, it would be great if someone can provide insight as to why it is happening,i am leaving the HTML code here, as to the CSS code, I defined the pseudo classes either at the very last or very first,neither seems to work.
<head>
<link rel="stylesheet" type="text/css" href="\styles\login.css">
<link rel="icon" type="image/x-icon" href="\images\icon\icon.ico" />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../../js/register.js"></script>
<Title>Register</Title>
<style>
button:hover{
background-color : #00F3FF;
}
button:active{
background-color:red;
}
</style>
</head>
<body>
<div id="external">
<div id="hide">
<form >
<p>Enter your email</p>
<input type="text" name="email" id="3"><br>
<p>Enter your username:</p>
<input type="text" name="username" id="1"><br>
<p>Enter your password:</p>
<input type="text" name="pass"id="2"><br><br>
</form>
<button id="bt">Submit</button>
<div id="hd">
<p><font color=pink size=5px>Registration successful!</font></p>
</div>
</div>
</div>
</body>
This does not work.
HTML Noob here: I am trying to get two MDC radio buttons in a form to appear aligned on separate rows (one below another). I have tried putting break tags in various places but it doesn't seem to have any effect.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shrine (MDC Web Example App)</title>
<link rel="shortcut icon" href="https://material.io/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>
<form action="home.html">
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div><br>
<label for="radio-1">Radio 1</label>
</div>
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="radio-2">Radio 2</label>
</div>
<br>
</form>
<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
</body>
</html>
I can get standard radio buttons to appear on separate rows using break tags as follows:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
How can I get these radio-1 and radio-2 to appear on separate rows?
I think you just entered the brake at the wrong spot, it should be between the two divs of the "mdc-form-fields":
<label for="radio-1">Radio 1</label>
</div>
<br>
<div class="mdc-form-field">
<div class="mdc-radio">
There are other solutions with a grid system, but this is the simple one
I am trying to use to enhance the look of checkboxes using
this css.
My code looks like this:
<div class="padding">
<div class="checkbox checkbox-success">
<input id="excludeUser" name="excludeUser" type="checkbox" checked>
<label data-toggle="tooltip" title="exclude" for="excludeUser">Exclude this user </label>
</div>
</div>
but it doesn't do anything. I even tried abc-checkbox-success as a class as it is named in the file but that did not help.
Here is fiddle with my try
The class names are abc-checkbox and abc-checkbox-success, not checkbox.
Also, your fiddle is missing font awesome library:
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
.padding {
padding: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.0/awesome-bootstrap-checkbox.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="padding">
<div class="abc-checkbox abc-checkbox-success">
<input id="excludeUser" name="excludeUser" type="checkbox" checked>
<label data-toggle="tooltip" title="exclude" for="excludeUser">Exclude this user </label>
</div>
</div>
I am trying to combine input-group-addon with radio elements. Example code is below.
http://www.bootply.com/1M34c3sy29
But the radio image is not centered for Price radio section.
Is it possible to center the image for the Price section? Or do you recommend another solution for such kind of presentation.
Bootstrap is adding some styling that will not allow the vertical align to function as you need. The elements are absolutely positioned. I'd try positioning the radio button another way, using the top css property:
.input-group { display:inline-block;}
#inlineradio2{ top: 13px; }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<div class="col-lg-12">
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Automatic. Price will be set by the system!</label>
</div>
<div class="radio">
<label>
<input id="inlineradio2" name="sampleinlineradio" value="option2" type="radio">
<div class="input-group">
<span class="input-group-addon">Price</span>
<input type="text" class="form-control" placeholder="" id="price-box" aria-describedby="Price">
</div><!-- /input-group -->
</label>
</div>
</div>
</div>
</fieldset>
</form>
I've also changed the name of the HTML id attribute on the radio button in question as the id should be unique.