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>
Related
I currently have a small form with 3 elements, a label, input, and button.
I would like the elements to be stacked on top of each other (the default form layout) in screen sizes extra small to medium. And then form medium up I would like the form to be inline.
This is the code I have so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="col-auto pb-3 ml-auto">
<form class="form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<button class="btn btn-primary" type="submit" }>Submit</button>
</form>
</div>
#media (min-width: 768px) {
.my-form-inline {
display: flex;
flex-flow: row nowrap;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-auto pb-3 ml-auto">
<form class="my-form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<div class="form-group mx-sm-3 mb-2">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
One way of achieving this is using Media query in CSS, unless that's not what you are looking for.
In your HTML file add below meta code to head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
Add an id on your form. This is optional, you can use form class name too, but make sure you use the same in CSS to refer to the form.
In CSS , use media queries
#media only screen and (min-width: 600px) {
#test{
display: block;
}
}
#media only screen and (min-width: 768px) {
#test{
display: inline-flex;
}
}
I am loading up and using bootstrap like this, but the styles are not actually being applied to my row and col divs. In my network monitor I can see the css is being successfully loaded, yet for some reason it just isnt doing anything. Really stumped here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-4">
<label for="name">Name</label>
<input id="name" />
</div>
</div>
<div class="row">
<div class="col-4">
<label for="number">Number</label>
<input id="number" />
</div>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
</table>
</body>
</html>
EDIT:
I changed my link to use Bootstrap 4 and it still isnt working
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="row">
<div class="col-md-4">
<label for="number">Number</label>
<input id="number" />
</div>
<div class="col-md-4">
<label for="number">Number</label>
<input id="number" />
</div>
<div class="col-4">
<label for="number">Number</label>
<input id="number" />
</div>
</div>
Maybe I'm wrong but with my experience in bootstrap you have the specify the screen size when you're using the column features. Just use medium when you're building something that should fit across all platforms.
I think you are using the wrong CSS class names. You are loading a bootstrap 3.x version, and it uses different classes for different device resolutions:
If you want a block that occupies 4 columns, you need to use col-xs-4 for extra-small devices (<768px width), col-sm-4 for small, col-md-4 for medium size and col-lg-4 for large devices (>1200px).
You may check the documentation at: https://getbootstrap.com/docs/3.3/css/#grid-options
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.
I'm using bootstrap 3 along with angularjs (with angular for bootstrap) for an html5 application running on google apps script.
I expected Bootstrap to be responsive by default, but for my surprise a very simple form is remaining small on my mobile device. Text, buttons and input fields are so small that they are almost unusable. I'm writting some CSS rules for mobile screens, but I'm not sure if I should. Maybe I'm doing something wrong?
Here is the form. I have removed some extra stuff to make it simple, but bootstrap makes any single form a big monster:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<!-- BOOTSTRAP CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<base target="_top">
<?!= include('css'); ?>
</head>
<body ng-app='Gestor'>
<div class="container-fluid" ng-controller="ExampleController">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-8 col-lg-4">
<fieldset class="form-group">
<label for="Concepto" class="col-md-4">Concepto:</label>
<div class="col-md-8 text-left"><input type="text" ng-model="data.concepto" class="form-control"></div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="pvp" >Precio:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',-5)">-5</a>
<input type="number" ng-model="data.pvp" class="form-control">
<div class="input-group-addon">€</div>
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',5)">+5</a>
</div>
</div>
<label class="col-md-4 " for="cantidad">Cantidad:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',-5)">-5</a>
<input type="number" ng-model="data.cantidad" class="form-control">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',5)">+5</a>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="Category">Categoría:</label>
<div class="col-md-8">
<select ng-model="data.category" class="form-control form-control-lg" ng-options="option for option in formValues.availableOptions" ></select>
</div>
<label class="col-md-4" for="Fecha">Fecha:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="data.fecha" is-open="datepicker.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"> </i></button></span>
</div>
</div>
</fieldset>
</div>
<div class="col-md-12">
<fieldset class="form-group">
<button ng-click="formValues.submitStatus ===0 ? submit() : reset()" class="btn" ng-class="{'btn-primary':(formValues.submitStatus===0),'btn-success':(formValues.submitStatus===1),'btn-danger':(formValues.submitStatus<0)}" type="submit">{{formValues.submitStatus===0 ? 'Register' : 'Reset'}}</button>
</fieldset>
</div>
</div>
</form>
</div>
<!-- MAIN APP CODE -->
<?!= include('app.js'); ?>
</body>
</html>
EDIT:
Here is an image that shows what I want to achieve. As you can see, input and label elements are quite big, but that is because the custom CSS styles that I made. I expected this to be automatic on Bootstrap. If you take a look at the bottom, you can see a very small button, that is how the entire form is displayed without my custom styles.
[.. Removed image ..]
EDIT2:
Here is another screenshot added. This time is a much simpler form, which was directly taken from here:
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=vertical-form-layout
As you can see, it looks awful
EDIT3:
I have added the tag google apps script, because it should be a problem with how google apps scripts serves the webpage on the Iframe. I have updated the plunk provided by #Satej to make it work properly with angular, but it works exactly as I expected:
http://plnkr.co/edit/Ze4DEQDxr3Hd8SVtdifZ?p=preview
I have opened the plunker on my mobile device, and it works flawlessly, no issues so far as you can see on the following screenshot:
So the question is, what does google apps script when it serves the HTML file to make it display so small?
Finally I got the solution.
The problem was the view-port meta tag. It was being removed by CAJA, or whatever sanitization is applied to IFRAME mode.
There was a bug about this, where people pointed this exact problem:
https://code.google.com/p/google-apps-script-issues/issues/detail?id=4659
And on that same thread, someone linked to a solution:
https://plus.google.com/+MarcoColomboMow/posts/GXgRCh98HTu
Finally, it was just a matter of adding the following to the html template when serving it (on the doGet function)
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).addMetaTag('viewport', 'width=device-width, initial-scale=1');
You are doing something wrong.
You have to explicity state the styling for small and extra small screens if you want them to take a particular column size.
This is done by using the col-sm-* and col-xs-* classes.
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.