I'd need to insert a checkbox in my code by using the Materialize css library.
My html
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<main>
<div class="container " style="padding-left: 2vw;">
<div class="params_container">
<form action="#">
<p>
<input type="checkbox" id="test9" />
<label for="test9">Red</label>
</p>
</form>
</div><!-- params_container -->
</div>
</main>
This code just shows the label text "Red" and no checkbox.
I've read in other posts that in Materialize css v. 1.0.0 the checkbox shows only by using <span>Red</span> and not <label>Red </label>. With <span> the checkbox does render indeed but it can't be checked if clicked.
Does any of you know what I'm missing?
Related
I am a newcomer to html and web development.
Recently I want to create my website and on one of the pages I want it have a form.
I use pageclip and followed instructions from it.
The site is on: wcyat.me/pageclip
code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="https://s.pageclip.co/v1/pageclip.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<form action="https://send.pageclip.co/p4eaPA68eOwq8IiuoAfyxqPcXirFGmfr/contact-form" class="pageclip-form" method="post">
<!-- Replace these inputs with your own. Make sure they have a "name" attribute! -->
<!-- It looks like you are creating a contact form. These email and subject fields are special -->
<!-- See https://pageclip.co/docs#special-fields for more info -->
<input type="email" name="email" value="roscoe#example.com" />
<input type="text" name="subject" value="A contact subject" />
<!-- This button will have a loading spinner. Keep the inner span for best results. -->
<button type="submit" class="pageclip-form__submit">
<span>Send</span>
</button>
</form>
<script src="https://s.pageclip.co/v1/pageclip.js" charset="utf-8"></script>
</body>
<footer class="site-footer">
<center>
<div id="footer">
<img src="https://simpleanalyticsbadge.com/wcyat.me" loading="lazy" referrerpolicy="no-referrer" crossorigin="anonymous" />
<img alt="github" src="https://raw.githubusercontent.com/wcyat/wcyat.github.io/main/images/GitHub-Mark.png"width=50" height="46.06">
<img alt="telegram" src="https://raw.githubusercontent.com/wcyat/wcyat.github.io/main/images/Logo.svg"width=40" height=40">
</div>
</center>
</footer>
</html>
I don't know whether it's my problem or not because I don't really know a lot about web development.
I have this weird issue where when I copy and paste into my index.html file in atom, it makes the html code turn gray. This issue only happens when I copy and paste. It doesn't appear to be related to anything in terms of code since this happens regardless of what project I'm working on. If I don't copy and paste into Atom, this issue doesn't happen. It ONLY happens when I copy and paste. I end up running to the issue always since I need to copy and paste the links to libraries for bootstrap, jquery etc. If I can't figure it out, it's such a nuisance that I'm going to switch IDE's for web development. I've even tried uninstalling and reinstalling Atom which didn't help. Even though it's not related to code, here's an HTML file that I just worked on where it's happening.
Any help is much appreciated. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flask App</title>
<link rel="stylesheet" href="../static/styles/style.css" />
<!-- jQuery UI Styles -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<!-- Bootstrap bundle JS - includes boostrap's own JS plugins and Popper for tooltips and popovers -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</head>
<body style="background-color: #202020; color: #fff">
<h1 id="mainHeader">Should I buy, sell, or hold this stock?</h1>
<div id="mainContainer" class="container">
<form method="post" id="form">
<!-- Enter stock symbol -->
<input id="stockInput" type="text" name="number" placeholder="Enter stock symbol or name..." size="30" />
<!-- Radio buttons -->
<div id="radioButtonContainerId">
<p>
<label for="isLiveFor" class="radio-inline">
<input type="radio" name="radio" id="isLive" disabled="true" />
Live tweets</label>
<label for="isPastFor">
<input type="radio" name="radio" id="isPastTweet" />
Past tweets</label>
</p>
</div>
<!-- Number of tweets -->
<p>
<input id="numTweetsInput" type="number" name="numTweets" placeholder="Number of tweets" min="1"
max="100000000000000" style="display: none" />
</p>
<!-- Date Range -->
<p>
<input id="numDaysInput" type="number" name="numDays" placeholder="Past days" min="1" max="100000000000000"
style="display: none" />
</p>
<!-- Submit Button -->
<p>
<button class="btn btn-success">Submit</button>
</p>
</form>
</div>
<div class="container" id="percentResults">
<p id="percentage"></p>
<p id="square"></p>
</div>
<!-- 1. jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../static/custom.js"></script>
</body>
</html>
Atom might not be recognizing the syntax of your code immediately as soon as you paste some new code and its colour seems grey.
Check the bottom right corner of the screen to make sure the atom has the correct language/file extension selected. You can manually select this if atom doesn't it automatically recognises the code language. Try setting from Html to Html(Go) manually or whichever syntax it recognises.
Also, the code turns grey if the file is not saved in the particular file extension.
Hi Guys I have a problem about bootstrap bootstrap.min.css jquery.min.js and bootstrap.min.js are already included in my project but I cannot use well well-sm class and when I add manually by links this time divs engage you can see in the picture. where is the problem I don't understand?
my code :
#model xx.Web.Models.MiniRepairViewModel
#{
Layout = null;
}
<div class="pageWrapper">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
#Html.Action("Breadcrumb", "Manage")
<div class="TextBody">
<div class="container">
#Html.Action("LeftMenu", "Manage") //menu engage
<div class="col-threeQuarters">
#using (Ajax.BeginForm("MiniRepairServiceAdd", "Ajax", new AjaxOptions { OnSuccess = "jsFilt", OnFailure = "OnFailure" }))
{
<ul class="Form">
<li class="oneColumsFull">
#Html.DropDownListFor(x => x.GetCityModel.a, (IEnumerable<SelectListItem>)ViewBag.CitiesList, "select", new { name = "x", id = "y" })
</li>
<li id="ilce" class="twoColumsFull" style="display:none;">
</li>
<li class="oneColums"><input type="text" name="serviceName" id="serviceName" placeholder="Service"></li>
<li class="button"><input class=".bh-sl-reset" id="reset" type="button" value="clear" onclick="javascript: window.location.reload();"></li>
<li class="button"><input type="submit" value="search" name="search"></li>
</ul>
}
<div id="myDiv" class="well well-sm"> </div> //not working
</div>
</div>
</div>
</div>
I am not sure if colThreeQuarters is a bootstrap class, the actual class is col
<div class="container">
<div class="row">
<div class="col-md-9> // 3quarters
</div>
</div>
</div>
You Need to include headtag before Bodytag and add the bootstrap cdn in that head and write you js cdn at bottom of body tag.
SO the code structure will be like this
<html>
<head>
<bootstrap cdn>
</head>
<body>
your content
...
..
<js cdns>
</body>
</html>
This is because you are not loading your bootstrap cdn at right place. You should load all your scripts files inside your head tag as #yashwardhan said.
this mean:
Go to your code, find </head> tag and load all your scripts and css file just before this tag.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
and use the right bootstrap syntax. colThreeQuarters is not a bootstrap class
Why you should do this, is explained here:-
Where should I put <script> tags in HTML markup?
How can I change position of where the calendar pops up. I am using the below code and the calendar pops up to the far left.
I need it to pop up over the input field.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- jQuery -->
<script src="../datepicker/jquery-3.1.1.min.js" type='text/javascript'>
</script>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" type="text/css">
<link href='../datepicker/bootstrap/css' rel='stylesheet'
type='text/css'>
<script src=../datepicker/bootstrap/js/bootstrap.min.js
type='text/javascript'></script>
<!-- Datepicker -->
<link href='../datepicker/bootstrap-datepicker/dist/css/bootstrap-
datepicker.min.css' rel='stylesheet' type='text/css'>
<script src='../datepicker/bootstrap-datepicker/dist/js/bootstrap-
datepicker.min.js' type='text/javascript'></script>
</head>
<body>
<div class="container">
<div align="center">
<h4>Date Range for Chart</h4>
<form method="post" action="mychart2.php">
<p>Start Date: <input type="text" name = "start" data-provide="datepicker"
data-date-format="yyyy-mm-dd"></p>
<p>End Date: <input type="text" name = "end" data-provide="datepicker"
data-date-format="yyyy-mm-dd"></p>
<br>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
I not sure I can control the position by using data-provide
First, make sure that you use the Bootstrap CSS. It seems that the Bootstrap is not loaded properly.
You can set the HTML property data-date-orientation according to the documentation:
A space-separated string consisting of one or two of “left” or “right”, “top” or “bottom”, and “auto” (may be omitted); for example, “top left”, “bottom” (horizontal orientation will default to “auto”), “right” (vertical orientation will default to “auto”), “auto top”. Allows for fixed placement of the picker popup.
Each option attribute has to have the data-date- prefix.
The distance to the input field may be controller by setting the margin.
Currently I downloaded some CSS/JS files to make my check-boxes pretty (link found at end) and included them in my project. I am looking at his example code for making a check-box button, which is found under his example heading "Button Style". The colors seem to work great but only half of the checkbox is present (top half). I can't seem to figure out why the whole checkbox isn't displaying, but his example is working just fine.
Can someone help me figure out how to get his example working, so I can get a checkbox that toggles from red to green? completely new to bootstrap and help would be appreciated!
Link: http://montrezorro.github.io/bootstrap-checkbox/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-checkbox.css" rel="stylesheet">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-checkbox.js"></script>
</head>
<body>
<div class="bs-example">
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox" class = "style3"> Remember me</label>
</div>
</div>
</div>
<script>
$('input[type="checkbox"].style3').checkbox({
buttonStyle: 'btn-danger',
buttonStyleChecked: 'btn-success',
checkedClass: 'icon-check',
uncheckedClass: 'icon-check-empty'
});
</script>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Edit: Sorry, I don't know how to get the files I downloaded off of the website I posted above on Jsfiddle. I am slapping code together. Obviously you will need to download the code off the website since I imported this. If anyone can tell me how to use jsfiddle while integrating new files, that would be great.