I am creating an admin panel with charts/images, etc.
I am failing to make it responsive.
All images are svg's, I used charts.js framework to create the pie chart.
This is an example of a div I have
This is the html:
<div class="row">
<div class="col-md-6">
<div class="alerts-chart-wrapper">
<canvas id="alertsChart" style="float: left;"></canvas>
</div>
</div>
<div class="col-md-6">
<div class="row alert-row">
<div class="entitys-icons icon-1"> </div>
<div class="alert-entity-name"> Users </div>
<div class="entity-alerts-count">28</div>
</div>
...(3 more rows)
</div>
</div>
The css:
.alert-row {
padding: 0% 15% 3% 5%;
}
.entitys-icons {
background: url('/Areas/WebApp/app/main_page_assets/02_general_alerts_icons.svg');
background-repeat: no-repeat;
width: 33px;
height: 33px;
background-size: 77px;
float: left;
}
.entitys-icons.icon-1 {
background-position: 0 2px;
}
.alert-entity-name {
float: left;
font-size: 0.75em;
vertical-align: middle;
line-height: 35px;
padding-left: 2px;
}
.entity-alerts-count {
float: right;
vertical-align: middle;
line-height: 35px;
padding-left: 2px;
}
.alerts-chart-wrapper {
width: 100%;
}
Now the problem is the circle grows and shrinks depending on the resolution, but the rows arent.
Here is a screenshot of the problem when the width shrinks(the circle and th rows must be aligned):
What is the strategy to use here? I thought maybe i will use media's with fixed size, but the best solution for me is that the rows height will change accordingly.
Inside the head tag, configure the right viewport
<meta name="viewport" content="width=device-width,minimum-scale=1>
You have to use the other grid options to specify the sizes as the screen changes resolution.
http://getbootstrap.com/css/#grid
For mobile you'll want to use the .col-sm- prefix.
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="alerts-chart-wrapper">
<canvas id="alertsChart" style="float: left;"></canvas>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-6 alert-row">
<div class="entitys-icons icon-1"> </div>
<div class="alert-entity-name"> Users </div>
<div class="entity-alerts-count">28</div>
</div>
...(3 more **col**)
</div>
</div>
</div>
Related
I want to fix my header div which has two components. An Image and the title of the page as shown in the figure:
The image shown below is on MDPI screen.
Here is my Code
#headerdiv {
font-size: 4em;
font-weight: bold;
line-height: 60px;
padding: 1% 0;
margin: auto auto;
}
.headerdiv>#leftheaderdiv {
min-height: 750px;
text-align: center;
}
<div class="headerdiv">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv">
<img src="http://lorempixel.com/200/200/sports" id="mainlogo" />
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv">
<p id="headerdivp">TXYZ RD MEDIA</p>
</div>
</div>
It looks like this on a mobile screen, which is fine as per the bootstrap arrangement:
The problem I am facing is on HDPI screen where the header looks like this. The text goes on the top.:
How Can I make sure that the right div also occupies 100% height / fills the right part and the text is always in the middle no matter what screen size?
Thank you!
Solution 1:
You can use flex to align the text in vertically center. Add the following CSS in your paragraph parent element like below.
.headerdiv > #leftheaderdiv{
min-height: 750px;
display: flex;
align-items: center;
text-align: center;
}
Solution 2:
If you don't want to use flex you can use the old method like make your parent as table and child element as table-cell.
#headerdivp{
font-size: 4em;
font-weight: bold;
line-height: 60px;
padding: 1% 0;
display:table-cell;
vertical-align:middle;
margin: auto auto;
}
.headerdiv > #leftheaderdiv{
min-height: 750px;
display:table;
text-align: center;
}
You are missing row class. Also add class align-items-center. Also also have id leftheaderdiv twice. Make it unique.
<div class = "row headerdiv align-items-center">
<div class = "col-lg-6 col-md-12 col-sm-12 col-xs-12" id = "leftheaderdiv">
<img src="https://s3-us-west-1.amazonaws.com/xesdcf/xdclogo3d2.svg" id = "mainlogo"/>
</div>
<div class = "col-lg-6 col-md-12 col-sm-12 col-xs-12" id = "leftheaderdiv">
<p id = "headerdivp">TXYZ RD MEDIA</p>
</div>
</div>
Try to use flex..
For vertical align center use align-items:center.
And for mobile stacked view use flex-direction:column using media query.
Stack Snippet
#headerdivp {
font-size: 4em;
font-weight: bold;
line-height: 60px;
}
.headerdiv>#leftheaderdiv {
text-align: center;
}
.headerdiv {
display: flex;
align-items: center;
}
#media (max-width:768px) {
.headerdiv {
flex-direction: column;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="headerdiv row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv">
<img src="http://lorempixel.com/200/200/sports" id="mainlogo" />
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="leftheaderdiv">
<p id="headerdivp">TXYZ RD MEDIA</p>
</div>
</div>
</div>
Reference Link
flex
flex-direction
align-items
Have you ever seen someone's code and just laughed? Be ready to do so with my jQuery as it may not make any sense to you, but I'm trying :)
Anyway, what I need is simple and I've gotten some inspiration from other questions here such as Slide Panel up and down but they don't do exactly what I need. At least methinks.
I have a panel immediately below my header (BOOTSTRAP). This panel needs to be there but the user must have a choice to close it a little, not the whole way. Just enough to still have the fa-chevron icon available to click it and slide it back down as well as some information (I'll provide images below).
So in a nutshell, the requirements are:
Starts open, fa-chevron-up
On icon click, the panel slides up (sort of slowish), hides the photo and second row of information, and switches the icon to fa-chevron-down.
On click of fa-chevron down (collapsed view) everything returns to the initial full view.
Here is the HTML
<div id="header" class="header navbar navbar-fixed-top navbar-inverse" data-current-theme="navbar-inverse">
</div>
<div class="row">
<div class="col-xs-12">
<div class="banner clearfix">
<div class="collapser">
<i class="fa fa-chevron-up fa-fw collapse-icon"></i>
</div>
<div class="banner-info clearfix">
<div class="col-sm-12 col-md-2">
<div class="circle-container">
<img class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGjucaoN3fabOcumnr7RKTB3ICTJFLuLClnpiQUIR9oW4a11wb" alt="offender-img">
</div>
</div>
<div class="col-sm-12 col-md-10">
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Full Name</label>
<span>Floyd "Money" Mayweather</span>
</div>
<div class="form-group">
<label class="control-label">Some Label</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Offender ID#</label>
<span>123569863</span>
</div>
<div class="form-group">
<label class="control-label">Longer Label Example</label>
<span>Something Here with an ellipsis</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span href="#"><p>Something Here</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the CSS
.navbar {
border: none;
border-bottom: 2px solid #30373e;
font-size: 14px;
-webkit-box-shadow: 0 1px rgba(0,0,0,0.025);
box-shadow: 0 1px rgba(0,0,0,0.025);
z-index: 1040;
margin-bottom: 0;
height: 55px;
}
.banner {
border: none;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.07);
box-shadow: 0 2px 0 rgba(0,0,0,0.07);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
position: relative;
background: #101113;
padding: 20px;
display: block;
top: 55px;
}
.banner .collapser {
position: absolute;
bottom: 10px;
color: #bbb;
}
.banner .circle-container {
position: relative;
left: 35px;
text-align: center;
width: 110px;
height: 110px;
display: flex;
overflow: hidden;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
border: 3px solid #bbb;
}
.banner .banner-info label {
color: rgba(248,151,29,0.77);
}
.banner .banner-info span {
display: block;
color: #bbb;
white-space: nowrap;
width: 85%;
overflow: hidden;
text-overflow: ellipsis;
}
and the very vague and probably useless JS
$('.collapser').click(function () {
$collapser = $(this);
$banner = $collapser.parent().find('.banner');
$banner.slideToggle(500, function () {
$collapser.find('.collapse-icon').toggleClass('fa-chevron-up fa-chevron-down');
});
});
Here are both views for visual references
Initial view
collapsed view
And here is CODEPEN
No .banner elements appears as child of $collapser.parent() ?
Try changing .banner to .banner-info at $banner = $collapser.parent().find(".banner-info");
codepen http://codepen.io/anon/pen/WrXYGx
Is there a way to slide it up less than that? or would that be a whole
different deal? Because I can hide the photo and the second row if I
mess with it long enough, but I still need the first row to remain
visible.
Use selector $banner = $collapser.parent().find('.banner-info .circle-container, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)') as $banner collection
$('.collapser').click(function() {
$collapser = $(this);
$banner = $collapser.parent()
.find('.banner-info .circle-container\
, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)');
$banner.slideToggle(500, function() {
$collapser
.find('.collapse-icon')
.toggleClass('fa-chevron-up fa-chevron-down');
});
});
codepen http://codepen.io/anon/pen/WrXYGx
Please refer this fiddle here to understand the problem I'm trying to explain. I want such a layout wherein divs will utilize all the available space. There are 8 divs here which are resizable. When I minimize divs A and B, an empty space is seen below these divs. I want divs D and E to occupy that empty space.
How can I achieve this? There are some jQuery plugins available like gridstack out there but their resizing feature is somewhat different. Without using any available jQuery plugin, is it possible to achieve mentioned effect? If you have any useful resources please share. Thanks in advance.
Edit
One solution could be to have 3 columns in .container but this solution might not work if div is resized horizontally.
Change your div structure to the following I think that will help you.
$(document).ready(function() {
$('.tile').resizable({
handles: 'e, s, se',
containment: '.container'
});
});
.tile
{
height: 180px;
width: 100%;
float: left;
background-color: rgb(232, 232, 232);
border: 1px solid red;
margin: 0% 0% 3% 0%;
min-height: 20px;
max-height: 360px;
max-width: 540px;
min-width: 180px;
text-align: centre
}
.verticalspace{
width:180px;
float:left;
margin: 0% 0% 0% 1%;
}
.container{
overflow: hidden
}
<div class="container">
<div class= "verticalspace">
<div class="tile">A</div>
<div class="tile">E</div>
</div>
<div class= "verticalspace">
<div class="tile">B</div>
<div class="tile">F</div>
</div>
<div class= "verticalspace">
<div class="tile">C</div>
<div class="tile">G</div>
</div>
<div class= "verticalspace">
<div class="tile">D</div>
<div class="tile">H</div>
</div>
</div>
this kind of structure will stay close even if somediv above it is collapsed also
You could try a 3 col solution (And use javascript to properly order the items in each column):
.col {
background: whitesmoke;
width: 165px;
float: left;
}
.item {
height: 150px;
width: 150px;
margin: auto;
background: grey;
margin-top: 15px;
}
.custom {
height: 265px;
}
.custom2 {
height: 30px;
}
<div class="container">
<div class="col">
<div class="item"></div>
<div class="item custom"></div>
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
<div class="item custom2"></div>
<div class="item"></div>
</div>
<div class="col">
<div class="item custom2"></div>
<div class="item"></div>
<div class="item custom"></div>
</div>
</div>
I have 2 rows, one which needs two images and the other which needs to show information if those images are clicked.
I'm having an issue centralising the images and text within the row div.
<div id="container">
<!-- Image row -->
<div class="row">
<div class="col-md-6">
<div id="badbutton"></div>
</div>
<div class="col-md-6">
<div id="goodbutton"></div>
</div>
</div>
<!-- Text Row -->
<div class="row">
<div class="col-md-6">
<div id="bad" style="display:none;">
<p>Oh no! We'd appreciate it if you'd share your experience with us so we can improve in the future. Just click below to get started.</p>
<p> FORM HERE </p>
</div>
</div>
<div class="col-md-6">
<div id="good" style="display:none;">
<p>Fantastic! Please share your experience with the world on of these popular websites. Just make a selection below to get started.</p>
<ol>
<li>Click here to review us on Google+ Reviews</li>
<li>Click here to review us on Facebook</li>
</ol>
</div>
</div>
</div>
</div>
What's happening is the col-md-6 takes up 45% of the row div but the buttons inside aren't centralising themselves.
Here is the CSS:
.row {
margin: 0 auto;
}
.col-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-md-6 {
width: 45%;
}
#good,
#bad {
width: 50%;
}
Here is the outcome:
Try using display:table-* it will make your elements behavior like a table.
.row {
margin: 0 auto;
display: table-row;
}
.col-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
Give style "text-align:center" to the "col-md-6" div. And display: inline-block to #goodbutton and #badbutton.
Just for example
#badbutton, #goodbutton {
height: 50px;
width: 50px;
display: inline-block;
background: #444;
vertical-align: middle;
}
Sample fiddle here
http://jsfiddle.net/Lw27ofb1/
I've got a grid of items that upon click expand to show a table below it. It works fine, but it reorders the DIV's positions as per my illustration below.
I need them to keep their respective position in their "columns".
Here's the illustration to make it clear:
And here is my HTML code:
<div
class="item-component"
ng-controller="CollapseCtrl"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
>
<div class="component-wrapper" ng-click="isCollapsed = !isCollapsed">
Item - click to expand
</div>
<div class="codes-wrapper" collapse="isCollapsed">
<table class="table table-striped table-condensed">
Expanded content here
</table>
</div>
</div>
And here is the .item-component class:
.item-component {
width: 33.33333333333333%;
float: left;
padding-left: 15px;
}
How would I achieve the "expected result" in my illustration?
Use display:inline-block instead of float:left on your .item-component
Living Demo
.item-component {
width: 33.33333333333333%;
display: inline-block;
padding-left: 15px;
}
Or, you can take a look at BootStrap and do it by using the :before element maintaning the float:left as you had it before.
You would also need to wrap each row:
.col{
float:left;
width: 32.33%;
min-height: 50px;
background: #ccc;
padding: 20px;
box-sizing: border-box;
}
.row{
display:block;
}
/* This do the trick */
.row:before{
content: " ";
display: table;
box-sizing: border-box;
clear: both;
}
Living example
Update
If you don't want the gap you will have to look for another HTML markup. You will have to print first each column with each rows.
This is the needed html markup:
<div class="col">
<div class="row" id="demo">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="col">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="col">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
And the needed css:
.col{
float:left;
width: 32.33%;
}
.row{
display:block;
padding: 20px;
box-sizing: border-box;
background: #ccc;
min-height: 50px;
}
#demo{
height: 150px;
background: red;
}
Living demo
You can do it in the following way.
HTML:
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<br class="clear" />
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<br class="clear" />
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div>
CSS:
.col {
float: left;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
JS:
$('.col').click(function() {
if ($(this).is('.clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked')
}
});
Live demo: http://jsfiddle.net/S7r3D/1/
ETA: the problem with this solution is that it moves entire row down. I don't really see how to nicely achieve what you want...You could try to overflow the other divs, but it depends on your needs. Is such solution acceptable?
ETA2: actually I made it perfect I think! Have a look here: http://jsfiddle.net/S7r3D/3/
The crucial change was rearranging divs and putting them in columns instead.
HTML:
<div class="container">
<div class="fleft">
<div class="col">1</div>
<div class="col">4</div>
<div class="col">7</div>
</div>
<div class="fleft">
<div class="col">2</div>
<div class="col">5</div>
<div class="col">8</div>
</div>
<div class="fleft">
<div class="col">3</div>
<div class="col">6</div>
<div class="col">9</div>
</div>
<div>
CSS:
.col {
clear: both;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
.col.clicked {
height: 300px;
background-color: red;
}
.fleft
{
float: left;
}
JS: /* same as above */
Create three container divs, and afterwards, put {1, 4, 7} into div1, {2, 5, 8} into div2, and {3, 6, 9} into div3.
Otherwise you will have it very difficult to control their positioning.