I have a time selector built with two input type="radio" inside of a div. When browser zoom, the radioS don't auto-size and . How could I get this autosize using CSS?
Pics of the problem:
My code is:
<div id="timePeriodSelector" style="font-size: 100%">
<form action="">
<input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
<input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
</form>
</div>
<!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>
<style>
#timePeriodSelector{
border: 1px dotted black;
}
</style>
<body>
<div id="timePeriodSelector" style="font-size: 100%">
<form action="">
<input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
<input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
</form>
</div>
</body>
</html>
It is work correctly in chrome
Related
Please run this short and very elemental code (https://furatena.miami/grid_without_form):
grid without FORM
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html SYSTEM "http://furatena.miami/grid/dtd.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">#import url("https://furatena.miami/grid/css.css");</style><link rel="icon" href="https://furatena.miami/grid/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Cloth!!</title></head><body>
<div id="grid_container">
<div id="grid_nkb">
<input id="toggle-menu" class="" type="checkbox" />
<nav class="tc" id="mnutl">Register!
<select name="g" onchange="this.form.submit();"><option value="en" class="pad03">English</option><option value="it" class="pad03">Italiane</option></select>
</nav>
<label for="toggle-menu"><span class="menu-icon"></span></label>
</div>
<div id="grid_info"><p>info</p></div>
<div id="grid_menu"><p>links</p></div>
</div>
<div id="pie">© furatena.miami</div></body></html>
you can see this is "saint grial" CSS layout, run "perfect" and is code xHTML 1.1 100% valid on https://validator.w3.org
now run exactlly THE SAME CODE but only ADD <form> and </form> (https://furatena.miami/grid_with_form):
grid with form
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html SYSTEM "http://furatena.miami/grid/dtd.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">#import url("https://furatena.miami/grid/css.css");</style><link rel="icon" href="https://furatena.miami/grid/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Cloth!!</title></head><body>
<div id="grid_container">
<form>
<div id="grid_nkb">
<input id="toggle-menu" class="" type="checkbox" />
<nav class="tc" id="mnutl">Register!
<select name="g" onchange="this.form.submit();"><option value="en" class="pad03">English</option><option value="it" class="pad03">Italiane</option></select>
</nav>
<label for="toggle-menu"><span class="menu-icon"></span></label>
</div>
</form>
<div id="grid_info"><p>info</p></div>
<div id="grid_menu"><p>links</p></div>
</div>
<div id="pie">© furatena.miami</div></body></html>
continue as code xHTML 1.1 100% valid on https://validator.w3.org
but now the layout is broken
Why <form> </form> affect my CSS grid layout?
adding other <div> is possible fixed the ERROR but really no't is logic require more tags/divs to fixed the error.
some idea to fixed the error without add more tags and no't lost the toggle-menu?
Some explicaion please?
Thanks
Try to put the form tags outside your div#grid_container tags.
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html SYSTEM "http://furatena.miami/grid/dtd.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">#import url("https://furatena.miami/grid/css.css");</style><link rel="icon" href="https://furatena.miami/grid/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Cloth!!</title></head><body>
<form>
<div id="grid_container">
<div id="grid_nkb">
<input id="toggle-menu" class="" type="checkbox" />
<nav class="tc" id="mnutl">Register!
<select name="g" onchange="this.form.submit();"><option value="en" class="pad03">English</option><option value="it" class="pad03">Italiane</option></select>
</nav>
<label for="toggle-menu"><span class="menu-icon"></span></label>
</div>
<div id="grid_info"><p>info</p></div>
<div id="grid_menu"><p>links</p></div>
</div>
</form>
<div id="pie">© furatena.miami</div></body></html>
I'm using reactstrap in my React component. I want to float-right a button but this doesn't seem to work:
<td class="col-md-4 clearfix">
<Button className="float-right" color="warning" size="sm"><FontAwesomeIcon icon={faTrashAlt} /> Delete</Button>
</td>
I also tested as told here with clearfix in parent, but didn't work:
<td class="col-md-4 clearfix">
<button className="btn btn-danger float-right">Delete</button>
</td>
Is it reactstrap or is there anything I can't see?
UPDATE
I found out that text-right works for texts, but not for button.
table{
width:100%;
}
<!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/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<table>
<tr>
<td class="col-md-4">
<button class="float-right" >Delete</button>
</td>
</tr>
</table>
</body>
</html>
Hello I am using the has-error class on an input like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta input1="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post">
<div class="col-lg-4 col-lg-offset-4 has-error">
<input type="text" name="input" class="form-control"/>
</div>
</form>
</body>
</html>
But I would like to increase the thickness of the red border, so I tried to add this:
<style>
.has-error{
line-height:3px;
}
</style>
But it has no effect, so is it possible to change the thickness of this class and how to do it ?
Thank you
line-height is not the property you want to change, try border-width. You also need to specify the class to .form-control, otherwise your style won't be applied.
.has-error .form-control{
border-width: 3px;
border-color: blue !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta input1="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post">
<div class="col-lg-4 col-lg-offset-4 has-error">
<input type="text" name="input" class="form-control"/>
</div>
</form>
</body>
</html>
Hope it helps.
line-height has no relevance to border thickness - it sets the vertical size of each line of text inside the element. To set the thickness of a border, use the border-width property:
.has-error {
border-width: 3px;
}
I have a problem with bootstrap 3.3.5
I created a simple web page to test a new bootstrap. This is the code:
<!DOCTYPE html>
<html lang="id">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BS Test</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<script type="text/javascript" src="script.js" charset="UTF-8"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<form class="form">
<div class="form-body">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>
The input text with class form-control width more than browser width so the scrollbar at the bottom show..
and when the <!DOCTYPE html> remove, all very normal width.
how I can solve this problem with <!DOCTYPE html>?
with doctype:
and this without doctype:
please help, thank you
use
<div class="container">
instead of
<div class="container-fluid">
The problem is not in <!DOCTYPE html>. The issue is due to the missing of col-*.
Try the below code
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<form class="form">
<div class="form-body">
<div class="form-group">
<input type="text" class="form-control" />
</div>
</div>
</form>
</div>
</div>
</div>
I have a button in which I am using bootstrap css, I have used unicode text for the button, and I want the unicode text to be font size at 30px and the button height to be 34px; but it seems like the text is not centering within the button.
Can anyone please tell me some solution for this
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" style="height: 34px;"><span style="font-size:30px;">⇉</span></button>
</div>
</body>
</html>
You can achive this in 2 ways :
with line height
remove height
Update: Update / Add this in your css file
.btn{
outline:none !important;
}
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.btn{
outline:none !important;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" style="height: 34px; line-height: 16px; vertical-align:middle"><span style="font-size:30px;">⇉</span></button>
<button type="button" class="btn btn-primary" style=" line-height: 34px; vertical-align:middle"><span style="font-size:30px;">⇉</span></button>
</div>
</body>
</html>