How to make column height shrink when it is displayed on smaller screen? I used bootstrap 3.3.7 . I made 3 columns inside a row and sat them to col-md-2, col-md-9, col-md-1. They are displayed correctly on md screen and bigger. On small screen they are still displayed fine. However, on small and extra small screen, I want to make first and third columns height shrink to the height of their contents.
Here is a part the HTML code and css I used:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-
dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-
dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="second_page.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" id="first_left_column_box">
<div class="left_content" id="first_left_column">
<a class="salehslist" id ="category" href="#"
style="text-decoration:none;"> <center> content
</center> </a>
</div>
<div>
<h1> another content </h1>
</div>
</div>
<div class="col-md-9">
<div class="breadcrumb">
<a id ="category" href="#" > <center> content </center>
</a>
</div>
<div>
<h1> many contents" nested rows and columns" are here</h1>
</div>
</div>
<div class="col-md-1" id="last_right_column_box">
<div class="right_content" id="last_right_column">
<div>
<h1> many contents </h1>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"
</script>
</body>
</html>
CSS file:
body { padding-top: 70px; }
/* all a tags colors */
a { color: #4285F4; }
/* first left column */
#first_left_column_box{
background-color: #eee;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
height:200vh;
margin-bottom: 20px;
}
#first_left_column{
text-align:center;
line-height:50px;
}
/* middle column */
.breadcrumb {
background-color: #eee;
border-top: 1px #ccc solid;
border-bottom: 1px #ccc solid;
margin-bottom: 20px;
}
/* last right column */
#last_right_column_box{
background-color: #eee;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
padding: 10px;
height:200vh;
}
#last_right_column{
text-align:center;
line-height:50px;
}
you can use with col- with col-md:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
try use col-2 and col-md-2 like example:
<div class="col-2 col-md-2" id="first_left_column_box">
Read this... can help you. https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp
Bootstrap currently doesn't support anything for automatic resizing of height of columns , we are bounded to use media queries so just use it !!
You will need to use media queries for the separate screens. You can write media queries like so
#media not|only mediatype and (expressions) {
CSS-Code;
}
but it is better to separate the rules which are applicable for the given rules, by creating separate CSS files for the separate sizes:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
An example for your case:
<link rel="stylesheet" media="screen and (max-width: 699px)" href="small-screen.css">
And put here the rules for small screen. You can create separate CSS files for separate screen size categories.
Related
Hi I created a Search Bar and wrapped it inside a div and have given it the max-width of 500px (100% with to the search Input) but don't know why max width is not working and I search the Stack Overflow and found a link Why would max-width not work on this? and tried this but it didn't worked for me
So can anyone please tell me why its not working and how to make it work :)
Any kind of help is highly Appreciated
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
body{
font-family:arial;
}
header{
width: 100%;
padding:20px 20px;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
}
.menu-container{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}
.search-input-container{
width:100%;
max-width:500px;
}
input[type="search"]{
border-radius:500px;
padding:5px 10px;
width:100%;
}
ul li{
list-style:none;
}
ul{
margin:10px;
}
button{
outline:none;
border:none;
padding:8px 15px;
}
a{
text-decoration:none;
}
.submenu-items{
position:absolute;
top:100%;
border:2px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
<!-- Logo Wrapper -->
<div class="logo">
<img src="" alt="Test Logo">
</div>
<!-- Search Wrapper || Issue Area-->
<div class="search-container">
<form action="get">
<div class="search-input-container">
<input type="search" class="search">
</div>
</form>
</div>
<!-- Search Wrapper Ends ↑ -->
<div class="menu-container">
<ul>
<li>
Help
</li>
</ul>
<ul>
<li>
Campagians
</li>
</ul>
</div>
<div class="buttons-container">
<button class="Login-btn">Log in</button>
<button class="signup-btn">Sign up</button>
</div>
</nav>
</header>
</body>
</html>
Instead of max-width, try using width: clamp() (MDN)
I think in your case it would be something like:
.search-input-container {
width: clamp(150px, 400px, 500px);
}
Here 150px is the minimal size,
400px - is the ideal size, that the element wants to be,
and 500px - is the maximum possible size. so it can't grow bigger then that.
That way the input will try to be 400px, but if there is no space - it will shrink down up to 150px.
I have a container which has a fixed width of 200px and the rest of the width is margin equally on both sides.
I have applied margin-bottom on this container but it will occupy only the 200px width since that is the width of the container box.
How can i make the border-bottom occupy the entire screen width.
code:
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
border-bottom:1px solid red
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
FIDDLE
Implementing as two class will be the best choice.
.sch-container{
border-bottom:1px solid red;
}
.content{
max-width:200px;
margin:0 auto;
text-align:center;
}
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
This is not a straight forward solution to your problem, more of an alternative.
You could use <hr /> tag instead of border-bottom on .sch-container.
.sch-container{
max-width:200px;
margin:0 auto;
text-align:center;
}
hr{
height: 1px;
border: 0;
border-top: 1px solid;
}
.red{
border-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Some Title</title>
</head>
<body>
<div class="sch-container">
<div class="content">
Hello
</div>
</div>
<hr class="red"/>
</body>
</html>
I use bootstrap framework to make responsive web page to worl on mobile , PC and tablet.
I wrote the fallowing code and I was run it on browser but the result not good when the browser size going as same as mobile screen.
see the following html code and run it and change the browser size to see the result.
see the result on A,B,C,D blocks
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<style>
.but
{
background-color: red;
font-size:40px;
border-bottom:1px solid white;
border-width:1px;
border-left: 1px solid red;
border-right: 1px solid red;
text-decoration:none;
color:white;
text-align:center;
}
</style>
</head>
<body style="background-color:#DBE8D7;">
<div class="container">
<div class="row">
<div style="text-align:center;border:1px solid red; border-top-right-radius:8px; border-top-left-radius:8px; background-color:white;font-size:75px;margin-bottom:0px;border-bottom:none;">div1</div>
<br/>
A
B
C
D
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Try not to use col-xx-zz classes on <a> tags. Also if you want to have the same setup of columns on mobile device as on PC monitor one declaration: col-xs-3 is enough, no need to use sm, md, lg etc...
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<style>
.but
{
background-color: red;
font-size:40px;
border-bottom:1px solid white;
border-width:1px;
border-left: 1px solid red;
border-right: 1px solid red;
text-decoration:none;
color:white;
text-align:center;
}
</style>
</head>
<body style="background-color:#DBE8D7;">
<div class="container">
<div style="text-align:center;border:1px solid red; border-top-right-radius:8px; border-top-left-radius:8px; background-color:white;font-size:75px;margin-bottom:0px;border-bottom:none;">div1</div>
<br/>
<div class="row">
<div class="col-xs-3">A</div>
<div class="col-xs-3">B</div>
<div class="col-xs-3">C</div>
<div class="col-xs-3">D</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Maybe this isn't perfect, but something like this might work:
Change the font-size attribute to 15vw:
font-size: 15vw;
and in your HTML, no need to use col-lg-3, col-md-3, col-sm-3 if you plan to use the same orientation all the way down to col-xs-3. To get a better idea about how this column system works, take a look at the documentation for the grid system.
A
B
C
D
Ideally this isn't the best way to go about it. The better way would be to have the menu turn into a drop-down menu for smaller screens. Bootstrap provides functionality for that.
For that, take a look at the documentation for the navigation bar.
when I'm printing my page using window.print ,Its automatically adding some data's in header and footer
for ex: In top of the page its adding - page tittle and localhost url . In bottom of the page adding - page number and time . How can I get rid of these information from my page
My Html Page:
<title>GM Shop Click Drive Tracker Tool - Reports</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" media="screen"/>
<style>
body {
padding-top: 6px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/gmpt.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
<style type="text/css">
#media print {
input {
display:none !important;
}
.ui-helper-hidden-accessible {
display:none !important;
}
#headRow {
display:none;
}
.sidebar-nav {
display:none !important;
}
select {
display:none !important;
}
.dataList {
width:90% !important;
}
}
table.dataList {
border-collapse: separate;
border-spacing: 0;
}
table.dataList th {
background-color: #f0f0f0;
}
table.dataList tr th,
table.dataList tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table.dataList tr th:first-child,
table.dataList tr td:first-child {
border-left: 1px solid #bbb;
}
table.dataList tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* top-left border-radius */
table.dataList tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table.dataList tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table.dataList tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table.dataList tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
tr.alternate {
background-color: #f0f0f0;
}
.highlight {
background-color:#FFFFE0 !important;
}
</style>
<div class="container-fluid">
<div class="row-fluid" id="headRow">
<div class="span2" style="text-align: center">
<img src="images/shop_click_drive_logo.jpg" style="width:100px"/>
</div>
<div class="span10" style="vertical-align: bottom;padding-top:40px;padding-bottom:0px">
<ul class="nav nav-tabs" style="padding-bottom:0px;" id="topTabs">
<li class="active" id="dealerTab">Dealer Report</li>
<li id="statusTab">Dealer by Status</li>
<li id="stepTab">Dealer by Step</li>
<li id="userTab">Dealer by User</li>
<li id="userTab">"In Process" Report</li>
<li id="userTab">RouteOne Report</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li>Dashboard</li>
<li>Tracker</li>
<li class="active">Reports</li>
<li>BroadCast</li>
<li>Calendar</li>
<li>Documents</li>
<li>Admin</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span10" id="mainContent" style="padding-left:20px">
<!-- Begin Content -->
<div class="row">
<div class="span12">
<input type="text" style="width:50%" name="locationSelector" id="locationSelector" value="Start typing location name/id" onfocus="this.value=''"/>
</div>
</div><!-- /container -->
You will not be able to remove these headers and footers, as it is the browser that puts them there. On some browsers, the user may be able to remove the header and footer, but since this requires intervention from a (savvy) user, it's probably not the solution you are looking for.
If you really must remove the header/footer yourself, your only option seems to be producing PDF output which the user can then print, or save to disk. Some CMSs will offer this functionality automatically (e.g. Joomla). If you're rolling your own, have a look at the following libraries:
http://www.fpdf.org/
http://www.tcpdf.org/
These classes are able to convert an HTML document (or part thereof) into PDF. They allow you to pass in a CSS file so you can determine the layout and style of the resulting PDF. In my experience, it works well as long as you steer clear of (complex) tables.
You can also turn to JS to print specific DIV. Here is Example
JS
function printPage(id) {
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
var printWin=window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
You can call above function on click event.
I'm programming a html5 app with JQuery Mobile and Phonegap. I want to run them on many different devices. Because of that, I want to have everything relative to screen size.
<div id="pos" data-role="content"
style="border: 5px solid silver; margin-left: auto; margin-right: auto; width: 250px; height: 250px;">
I use this div Element to display a google map inside with a little border around.
How can I adjust the size for example 80% of the screen size?
I tried it with width: 90%; height: 90%, but the result is really bad. Its not relative to screen, it lokks like relative to the content.
And the size of the border is fixed with 5px, is it possible to insert here a nice argument to have it relative to screen size?
I hope someone can help!
Thanks!
A html element, set to width: 100%, stretches to a 100% of it's parents width. You need to make sure that the containing elements widths are also 100%.
You also need to make the html and body width 100%.
An example:
html, body { width: 100%; }
#pos { width: 80%; }
This example assumes the #pos element is straight on the body.
you might need to define the height and width of the parents if you dont want to use js
here i made an example on jsfiddle
jsfiddle
looks good, so I think the problem is because of JQuery! Here is my complete code of this page:
<!DOCTYPE html>
<html>
<head>
<title> App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<style>
html, body, geolocation { width: 100%; height: 100%; }
#pos { width: 80%; height: 80%; }
</style>
</head>
<body>
<div data-role="page" id="geolocation" data-theme="a">
<h2 align="center">Geolocation</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div id="pos" data-role="content" style="border: 5px solid silver;">
Deine Position wird ermittelt...</div>
<script type="text/javascript" src="geolocation.js"></script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li>Connect</li>
<li>Vehicles</li>
<li>Info</li>
</ul>
</div>
</div>
<script>
$('#geolocation').on('swipeleft',function(){
$.mobile.changePage("fuelGauge.html", { transition: "slide"});
console.log('slideLeft');
})
$('#geolocation').on('swiperight',function(){
$.mobile.changePage("batteryStatus.html", { transition: "slide", reverse: 'true'});
console.log('slideLeft');
})
</script>
</div>
</body>
</html>