How can I include radio button or checkbox inside the table?
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<table>
<thead><th>radio button</thead>
<tbody><tr><td><input type="radio" value="r1"></td></tr></tbody>
</table>
</body>
</html>
As in F12 opacity:0 what means your radio is invisible:
As materialize doc you have to use radio as below with class="with-gap":
<p>
<label>
<input class="with-gap" name="yourName" type="radio"/>
<span>yout text</span>
</label>
</p>
See working code
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<table>
<thead>
<th>radio button</thead>
<tbody>
<tr>
<td>
<p>
<label>
<input class="with-gap" name="group3" type="radio" />
<span>Red</span>
</label>
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add the radio button as per the guidelines in materializecss. You can add the empty span if you don't need any label text.
<label>
<input type="radio" />
<span>label text</span>
</label>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<table>
<thead><th>radio button</thead>
<tbody><tr><td><label>
<input type="radio" />
<span></span>
</label></td></tr></tbody>
</table>
</body>
</html>
Related
I have no CSS files, only an index.html. I am following a youtube tutorial and I've confirmed multiple times that I am writing the code correctly. The video is a year old, so maybe, I'm doing something wrong syntactically. But otherwise, I cannot seem to find out why the radio buttons won't show up. I tried style="opacity: 100;" and that did nothing either.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<title>PusherPoll</title>
</head>
<body>
<div class="container">
<h1>OS Vote</h1>
<p>Vote for your favorite OS to develop on.</p>
<form id="vote-form">
<p>
<input type="radio" name="os" id="windows" value="Windows" />
<label for="windows">Windows</label>
</p>
<p>
<input type="radio" name="os" id="macos" value="MacOS" />
<label for="macos">MacOS</label>
</p>
<p>
<input type="radio" name="os" id="linux" value="Linux" />
<label for="linux">Linux Distro</label>
</p>
<p>
<input type="radio" name="os" id="other" value="Other" />
<label for="other">Something Else</label>
</p>
<input type="submit" value="Vote" class="btn" />
<br></br>
<div id="chartContainer" style="height: 300px; width:100%;"></div>
</form>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/5.0.2/pusher.min.js" integrity="PRIVATE-NOSHARE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js" integrity="sha256-CIc5A981wu9+q+hmFYYySmOvsA3IsoX+apaYlL0j6fg=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
As per the Materilize documentation, you should do it a bit different. Instead of this:
<p>
<input type="radio" name="os" id="windows" value="Windows" />
<label for="windows">Windows</label>
</p>
try this:
<p>
<label>
<input name="group1" type="radio" checked />
<span>Red</span>
</label>
</p>
Here is the documentation: Radio buttons
Hope it helps!
your prbolem is in link rel
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
i'm very beginner of these things, the css is working on here but not in my laptop. these are all in the same folder but i couldn't got the problem.
Selector {
Property: value;
}
h1 {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>The Shippy!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<h1>The Shippy</h1>
<h4>Registration Form</h4>
</section>
<form>
Firm Name: <input type="text" required name="Firm"><br>
Password: <input type="Password" required name="Pass" minlength="6" maxlength="12"><br>
E-Mail: <input type="email" name="E-Mail"><br><br>
Sector: <br>
<input type="radio" name="Sector">Ship Supply<br>
<input type="radio" name="Sector">Purchasing<br>
<input type="radio" name="Sector">Crew Management<br>
<input type="radio" name="Sector">Shipbreaking<br><br>
Country:<br>
<select>
<option value="Turkey" name="Turkey">Turkey</option>
<option value="Greece" name="Turkey">Greece</option>
</select><br><br>
<input type="submit" value="Register!" >
</form>
</body>
</html>
I will help you out with little changes that you were looking.
First, the line in HTML
<link rel="stylesheet" type="text/css" href="style.css">
Here, the href means the link to your external style sheet. The name of your external stylesheet is style.css . You have to refer it properly in href tag. So you can refer it two ways: 1) Relative Path (e.g: ~/YourForlderName/style.css ) and 2) Absolute Path (e.g: YourRootFolder/YourFileName/YourFolderName/style.css)
This can be written as follows:
1) Using Relative Path
<link rel="stylesheet" type="text/css" href="~/Images/style.css">
2) Using Absolute Path
<link rel="stylesheet" type="text/css" href="C:/Project/Images/style.css">
Now, talking about your small project.
This is external CSS. That is style.css followed by your HTML.
h1 {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>The Shippy!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<h1>The Shippy</h1>
<h4>Registration Form</h4>
</section>
<form>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" required name="Firm"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="Password" required name="Pass" minlength="6" maxlength="12"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="E-Mail"></td>
</tr>
</table>
<br>
<b>Sector:</b> <br>
<input type="radio" name="Sector">Ship Supply<br>
<input type="radio" name="Sector">Purchasing<br>
<input type="radio" name="Sector">Crew Management<br>
<input type="radio" name="Sector">Shipbreaking<br><br>
<b>Country:</b><br>
<select>
<option value="Turkey" name="Turkey">Turkey</option>
<option value="Greece" name="Turkey">Greece</option>
</select><br><br>
<input type="submit" value="Register!" >
</form>
</body>
</html>
FURTHER EXPLANATION ABOUT TABLE AND ITS RELATED TAGS:
Notice that I have used a tag align your labels and textboxes in a proper format. The tr tag means TableRow, and td means TableData. The Td tag divides row into particular number of column.
Hope this helps. And happy programming! :)
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>
I'm developing a web application using bootstrap. It has to run in different Browsers.
I have multiple groups with Headlines and checkboxes, which are looking like this:
<div>
<h4>Liniensicherungen</h4>
<div class="form-group ">
<label for="cbxGrundliniensicherung" class="col-sm-6 col-form-label">Mit Grundliniensicherung:</label>
<div class="col-sm-6 paddingRadioBtn">
<input class="form-control" type="checkbox" name="cb_mit_grund_liniensicherung_runs_show" id="cbxGrundliniensicherung">
</div>
<div>
<div>
It is working in Firefox and IE but in Chrome the checkboxes (and radiobuttons) are looking different. They are bigger and have a small grey border above.
as below it looks in Firefox.
And as below is how it looks in Chrome.
Does anyone know, how to change the look in Chrome?
First of all in checkbox you don't want to add form-control, that class creates big checkbox so, remove it
for checkbox there is default class called form-check-input and for real position you need to add form-check in parent class but if you dont want to add this stuff there is OK !
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style></style>
</head>
<body>
<div>
<h4>Liniensicherungen</h4>
<div class="form-group ">
<label for="cbxGrundliniensicherung" class="col-sm-6 col-form-label">Mit Grundliniensicherung:</label>
<div class="col-sm-6 paddingRadioBtn form-check">
<input class="form-check-input" type="checkbox" name="cb_mit_grund_liniensicherung_runs_show" id="cbxGrundliniensicherung">
</div>
<div>
<div>
<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="js/main.js"></script> -->
<script></script>
</body>
</html>
usually the form-control is used for text area but if you want to use it you can override the css or you can use the custom input checkbox
.form-control{width:20px!important;
font-size:5px!important;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div>
<h4>Liniensicherungen</h4>
<div class="form-group ">
<label for="cbxGrundliniensicherung" class="col-sm-6 col-form-label">Mit Grundliniensicherung:</label>
<div class="col-sm-6 paddingRadioBtn">
<input type="checkbox" class="form-control"aria-label="Text input with checkbox" name="cb_mit_grund_liniensicherung_runs_show" id="cbxGrundliniensicherung">
</div>
<div>
<div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
The text boxes get red borders when text is removed from them. However, the textarea does not follow this behavior. What is the problem and how do I remedy it?
http://jsfiddle.net/cKYNy/9/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="b">
<div data-role="content" data-theme="b" style="padding:0px;margin:0;">
<p>Content Page 1</p>
<form name="contactForm" id="contactForm" data-ajax="false" method="post">
<div>
<input type="text" id="name" name="name" value="" required="true"></input>
</div>
<div>
<input id="email" name="email" type="email" value="" required="true"></input>
</div>
<div>
<textarea name="message" id="message" required="true"></textarea>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</div>
</form>
</div>
</div>
</body>
</html>
If it is not an option of JQuery Mobile you might wanna try the following:
$("#contactForm").submit(function (e) {
e.preventDefault();
if ($('#name')[0].checkValidity() === false) {
$('#name')[0].toggleClass("error");
}
}
Catch the submit event on the form, stop it from submitting and check the validation yourself. If not valid, add an error class.