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>
Related
I am learning html and ftl these days.
Currently, I want to create input field with icon for datepicker.
Something like this:
Hope you will share some ideas with me.
Thanks...
This one will help:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<form id="demoForm" action="success.html" method="POST">
<div class="form-group row col-6">
<label class="col-auto col-form-label">Select Date: </label>
<div class="col-md-4">
<input type="date" class="form-control" name="date" />
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
So I am trying to develop a simple form page using Bootstrap. However, I want a different background-color than the classic white. Because of this, I added a new background-color (light gray) by overriding the "form-control" class's background color.
When I added this I sometimes got a part of the right side cut off, I don't really know why. It happened when I added the color so I guess it has something with the background color to do. But why I don't know. That's why I am asking you! :)
Here is an image of the "input":
Here is the affected code:
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.formKeepLeft {
display: flex;
}
.skipLine {
clear: left;
}
.form-control, .form-control:focus {
width: 100%;
border-radius: 0px;
background-color: lightgray;
}
.skipLine {
display: block;
}
</style>
<div class="row">
<div class="col-6">
<!--- Col 1 --->
<form>
<div class="formKeepLeft">
<div class="form-group">
<label for="inputEmail">Namn</label>
<input type="input" class="form-control " size="100%" id="inputName" placeholder="">
</div>
<div class="form-group" style="padding-left: 10px;">
<label for="inputPassword">E-post</label>
<input type="email" class="form-control " size="100%" id="inputEmail" placeholder="">
</div>
</div>
<!-- Form row 2 -->
<div class="form-group skipLine">
<label for="inputPassword">Ämne</label>
<input type="input" class="form-control " size="100%" id="inputÄmne" placeholder="">
</div>
</form>
</div>
</div>
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.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>
It often gets cut off when I resize the page, so for example, it might work for col-lg but when I resize it to another size this sometimes happens. I tried using background-size but without any luck.
I want to achieve this:
The image is a bit small, but basically it is the exact same image but without the right part cut off. Does anyone know the solution? What did I do wrong?
Thanks, any suggestions are appreciated
It's just because of border-radius, you can add border-width: 0; to remove that gap.
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.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>
<style>
.formKeepLeft {
display: flex;
}
.skipLine {
clear: left;
}
.form-control, .form-control:focus {
width: 100%;
border-radius: 0px;
background-color: lightgray;
border-width: 0;
}
.skipLine {
display: block;
}
</style>
<div class="row">
<div class="col-6">
<!--- Col 1 --->
<form>
<div class="formKeepLeft">
<div class="form-group">
<label for="inputEmail">Namn</label>
<input type="input" class="form-control " size="100%" id="inputName" placeholder="">
</div>
<div class="form-group" style="padding-left: 10px;">
<label for="inputPassword">E-post</label>
<input type="email" class="form-control " size="100%" id="inputEmail" placeholder="">
</div>
</div>
<!-- Form row 2 -->
<div class="form-group skipLine">
<label for="inputPassword">Ämne</label>
<input type="input" class="form-control " size="100%" id="inputÄmne" placeholder="">
</div>
</form>
</div>
</div>
Add border:0; it will show space differently sometimes other corners better to make the border as 0
.form-control, .form-control:focus {
width: 100%;
border-radius: 0px;
background-color: lightgray;
border: 0;
}
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>
How can I center the below form. Right now it is too far over to the right. I want it centered on the page (Moved slightly over to the left). I have tried a lot of different solutions however, I know I am missing something very small here. Thank you.
![<!DOCTYPE HTML>
<head>
<title>Page | Contact</title>
<meta charset="utf-8">
<!-- Google Fonts -->
<link rel='stylesheet' type='text/css' href='css/font.css'/>
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/simple_menu.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/contact.css">
<!-- Contact Form -->
<link href="contact-form/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="contact-form/css/uniform.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script src="js/contact.js"></script>
<?php include 'common_header.php'; ?>
</head>
<body>
<?php
include 'header.php';
?>
<div id="container">
<div class="one-third"> </div>
<div class="one-third">
<div class="heading_bg">
<h2>Contact Us</h2>
</div>
<form action="#" id="contact_form" class="TTWForm" method="post">
<div id="field1-container" class="field f_100">
<label class="required" for="name">Name</label>
<input name="name" id="name" type="text">
<span id="name_validation" class="error_message"></span>
</div>
<div id="field2-container" class="field f_100">
<label class="required" for="subject">Subject</label>
<input name="subject" id="subject" type="text">
<span id="subject_validation" class="error_message"></span>
</div>
<div id="field5-container" class="field f_100">
<label class="required" for="email">Email</label>
<input name="email" id="email" type="email">
<span id="email_validation" class="error_message"></span>
</div>
<div id="field4-container" class="field f_100">
<label class="required" for="message">Message</label>
<textarea rows="5" cols="20" id="message" name="message"></textarea>
<span id="message_validation" class="error_message"></span>
</div>
<div id="form-submit" class="field f_100 clearfix submit">
<input value="Submit" type="submit" id="submit_button">
</div>
</form>
</div>
<div class="one-third last">
</div>
<div style="clear:both; height: 0px"></div>
</div>
<!-- close container -->
<?php
include('footer.php');
?>
</body>
</html>][2]
CSS
#after_submit, #email_validation, #name_validation {
display:none;
}
#after_submit{
background-color: #c0ffc0;
line-height: 31px;
margin-bottom: 10px;
padding-left: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#after_submit{
color: #6c6c6c;
}
.error {
background-color:#FFDFDF;
color:red;
}
.error_message{
font-style: italic;
font-size: 10px;
}
.row {
margin:5px;
}
This should do the trick for you:
#contact_form{
width:50%;
margin-left:auto;
margin-right:auto;
}
Check the fiddle here
I have not added all your CSS, only showed how you can center the form. Using the CSS above in your code, you would be able to center it.
You can put the form in a div and use css on the div or use for the form. Set width accordingly, but the margin-left and right when set to auto, put it into center of the screen, no matter what the screen size is.
If this doesnt work, then create a jsfiddle with all your relevant css and html and comment.
This should do the trick. Might have to play with the width and margin, but as long as they add up to 100%, you should be okay.
#contact_form, .heading_bg {
display: block;
position: relative
width: 50%;
margin: 0 25%;
padding: 0;
}
That will at least center your main div. Then it's just a matter of playing with the inside div and input settings to get things where you'd like them.