How do I make my list of search results responsive? - css

I have a list of results that I want to make responsive. I have these results displaying roughly in the centre of the page with borders on the left and right which are whitespace. I want this whitespace to disappear as the browser is resized.
I'm using the following css:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
#parent{ position: relative; width: 900px; left: 400px; background: #999;padding:10px;}
.child { position: relative; background:#ccc;min-height:250px;margin:20px;}
This is the html:
<div id="parent" infinite-scroll="addMoreItems()" infinite-scroll-distance="1" infinite-scroll-disabled='busy'>
<div class="child" ng-repeat="blah in blahs">
Description: <br />{{Description}} <br /><br />
StarRating: <br /> {{Rating}} <br /><br />
<div ng-controller="weatherCtrl" ng-init="isCollapsed = !isCollapsed">
<div>
<button ng-model="blah" class="btn btn-default" ng-click="loadWeather(blah, $index);">{{buttonText}} weather</button>
<hr>
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</div>
<div style='clear: both;'></div>
</div>
<div ng-show='busy'><h1>Loading data...</h1></div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
#parent{ position: relative; width: 900px; left: 400px; background: #999;padding:10px;}
.child { position: relative; background:#ccc;min-height:250px;margin:20px;}
#media (max-width: 400px) {
.child{margin:0px;}
#parent{width:100%;}
}
That should be the css you want to use

Related

Content div is over the navbar

So I have a navbar fixed to the top and for this I've used position: fixed but for some reason my content is overriding it. I would like to have something like this:
html {
position: relative;
min-height: 100%;
}
.header {
top: 0;
position: fixed;
}
.footer {
position: fixed;
bottom: 0
}
<!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">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Static Template</title>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
Codesandbox Demo: https://codesandbox.io/s/laughing-dew-2g2r6?file=/index.html
You have to add some margin-top to the row class.
html {
position: relative;
min-height: 100%;
}
.header {
top: 0;
position: fixed;
}
.row {
margin-top: 50px;
}
.footer {
position: fixed;
bottom: 0;
}
<!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">
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Static Template</title>
</head>
<body>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
For that you need to add margin-top css in your row class.
For example:
.header {
position: fixed;
top: 0;
width: 100%;
}
.row{
margin-top: 67px;
}
.footer {
position: fixed;
bottom: 0
}
<div class="header">
<h2>header</h2>
</div>
<div class="row">
<div class="column side" style="background-color: #aaa;">Column</div>
<div class="column middle" style="background-color: #bbb;">Column</div>
<div class="column side" style="background-color: #ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
You can play with code here. Also you can check here in other resources.

bootstrap container-fluid shrinks when contents in a row-cell is not filled enough

The page container shrinks when a cell inside a row is empty or does not have enough contents.
html,
body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<!-- side menu -->
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation</h1>
</div>
<!-- main content -->
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header>
<div class="col-md-5">
<input type="text" name="term" placeholder="Search anythhing ...">
</div>
<div class="col-md-7">
<ul>
<li>Welcome to administration area</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label lable-warning">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label lable-message">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out
</a>
</li>
</ul>
</div>
</header>
</div>
<div class="row">
<footer>
<div class="pull-left"><b>Copyright</b> © 2017</div>
<div class="pull-right"><b>Admin System</b></div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And as you can see i am using bootstrap to build my page. Container class is <div class="container-fluid display-table">
The page is supposed to be 100% width but it is having a left and right margins as shown here :
And when i fill the col-md-5with some text that is what i get :
Any idea why this is happening ??
I got this working with just adding width: 100% to the table element.
.display-table {width: 100%;}
Hope this solves the issue.
Agreed added 100% on display-table will give you your result you are wanting.
See screenshot screenshot

How do I make a button full height of the parent container and right-aligned?

I am using Bootstrap and I want add a button at right of a bar that looks like <input-group-addon>. To be specific, full height and locates at right most.
I've tried height: 100% but the button styles super high.
this is part of my code: https://plnkr.co/edit/lK8vt0wT1xDesuOZW8vU?p=preview
this is what I m looking for
Try absolutely positioning your button:
.my-heading {
position: relative;
}
.btn.my-btn {
position:absolute;
right: 0;
top: 0;
height: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading my-heading">Assist Panel<button class="my-btn btn"><i class="fa fa-chevron-left"></i></button></div>
<div class="panel-body"></div>
</div>
</body>
The parent needs position:relative.
Then you can position the button absolutely in the corner with height:100%
.panel-heading{
position:relative;
}
button.btn{
float: none;
margin-right: 0;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">Assist Panel<button style="float:right;margin-right:0;" class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button></div>
<div class="panel-body"></div>
</div>
</body>
Using Position Property
.panel-heading{
position: relative;
}
button.btn{
position: absolute;
top:0;
bottom:0;
border-radius: 0;
right: 0;
}
<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/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
<div class="panel-heading">Assist Panel<button class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button></div>
<div class="panel-body"></div>
</div>
By using display flex on the parent panel you could set the panel heading and the button next to each other and then they will naturally have the same height. Then would just need to adjust to panel-heading width.
.panel{
display: flex;
}
.panel-heading {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">Assist Panel</div>
<button class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button>
</div>
</body>
</html>

Bootstrap panel-footer with button pull-right

I have the following HTML element with bootstrap:
<div class="panel-footer">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
If you see there is a gray area (panel-footer):
The button uses pull-right class also that is float:right, but I would like the gray area that is actually the panel-footer div to fit within the button height.
This is the styles for panel-footer:
And this for the pull-right:
Any clue?
UPDATE:
I added after the button:
<div class="clearfix"></div>
And seems that fixed the problem. Is that ok?
Original Answer (2017)
you can try this (Bootstrap 3)
<div class="panel-footer text-right">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
You just need to add text-right class to your panel-footer.
It works for me.
Updates (2023-01-11)
Bootstrap 5
Use class text-end to make button realign to the right side.
.panel-footer {
background: #e9e9e9;
border-top: 0;
padding: 10px 15px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
<!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" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>
<body class="p-4">
<div class="panel-footer text-end">
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>
Bootstrap 4 & 3
Use class text-right will make the alignment to the right.
.panel-footer {
background: #e9e9e9;
border-top: 0;
padding: 10px 15px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
<!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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body class="p-4">
<div class="panel-footer text-right">
<button class="btn btn-primary">Primary button</button>
</div>
</body>
</html>
I ran your code you provided in a jsFiddle and got the same results. Even placing the button within the panel panel-default, still got the same results.
Here is a fix.
I created a jsFiddle
It includes two example one using your code with an override and one using a panel panel-default and panel-body with a css override.
hope that helps.
.panel-footer {
height: 50px !important;
}
#sep {
margin-top: 10px;
}
.panel-body {
background: #f3f3f3 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="panel-footer">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
<div id="sep"></div>
<div class="panel panel-default">
<div class="panel-body">
<button type="button" id="btnSave" class="btn btn-default pull-right">Save</button>
</div>
This is working for me.
<div class="footer">
Save
</div>
<div class="panel-footer">
<div class="form-group text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
This will work properly.

Vertical alignment of an image in a Twitter Bootstrap cell (height is unknown) [duplicate]

This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Closed 6 years ago.
I have a bootstrap grid and I am trying to center an image (200x100 per example provided) inside a cell.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<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" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
</div>
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
<img src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 container">
<img class="img" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>
I've tried a lot of techniques provided on internet without any luck. (BTW most of them explicitly define a height) As a proof I provide some of them here:
Example1: a trick with padding-top: 100% increases a row which I do not need.
Example2: table/table-cell just not working
Example 3: a trick with inline-block and vertical align is not working
<style>
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
display: inline-block;
vertical-align: middle;
}
</style>
Example 4: absolute position with top, left 50% and translate is working wrong
<style>
.img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
My favorite vertical alignment hack:
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It uses translateY and top to sandwich an item into a container with unknown height. This requires IE10+.
Try this
Check example at CODEPEN
CSS:
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
align-self: center;
}
.row > [class*='col-'] img {
align-self: center;
}
You also need to make sure that parent div of that image has height greater than image height.
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
align-self: center;
}
.row > [class*='col-'] img {
align-self: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<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" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
</div>
<div class="row" style="border:1px solid red;">
<div class="col-xs-6 different-height-1" style="border:1px solid green;">
<img class="img-responsive" src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 different-height-2" style="border:1px solid green;">
<img class="img-responsive" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>
You have to go against bootstrap styling but than it works
.img_container {
position: relative;
}
.reset_pos {
position: static !important;
}
.center {
position: absolute !important;
top: 50%;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<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" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text
<br />some text
<br />some text
<br />some text
<br />
</div>
<div class="col-xs-6">
some text
<br />some text
<br />some text
<br />some text
<br />
</div>
</div>
<div class="row img_container" style="border:1px solid red;">
<div class="col-xs-6">
<img src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 container reset_pos">
<img class="img center" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>

Resources