Displayproblems with checkboxes/radiobuttons in differen browsers - html

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>

Related

How to create datepicker with input field in html or ftl

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>

Bootstrap radio inline input columns and wrap text

How can I get bootstrap to equal align my radio form to have my question and three answers split into 4 columns like col-sm-3. I want it to wrap the text in each column when its too long. example form below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
<form class="form-check-inline">
<label class="control-label">This is some question: </label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio" checked>Option 1 which is really long and spans most of the page compared to the other options
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio">Option 2 is a small option
</label>
<label class="form-check-label">
<input class="form-check-input" type="radio" name="optradio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width
</label>
</form>
</div>
</body>
</html>
I would like the check box to be split into columns and wrap the input text
Form control: inline radio buttons
The form below contains three inline radio buttons:
This is some question: | Option 1 which is really long | Option 2 is a small | option Option 3 is another long option which
| and spans most of the page compared | | i would prefer was wordwrapped and options
| to the other options | | divided equally over
the | char here i have added just to indicate columns, i dont expect them to actually be present in the output.

You're not using the container-row-column classes correctly -- <div class="container"><div class="row"><div class="col-xs-12">... Refer to Bootstrap 3.4.1 documentation for more information.
Additionally, the latest Bootstrap version is 4.6 with 5.0 in public beta, consider updating your Boostrap version.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>Form control: inline radio buttons</h2>
<p>The form below contains three inline radio buttons:</p>
</div>
</div>
<form class="form-check-inline row">
<div class="col-xs-3">
<label class="control-label">This is some question:</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input checked class="form-check-input" name="optradio" type="radio">Option 1 which is really long and spans most of the page compared to the other options</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 2 is a small option</label>
</div>
<div class="col-xs-3">
<label class="form-check-label"><input class="form-check-input" name="optradio" type="radio">Option 3 is another long option which i would prefer was wordwrapped and options divided equally over the width</label>
</div>
</form>
</div>
</body>
</html>

Atom Emmet Custom HTML snippets.json shortcut elements on multi line

I'm trying to create an Emmet (+TAB) shortcut and I have 90% of it complete. I just can't figure out how to get the last nested elements to be on their own lines. The label, input and closing div tag are all on one line. I'd like to have them all on separate lines
snippet.json code
"form+": "section.form-container>div.form-wrapper>form:post>(div.form-group>label+inp)+btn:s"
html
<!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">
<title>Document</title>
</head>
<body>
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group"><label for=""></label><input type="text" name="" id=""></div>
<button type="submit"></button>
</form>
</div>
</section>
Trying to get it to look like this automatically
<section class="form-container">
<div class="form-wrapper">
<form action="" method="post">
<div class="form-group">
<label for=""></label>
<input type="text" name="" id="">
</div>
<button type="submit"></button>
</form>
</div>
</section>
</body>
</html>

In this case, the element layout is controlled by inline_break option of output profile, which acts globally for all snippets expanded by Emmet. You can reduce inline_break to 2, it will cause elements to lay out as expected

Have some elements inline & some elements block depending on their adjacent element

I need to display list of 'input' and 'textarea' items in a flex box. Each item has width equal to 45% of the flex box.
There is a the difficult problem I need help.
I need to display 2 items next to each other on the same line if they are same type. Otherwise, display them different lines.
For exmample:
2 'input' next to each other will be display on same lines
input and textarea next to each other are displayed in newline

You could check out css selectors as they hold the key to what you're asking.
With css selectors you can:
Select all descendants: using a space
Select direct children: using the > symbol
Select an adjacent sibling immediately after the first: using the + symbol
Select an adjacent sibling NOT immediately after the first: using the ~ symbol
Read about this in greater detail here: Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector
input + input {
display: inline;
}
input + input + label {
display: flex;
}
label + input {
display: flex;
}
<div class="container">
<input placeholder="input1" />
<input placeholder="input2" />
<label>label1</label>
<input placeholder="input3" />
</div>

You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="form-group col-md-6 col-sm-6 col-xs-12">
<label for="formGroupExampleInput">EAN *</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
</div>
<div class="form-group col-md-6 col-sm-6 col-xs-12">
<label for="formGroupExampleInput2">Family</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="F&B">
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label for="formGroupExampleInpu3">Standing product reference</label>
<input type="text" class="form-control" id="formGroupExampleInput3" placeholder="">
</div>
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<label for="exampleFormControlTextarea1">Details</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap awesome checkbox css does not apply styles

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>