Here is a small piece of HTML.
<html>
<body>
<div id="containerDiv" style="background-color:red; height: 200px">
<div id="topDiv" style="background-color:green">
<input type="button">1</input>
<div>
<div id="textAreaDiv" style="background-color:blue;width:100%; height:100%;">
<textarea style="width:100%; height:100%;">123</textarea>
</div>
<div id="bottomDiv" style="background-color:purple">
<input type="radio" name="Milk" value="Milk">Milk</input>
<input type="radio" name="Butter" value="Butter">Butter</input>
</div>
</div>
</body>
</html>
What I am trying to do it to make textAreaDiv.height be containerDiv.height - (topDiv.height + bottomDiv.height). This works perfectly in Chrome, but not in IE9. In IE9 the textarea's height is about two character's height. Any idea how to get this to work in IE9 the same as in Chrome?
Here is a screen cap of what I am getting:
http://postimage.org/image/bfn6bsalv/
UPDATE
Here is a solution with javascript, but I would still like a purely CSS solution
<html>
<head>
<script type="text/javascript" src="JQuery-1.7.2.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var textHeight = $('#containerDiv').height() - ($('#topDiv').height() + $('#bottomDiv').height());
$('#textBox').height(textHeight);
});
</script>
<div id="containerDiv" style="background-color:red; height: 400px">
<div id="topDiv" style="background-color:green;height:25px;">
<input type="button">1</input>
</div>
<div id="textAreaDiv" style="background-color:blue;width:100%;">
<textarea id="textBox" style="width:100%;">123</textarea>
</div>
<div id="bottomDiv" style="background-color:purple;height:25px;">
<input type="radio" name="Milk" value="Milk">Milk</input>
<input type="radio" name="Butter" value="Butter">Butter</input>
</div>
</div>
</body>
</html>
I'm glad you found something that worked. I wanted to let you know I see why it didn't work. Your code isn't valid. The closing tag for topdiv is missing the forward slash.
Related
I am trying to make a responsive filter widget for my website.
The #filter-widget shows when screen size is larger than 767px, and it hides when screen size is smaller than 767px( .col-sm-3 ).
The Show Fileter button shows when the screen size is smaller then 767px. Once Users click on this button, #filter-widget shows again.
My expected result is like:
Screen size larger than 767px:
Screen size smaller than 767px:
My Code is as below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Eat Your Food</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
Show Filter v
</div>
<div id="filter" class="col-sm-3">
<div id="filter-widget" class="collapse in">
<form class="form-horizontal">
<h3><b>Category</b></h3>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox" value="vegetable" />Vegetable</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="meat" />Meat</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="grains" />Grains</label>
</div>
</div>
</form>
</div>
</div>
<!-- Result -->
<div class="col-sm-9">
<h3>Filted Result Is Here.</h3>
<p>ResultResultResultResultResult</p>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I want to make #filter-widget hidden as default when in small screen so I change <div id="filter" class="col-sm-3"> to be <div id="filter" class="col-sm-3 hidden-xs">. However, the Show Filter button doesn't work to show #filter-widget.
How can I modify my codes to let Show Filter hide/show #filter-widget when the screen is smaller than 767px.
Is there any problem in my codes ?
Thank you very much !
Here is a working sample for you.please remove the hidden- classes from your code
1, CSS
#filter-widget{display:block}
.show-filter-button-class{display:none}
#media screen and (max-width: 767px) {
#filter-widget{display:none}
.show-filter-button-class{display:block}
}
2, JS
<script>
$('body).on('click','.show-filter-button-class',function{
$('#filter-widget').show();
}
</script>
When adding a MathJax formular to a Bootstrap v4 input group, the elements are not align correctly. There is a small step between the label and the input.
<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<div class="row">
<div class="col-md-12">
<p>Without Mathjax everything works fine</p>
<div class="input-group">
<span class="input-group-addon">X1</span>
<input type="number" class="form-control">
</div>
</div>
<div class="col-md-12">
<p>With Mathjax there is a step at the bottom</p>
<div class="input-group">
<span class="input-group-addon">\( x_1 \)</span>
<input type="number" class="form-control">
</div>
</div>
</div>
Edit: This problem occurs with Chrome and a zoom level of 90% and 125% or greater.
This question already has answers here:
Div side by side without float
(6 answers)
Closed 6 years ago.
This code is layed out in 1 column. I want to get a tabular 2 column layout.
<span id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
How can I achieve this without using float?
fiddle
You can use the flexbox for that:
.container {
display: flex;
}
<div class="container">
<div id="col1">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</div>
<div id="col2">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</div>
</div>
Note that I changed your span to div elements (since span are inline and should not contain block elements).
I also wrapped the entire block with div.container so I'll be able to set that container as the flexbox.
Assuming you want the columns to be able to be shown/hidden, you could do this:
<head>
<script>
$('.next').click(function() {
var next = $('.col').next();
var curr = $('.col');
next.addClass('col-active');
curr.removeClass('col-active');
});
</script>
<style>
.col {
display: none;
}
.col-active {
display: block !important;
}
</style>
</head>
<body>
<span id="col1" class="col col-active">
<div>Filter by</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<span id="col2" class="col">
<div>Search</div>
<div>
<input type="text" value="hello" />
</div>
</span>
<a class="next">Next Page</a>
</body>
This essentially shows and hides the columns based on the <a> being clicked. I use this quite a lot when having sliders/tabulated pages.
Hope this helps :)
I have this Bootstrap horizontal form but the problem is label text is not aligned . How can I align the label text.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Signup Form</h3><hr/>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-4">
<input type="text" placeholder="Your Username ..." class="form-control"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input type="email" placeholder="Your Email ..." class="form-control"/>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
I want Email label to be aligned with Username label
It is aligned right by default in Bootstrap stylesheet, you can give your form and id and add something like this to your stylesheet:
#signup-form label {
text-align: left;
}
This will align all the labels in your form to left, you may modify the selector to your needs to limit the scope of this style.
Working sample at JSBin.
.form-horizontal .control-label {
text-align: left;
}
simply use this.
CSS:
.control-label {
text-align:left!important;
}
Using JqueryMobile, I wish to achieve the following layout:
Having nice decorations boxes to separate my input lines
Having one checkbox aligned vertically with an input text field, both on the same line
But after many attempts, the only layout I could come from with is the following:
The first attempt looks kind of right using jquerymobile grids, but my checkbox is not selectable anymore and remains checked forever. The second attempts uses the fieldset as proposed by the jquerymobile, but, I loose the checkbox and I tried using the css float property, without success.
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body style="font-size: 12px;">
<div data-role="page" id="one">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a" style="width: 20%;" >
<div class="ui-bar ui-bar-e" style="height:24px; padding: .4em 4px;">
<div class="ui-checkbox">
<label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span>
</span>
</label>
</div>
</div>
</div>
<div class="ui-block-b" style="width: 80%;" >
<div class="ui-bar ui-bar-e" style="height:24px">Block B</div>
</div>
</div>
<div style="height: 200px;">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" class="custom" />
<label for="checkbox-mini-0" > </label>
<input type="text" name="texta" id="texta" class="custom" style="width:36px;" />
</fieldset>
<div style="height: 30px; border:1px solid lightgray;">
</div>
<div style="height: 30px; border:1px solid lightgray;">
</div>
</div>
</div>
</div>
</body>
</html>
Any help or comments to achieve my goal would be appreciated ?
Online editor: You can access the html file also on http://jsfiddle.net/alain_lavoie/XhsEh/
http://jsfiddle.net/XAsyy/110/
Updating from Nirmal Patel ans, I found textarea to work with checkboxes and if you do not want the textarea to grow:
data-role="none" ie. <textarea id="test" data-role="none"></textarea>
http://jsfiddle.net/XAsyy/144/
or, use:
css resize: none;
http://jsfiddle.net/nirmaljpatel/XAsyy/