I have a layout with Bootstrap. MY problem is that I cannot get the same output on every monitor. In a portable pc the output is different than on a regular monitor.
I have already changed from container to container-fluid but still cannot get the same output on every monitor. Is it possible to read the screen resolution and adjust the code to it?
This is my code:
<body style="overflow: hidden; height: 100%;">
<?php
include ($_SERVER['DOCUMENT_ROOT']."/include/Menu.php");
?>
<div class="jumbotron" style="border-bottom: solid 3px rgb(132, 177, 161);">
<div class="container-fluid">
<div class="row">
<div class="col-md-1" style="padding-left:0px">
<button id="New" type="button" class="btn btn-default btn-sm ButtonEWG">
<img id="ButtonIcon" src="/img/icons/plus.png" style="padding-right: 10px;">
New
</button>
</div>
<div class="col-md-1">
<button id="New" type="button" class="btn btn-default btn-sm ButtonEWG">
<img id="ButtonIcon" src="/img/icons/excel.png" style="padding-right: 10px;">
Export
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid viewport" style="padding: 0px;">
<div class="row thick" style="border-bottom: solid 3px rgb(132, 177, 161); margin: 0px; padding: 0px;">
<div class="col-md-6" style="height: 100%; padding: 0px; border-right: solid 3px rgb(132, 177, 161); border-left: solid 3px rgb(132, 177, 161)">
<div id="OccurrencesGrid" style="border: none"></div>
</div>
<div class="col-md-6">
<div id='DetailsTabs'style="margin-top:10px; border:none">
<ul>
<li style="margin-left: 30px;">Occurrence Details</li>
<li>Occurrence status overview</li>
</ul>
<div style="padding-top:20px; background-color:#F5F5F5;">
<div id='OccurrenceDetails'></div>
</div>
<div style="padding-top:20px; background-color:#F5F5F5">
<div class = "row">
<div class = "col-md-4"><div class="alert alert-info" role="alert" style="background-color: #F5F5F5;">Opening</div></div>
<div class = "col-md-2" align="center"><div class="alert alert-info" role="alert">N/A</div></div>
<div class = "col-md-2" align="center"><div class="alert alert-success" role="alert"><?php echo $StatusGrid[0];?></div></div>
<div class = "col-md-2" align="center"><div class="alert alert-warning" role="alert">N/A</div></div>
<div class = "col-md-2" align="center"><div class="alert alert-danger" role="alert"><?php echo $StatusGrid[1];?></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid thin" style="padding-top: 10px;">
<div class="col-md-2">
<div id="LeftDonut" style="height:250px;"></div>
</div>
</div>
</div> <!-- /container -->
I just gave another guy some Mark Up / CSS to keep his site fluid I think this will also help you.padding causes overlap, fluid design?If you need further assistance let me know :D
Related
This is the code , so can anyone help me why im not seeing bootstrap alert when i click the button , it wont show on the page !
<!DOCTYPE html><html lang="en"><head><script type="text/javascript">$(document).ready(function(){
$('button').click(function(){
$('.alert').show()
}) });</script><title>Bootstrap Example</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
.alert{display: none;}
</div>
<div class="col-md-6">
<div style="border: 1px solid black; height: 100px;">
</div>
<div style="border: 1px solid black; height: 100px;">
</div>
</div>
<div class="container">
<button>Send Message</button>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Success! message sent successfully.
</div>
</div>
its really hard when you dont provide your actual code, but... here goes an idea to achieve something similar to what is in the picture using classes from bootstrap:
<div class="container">
<div class="row">
<div class="col-md-5" style="border: 1px solid black; height: 600px;">
content here -->
</div>
<div class="col-md-7">
<div class="row">
<div class="col-md-12" style="border: 1px solid black; height: 300px;">
content here -->
</div>
</div>
<div class="row">
<div class="col-md-12" style="border: 1px solid black; height: 300px;">
content here -->
</div>
</div>
</div>
</div>
</div>
try this code in an ambient where you are pointing to bootstrap files or it will be totally wrong.
i'm creating a grid of two rows, first one would be the sidebar and the other one (with other two rows in his inside) is the main content:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-align-self-center sidebar" style="border-right: 5px solid #b3daff ">
<ul>
<li><button style="border:1px solid #9dbbe4;" class="change-button" id="change-order" onclick="change()" type="button">Start Moving</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="stop()" type="button">Stop Moving</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="hide()" type="button">Hide Elements</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="hide()" type="button">Hide Elements</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="restore()" type="button">Restore Elements</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="zoom()" type="button">Zoom In</button></li>
<li><button style="border:1px solid #9dbbe4;" class="change-button" onclick="resize()" type="button">Zoom Out</button></li>
</ul>
</div>
<div class="col-md-10 main-content">
<div class="row"> <!--first row -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="order:1">
<img class="meeseks" src="img/meeseks_purple.jpg" />
<div class="button-box">
<button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="order:2">
<img class="meeseks" src="img/meeseks_purple.jpg" />
<div class="button-box">
<button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="order:3">
<img class="meeseks" src="img/meeseks_purple.jpg" />
<div class="button-box">
<button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="order:4">
<img class="meeseks" src="img/meeseks_purple.jpg" />
<div class="button-box">
<button style="background-color:#BA69B6;border:4px solid #BA69B6" class="button" type="button">Pick Up My Color!</button>
</div>
</div>
</div>
</div>
<div class="row"> <!--second row -->
<div class="col-md-3">col</div>
<div class="col-md-3">col</div>
<div class="col-md-3">col</div>
<div class="col-md-3">col</div>
</div>
</div>
</div>
</div>
working well on xs device and sm device. But in some resolution for md device (like 1024x768 ) the images dont have the correct spacing and overflow their wrapper. How can i solve?
Thanks in advance
ok, i had forgotten the overflow property, now when i resize the page the images dont overflow they div box. The effect is not so nice, but is much better.
Just trying to make a second row of col-md-6s (I copied the "row" div and pasted it within the container div) but I can't seem to figure out why its not perfectly lined up.
The last two lines of HTML code reflect the beginning of the second row.
.btn-group-vertical{
border: 2px solid black;
border-radius: 10px;
}
.col-md-6 {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#prod_view {
height: 100%;
background-color: lightcoral;
display: flex;
justify-content: flex-start;
border: solid;
border-radius: 10px;
}
.col-md-6 > div:last-child {
width: 50%;
}
.boxclass {
height: 95%;
width: 50%;
}
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div>
<div id="prod_view">
<div class="boxclass" >
<img alt="product" class="img-rounded" src="../Images/math.jpg" style="max-height: 100%; max-width: 100%;">
</div>
<div class="boxclass">some cool blocks all stacked up n shtufff</div>
</div>
</div>
</div>
<div class="col-md-6" style="background-color: lightgray">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div>
<div id="prod_view">
<div class="boxclass"></div>
<div class="boxclass"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
Works fine when the .row is closed properly...
http://www.codeply.com/go/OCsEsFb2Lr
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
</div>
<div class="col-md-6" style="background-color: lightgray">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
</div>
<div class="col-md-6" style="background-color: lightgray">
</div>
</div>
</div>
I have implemented tabs using uib-tabset. There is issue with alignment of tab.
As you can see in below image, my 'Current' tab is shifted to left and it is moving out of card leaving uncomfortable space between 'Current' and 'Upcoming'.
I want both tabs to aligned perfectly with card.
Is there any way?
I have tried changing CSS in a lot of ways (.nav-tabs especially) but no luck.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="card" style="margin-left:3%;margin-right:3%" ng-controller="AppointmentsCtrl">
<uib-tabset active="active">
<div class="row">
<div class="col-xs-6 nav nav-tabs">
<uib-tab index="0" heading="Current"> <!-- -->
<ul class="list-group">
<li class="list-group-item">
<!-- <div id="accordion" role="tablist" aria-multiselectable="true"> -->
<div class="panel panel-default" style="border-color: white;">
<div class="panel-heading" role="tab" id="headingOne"
style="background-color: #686868; margin-top: 5%;">
<div class="row">
<div class="col-xs-2">
<div class="myimage">
<img id="image" src="img/Calender.png"
style="width: 30px; height: 30px;"></img>
<p id="text">26</p>
</div>
</div>
<div class="col-xs-8">
<p class="panel-title" data-toggle="collapse"
data-parent="#accordion"
ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
aria-controls="collapseOne"
style="color: white; font-size: 15px">
Monday, 26 Sep 2016<br> 02:00 PM
</p>
</div>
<div class="col-xs-2">
<a data-toggle="collapse" data-parent="#accordion"
ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
aria-controls="collapseOne"><img id="arrow"
src="img/Down_Arrow.png" style="width: 30px; height: 30px;"></img></a>
</div>
</div>
</div>
<div id="collapseOne" uib-collapse="isCollapsed"
class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingOne"
style="background-color: #d5d5d5;">
<div class="row">
<div class="col-xs-6 col-sm-offset-1">
<h5 style="color: #696969; margin-top: 5%;">Visitor
Name</h5>
<h5 style="color: #000; font-weight: bold;">Subodh
Bagade</h5>
<h5 style="color: #696969;">Purpose</h5>
<h5 style="color: #000; font-weight: bold;">Sales
Meeting</h5>
</div>
<div class="col-xs-6">
<img src="img/Gray_User.png"
style="margin-top: 10%; width: 110px; height: 100px;"></img>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<!-- <a ng-href="#/viewdetails/appointmentId={{appointment.appointmentId}}"> -->
<a ng-href="#/viewdetails/appointmentId=1"> <img
src="img/more.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
<div class="col-xs-4">
<!-- <a ng-href="#/edit/appointmentId={{appointment.appointmentId}}"> -->
<a ng-href="#/edit/appointmentId=1"> <img
src="img/Edit_White.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
<div class="col-xs-4">
<a ng-href="#" onClick="confirm('Are you sure?')"> <img
src="img/Delete.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
</div>
</div>
</div>
<!-- </div> -->
</li>
</ul>
<!-- --> </uib-tab>
</div>
<div class="col-xs-6 nav nav-tabs">
<uib-tab index="1" heading="Upcoming">
<p>Some text here.</p>
</uib-tab>
</div>
</div>
</uib-tabset>
</div>
</div>
</div>
</div>
A part of my CSS:
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs>li {
/* float: left; */
margin-bottom: -1px;
background-color:#E9880A;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 0.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
this looks more like alignment issue. Once you align the tabs individually it should work fine. I was able to get it aligned by adjusting the tabs individually.
I've style border: 1px solid black; to determine if it is correct box, but it overlap and goes outside. This is my html
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left">
<div class="row">
<p>By Jerald Patalinghug</p>
</div>
<div class="row">
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right">
<div id="votes">
<div class="row">
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div class="row">
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
and this is the image
look, the inside of div.pull-left are going outside.
EDIT1
Thanks guys, What I did was remove class="row" on every div
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left">
<div>
<p>By Jerald Patalinghug</p>
</div>
<div>
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right">
<div id="votes">
<div>
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div>
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
Remove the
<div class="row">
inside each of the bordered div's - these are adding -15px to the left and right. These are only to be used when you are nesting inside .container or .col-sm-12 (for example).
This is a good read if you're not 100% sure on how the bootstrap grid works:
http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
Use class container-fluid along with pull-left/pull-right.
Solution:
<div class="panel panel-default">
<div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
<div class="panel-footer clearfix">
<p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
<div style="border: 1px solid black; display: block;" class="pull-left container-fluid">
<div class="row">
<p>By Jerald Patalinghug</p>
</div>
<div class="row">
Tags: Funny, Wtf, Nice
</div>
</div>
<div style="border: 1px solid black;" class="pull-right container-fluid">
<div id="votes">
<div class="row">
<a href="#" data-card_id="26" class="vote upvote btn btn-default">
<span class="fa fa-thumbs-up"></span>
</a>
<a href="#" data-card_id="26" class="vote downvote btn btn-default">
<span class="fa fa-thumbs-down"></span>
</a>
</div>
<div class="row">
<center>
<span class="vote_count">1</span> points
</center>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
Apply padding in style to have nice look
<div style="border: 1px solid black;padding: 2%; display: block;" class="pull-left container-fluid">
<div style="border: 1px solid black;padding: 2%" class="pull-right container-fluid">