I created a responsive Ui in bootstrap but my layout isn't responsive at all.
I can live with the desktop version, but it looks terrible on mobile and tablet.
How can i fix this?
and what exactly is the reason my layout behaves like that on smaller devices?
you can find a live version here:
uncovered-muscle.surge.sh
Or take a look here for the code if you don't like clicking links
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg navbar-dark indigo">
<a class="navbar-brand" href="#">HOME</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555"
aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-555">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">exchange
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">community</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How To</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item avatar">
<a class="nav-link p-0" href="#">
<img src="#" class="rounded-circle z-depth-0"
alt="avatar image" height="35">
</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar -->
<div class="container">
<div class="jumbotron card card-image" style="background-color:black;opacity: 0.8;">
<div class="text-white text-center py-5 px-4">
<div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title" style="color:black;">Contract Balance</h5>
<p class="card-text">
<input class="form-control form-control-lg" type="text" placeholder="AGI" id="contractBalanceAgi"><br>
<input class="form-control form-control-lg" type="text" placeholder="SNET" id ="contractBalanceSnet"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="background-color:black;opacity:0.8;" >
<h1 style="text-align:center;color:white;">Invest</h1>
<div class="row">
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 1</a></h4>
<!-- Text -->
<p class="card-text">Exchange rate per SNET</p>
<!-- Button -->
<h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1 AGI</h2>
<br>
<h3>0.00000</h3>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 2</a></h4>
<!-- Text -->
<p class="card-text">Amount of AGI</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI available</h4>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 3</a></h4>
<!-- Text -->
<p class="card-text">You receive</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI approximatly</h4>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 4</a></h4>
<!-- Text -->
<p class="card-text">Confirm your purchase</p>
<!-- Button -->
Approve
<br>
<br>
Mint
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<div class="card" style="background-color:black;opacity: 0.6;">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text" style="color:white;">Note: 10% entry fees, 10% exit fees, 2% referral fees, 2% dev fees.The sell fee will
only be distributed if you actually sell your tokens. The number of tokens you will receive for your AGI does not include the fees, it's an estimate.</p>
</div>
</div><!-- end of card -->
<br>
<div class="container">
<div class="row">
<div class="col" >
<!-- Card -->
<div class="card card-image" style="background-color:grey;">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fas fa-chart-pie"></i> Your Holdings</h5>
<h3 class="card-title pt-2"><strong><h2 class="card-text"><img src="images/agi.png" class="rounded" style="width:15%">1.1 AGI</h2></strong></h3>
<h3 class="card-title pt-2"><strong>AGI VaLue</strong></h3>
<p>AGI</p>
<div class="row" >
<div class="col-sm-6" >AGI</div>
<div class="col-sm-6" >$ 0.13</div>
</div>
</div>
</div>
</div>
<!-- Card -->
</div>
<div class="col">.col</div>
<div class="col">
<!-- Card -->
<div class="card card-image" style="background-color:grey;">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fas fa-chart-pie"></i>Your Rewards</h5>
<h3 class="card-title pt-2"><strong>Earned AGI</strong></h3>
<div class="row">
<div class="col-sm-6">
<h3>Option 1</h3>
<p>SNET</p>
<button type="button" class="btn btn-primary" id="reinvest">REINVEST</button>
</div>
<div class="col-sm-6">
<h3>Option 2</h3>
<p>AGI</p>
<button type="button" class="btn btn-primary" id="withdraw">WITHDRAW</button>
</div>
</div>
</div>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<div class="card" style="background-color:black;opacity: 0.8;text-align:center;">
<div class="card-body">
<h5 class="card-title">Masternode</h5>
<p class="card-text" style="color:white;" id="masternode">http://snetsaving.com</p>
</div>
</div><!-- end of card -->
<br>
<div class="container" style="background-color:black;opacity:0.8;">
<h1 style="text-align:center; color:white;">Exchange</h1>
<div class="row">
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 1</a></h4>
<!-- Text -->
<p class="card-text">Exchange rate per SNET</p>
<!-- Button -->
<h2 class="card-text"><img src="images/logo.png" class="rounded" style="width:15%">1.1 AGI</h2>
<br>
<h3>0.00000 USD</h3>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 2</a></h4>
<!-- Text -->
<p class="card-text">Amount to exchange</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>SNET available</h4>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 3</a></h4>
<!-- Text -->
<p class="card-text">You receive</p>
<!-- Button -->
<input type="number" id="exampleForm2" class="form-control">
<br>
<h4>AGI approximatly</h4>
<br>
</div>
</div>
<!-- Card -->
</div>
<div class="col">
<!-- Card -->
<div class="card">
<!-- Card image -->
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title"><a>STEP 4</a></h4>
<!-- Text -->
<p class="card-text">Confirm your exchange</p>
<!-- Button -->
<br>
<br>
Exchange
<br>
<br>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
<br>
<!-- Footer -->
<footer class="page-footer font-small blue">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
SNETSAVING.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</body>
</html>
I'm using bootstrap for the layout
This is because you're missing the meta tag viewport within your document. I highly recommend you check out the Bootstrap Starter Template, if you haven't already. Adding the following just below <meta charset="utf-8"> should do the trick:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
For more information on the viewport tag you can, for example, check out the article on Using the viewport meta tag to control layout on mobile browsers from MDN web docs. Basically, it ensures that the actual device width will be used for any media queries that e.g. Bootstrap uses for laying out columns. Otherwise, a larger virtual width will be used to ensure compatibility with older sites.
I want to show texts in web-page using loop with html Modal Box.texts saved in database.I am using laravel framework.only show modal box for first item, maybe it can be JavaScript not loading problem.
I used https://www.w3schools.com/howto/howto_css_modals.asp Modal box tutorials.used that css and javascript code.
just used w3schools code.
<div class="row">
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6">
<div class="single-product">
<!--{{$ad->image}}-->
<div>
<img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
</div>
<div class="product-details">
<h3 col-xl-5>{{$ad->jobtype}}</h3>
<div class="price col-xl-11">
<h6 col-xl-12>{{$ad->jobC}}</h6>
<div>
<button id="myBtn">Details</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>{{$ad->details}}</p>
</div>
</div>
</div>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>
#endforeach
no errors showing but not working modal box for all sets, only showing first item in loop
Set Id for each modal and open them using the button on click
<div class="row">
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6" {{ $makeId = 1 }}>
<div class="single-product">
<!--{{$ad->image}}-->
<div>
<img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
</div>
<div class="product-details">
<h3 col-xl-5>{{$ad->jobtype}}</h3>
<div class="price col-xl-11">
<h6 col-xl-12>{{$ad->jobC}}</h6>
<div>
<button class="myBtn" modal-id="modal-{{ $ad->id }}">Details</button>
<!-- The Modal -->
<div class="modal" id="modal-{{ $ad->id }}">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>{{$ad->details}}</p>
</div>
</div>
</div>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>#endforeach
<script>
$('.myBtn').click(function(){
var GetModalId = $(this).attr('modal-id');
$("#"+GetModalId).css('display', 'block');
});
$('.close').click(function(){
$('.modal').css('display', 'none');
});
</script>
Remember you need to attach jquery to your page to this codes work
you can use this code to attach jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I'm using https://almsaeedstudio.com/preview theme which gives some brilliant boxes layout and social widget boxes layout which I want to use in my project.
Refer to simple box screenshot
and social widget box
.
I'm trying to arrange multiple simple boxes horizontally where each of the simple box can contain multiple social widget boxes.
Refer to this screenshot for more clarity:
.
I tried playing with the exiting simple boxes and social widget boxes code and come up with this snippet.
I have created this plunker, somehow css is not getting loaded properly.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div style="overflow:auto;">
<div class="" style="width:2050px;">
<div class="box" style="display:inline-block;width:1000px;">
<div class="box-header with-border">
<h3 class="box-title">Monthly Recap Report</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<div class="btn-group">
<button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="">
<div class="box box-widget collapsed-box">
<hr>
<div class="box-header with-border">
<div class="user-block">
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username">Jonathan Burke Jr.</span><span class="description">7:30 PM Today</span>
</div>
<!-- /.user-block-->
<div class="box-tools">
<button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools-->
</div>
<!-- /.box-header-->
<div class="box-body" style="display: block;">
<p>I took this photo this morning. What do you guys think?</p>
<button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
</div>
<!-- /.box-body-->
<div class="box-footer box-comments" style="display: block;">
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
<div class="box-comment">
<!-- User image-->
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
</div>
<!-- /.box-footer-->
<div class="box-footer" style="display: block;">
<form>
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="img-push">
<input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
</div>
</form>
</div>
<!-- /.box-footer-->
</div>
<div class="box box-widget collapsed-box">
<hr>
<div class="box-header with-border">
<div class="user-block">
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username">Jonathan Burke Jr.</span><span class="description">7:30 PM Today</span>
</div>
<!-- /.user-block-->
<div class="box-tools">
<button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools-->
</div>
<!-- /.box-header-->
<div class="box-body" style="display: block;">
<p>I took this photo this morning. What do you guys think?</p>
<button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
</div>
<!-- /.box-body-->
<div class="box-footer box-comments" style="display: block;">
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
<div class="box-comment">
<!-- User image-->
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
</div>
<!-- /.box-footer-->
<div class="box-footer" style="display: block;">
<form>
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="img-push">
<input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
</div>
</form>
</div>
<!-- /.box-footer-->
</div>
</div>
<!-- /.row -->
</div>
<!-- ./box-body -->
<div class="box-footer" style="display: block;">
<!-- /.row -->
</div>
<!-- /.box-footer -->
</div>
<!-- /.box -->
<div class="box" style="display:inline-block;width:1000px;">
<div class="box-header with-border">
<h3 class="box-title">Monthly Recap Report</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<div class="btn-group">
<button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="">
<div class="box box-widget collapsed-box">
<hr>
<div class="box-header with-border">
<div class="user-block">
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username">Jonathan Burke Jr.</span><span class="description">7:30 PM Today</span>
</div>
<!-- /.user-block-->
<div class="box-tools">
<button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools-->
</div>
<!-- /.box-header-->
<div class="box-body" style="display: block;">
<p>I took this photo this morning. What do you guys think?</p>
<button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
</div>
<!-- /.box-body-->
<div class="box-footer box-comments" style="display: block;">
<div class="box-comment">
<!-- User image-->
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/user4-128x128.jpg" alt="user image" class="img-circle img-sm">
<div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
</div>
<!-- /.box-footer-->
<div class="box-footer" style="display: block;">
<form>
<img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
<div class="img-push">
<input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
</div>
</form>
</div>
<!-- /.box-footer-->
</div>
<div class="box box-widget collapsed-box">
<hr>
<div class="box-header with-border">
<div class="user-block">
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username">Jonathan Burke Jr.</span><span class="description">7:30 PM Today</span>
</div>
<!-- /.user-block-->
<div class="box-tools">
<button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
</button>
</div>
<!-- /.box-tools-->
</div>
<!-- /.box-header-->
<div class="box-body" style="display: block;">
<p>I took this photo this morning. What do you guys think?</p>
<button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
</div>
<!-- /.box-body-->
<div class="box-footer box-comments" style="display: block;">
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
<div class="box-comment">
<!-- User image-->
<img src="../dist/img/user4-128x128.jpg" alt="user image" class="img-circle img-sm">
<div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
<!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
<!-- /.comment-text-->
</div>
<!-- /.box-comment-->
</div>
<!-- /.box-footer-->
<div class="box-footer" style="display: block;">
<form>
<img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
<div class="img-push">
<input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
</div>
</form>
</div>
<!-- /.box-footer-->
</div>
</div>
<!-- /.row -->
</div>
<!-- ./box-body -->
<div class="box-footer" style="display: block;">
<!-- /.row -->
</div>
<!-- /.box-footer -->
</div>
</div>
<!-- /.col -->
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/slpJLIRVGfMSC8JWG1bT?p=preview
But its not working. Can anyone please help me how to accomplish this ?
P.S.: I have searched on internet and found similar threads but none is working for me.
Horizontally align div without float
I'm still a beginner in CSS and would really appreciate if I can get some help here. I'm breaking my head on this for a long time.
Update
I think it makes sense to clearly write out the actual issues and try to solve them one by one.
Horizontal boxes are not aligned on the same row if the inner social widget box is collapsed/expanded. How can I ensure the height of the horizontal box is fixed irrespective of the inner social widget box height ? Refer to screenshot for same.
There are some answers which mention the use of display: float:left; but my issue is the variable width which actually ensures all horizontal boxes on the same row.
<div class="" style="width:2050px;">
How do I ensure the width:2050px; to increase dynamically as I will be adding inner boxes on fly. P.S.: I'm using angularjs for ui. Is there any CSS trick which is independent of the width:2050px; That way there will be no dependency on the total width calculation.
How to fix the height of inner social widget box ? The inner social widget box overflows the actual horizontol container. how can I fix this ?
Sharing an image of what actually I'm trying to accomplish. .
In short I want to accomplish point 4 with this theme's existing boxes and social widget boxes. If there is any other better way of doing this, please share the same.
In case anything is not clear, please feel free to mention it in comment. I'll update the question accordingly.
Thanks
Update 2:
I think same height columns is what making this problem more complicated. What I can do is having a scroll bar inside horizontol box which can have multiple social widgets boxes. That way we can have a fixed height for each of the horizontol column.
Update 3:
While zer00ne# has provided one solution which is based on Flex. I have read on some forums that it doesn;t work on all browsers. Since my web-page is going to be mobile friendly, I;m more inclined towards achieving my desired results using general CSS techniques.
In path of achieving my result, I created following version http://plnkr.co/edit/awVmJWJo0AdrQvdbXG2y?p=preview using this SO thread. Following is screenshot of same:
Now I'm facing one issue of text getting out of inner social widget box. I need some help on this thing.
In addition to that, can people take a review of these if this solution is any better or not ?
Thanks
>>>>>>>>>>>>>>>>>>>>FLEXBOX SOLUTION<<<<<<<<<<<<<<<<<<<<
Here is the REAL SOLUTION to the ORIGINAL QUESTION if anyone is actually interested.
dark_shadow:
While zer00ne# has provided one solution which is based on Flex.
Problem resolved see my demos below, it speaks for itself. I have no idea why starikovs is getting upvotes at all when there is clearly no solution provided.
I had to recreate the page because the extra classless <div>s you placed inside the markup was confusing. The significant change was adding flexbox to the layout. I used two flexbox containers, one that controlled the two columns .flexRow and another inside of each column to control the widgetboxes, .flexCol. Those classless <div>s are combined into a <section class="colWrap" I added intrinsic measurements so that your layout isn't stuck at a fixed width of 2050px, you'll still need to adjust both .box to an intrinsic measurement, 1000px fixed is going to give grief in the future. The changes will be annotated when I get back. Unless of course this isn't what you wanted?
LAST to the LAST UPDATE
>>>>>>>>>>PLUNKER<<<<<<<<<<
EDIT
Just add a fixed height to .colWrap, suggest 100vh to 150vh
I checked out the height of both columns and they are in fact identical down to the decimal. See the screenshots:
Column 1
Column 2
OLD
You just need everything aligned, correct? Ok, look here please: http://embed.plnkr.co/MRI69qLoTkiL9F68g54M/preview
I added this to the <head>
<!DOCTYPE html>
<html>
<head>
<base href="https://almsaeedstudio.com/themes/AdminLTE/">
<link href="https://almsaeedstudio.com/themes/AdminLTE/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
UPDATE
Added the script as well. It's located before the closing </body> tag.
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="plugins/chartjs/Chart.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard2.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
You probably don't need all of them, but the essential ones are:
bootstrap.min.css
font-awesome.min.css
jQuery-2.1.4.min.js
bootstrap.min.js
app.min.js
jquery.slimscroll.min.js
There's a lot of relative URLs (ex. ../dist/img/photo2.png), so I added the following to the top of the <head>:
<base href="https://almsaeedstudio.com/themes/AdminLTE/">
The majority of these external files are located at that base url. If the download package didn't properly provide adequate assets, I always go to the source of the site's demo. Frequently the developer(s) neglect the differences between the dist and the demo.
UPDATE
As I understand the problem is that the layout needs to be properly aligned with widgetboxes or in the absence of widgetboxes. I don't think using display:none on widgetboxes is the way this template was designed. Consider the following annotated excerpts from the file, app.min.js
Excerpts from the AdminLTE script, app.min.js
Notes at the bottom.
/*! AdminLTE app.js
* ================
* Main JS application file for AdminLTE v2. This file
* should be included in all pages. It controls some layout
* options and implements exclusive AdminLTE plugins.ᵃ
*
/*...*/†
$.AdminLTE.boxWidget = {
selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
animationSpeed: $.AdminLTE.options.animationSpeed,
activate: function (a) {
var b = this;
a || (a = document), $(a).on("click", b.selectors.collapse,
function (a) {
a.preventDefault(), b.collapse($(this))
}), $(a).on("click", b.selectors.remove, function (a) {
a.preventDefault(), b.remove($(this))
})
},
ᵇcollapse: function (a) {
var b = this,
c = a.parents(".box").first(),
d = c.find(
"> .box-body, > .box-footer, > form >.box-body, > form > .box-footer"
);
c.hasClass("collapsed-box") ? (a.children(":first").removeClass(
b.icons.open).addClass(b.icons.collapse), d.slideDown(
b.animationSpeed,
function () {
c.removeClass("collapsed-box")
})) : (a.children(":first").removeClass(b.icons.collapse)
.addClass(b.icons.open), d.slideUp(b.animationSpeed,
function () {
c.addClass("collapsed-box")
}))
},
ᶜ remove: function (a) {
var b = a.parents(".box").first();
b.slideUp(this.animationSpeed)
}
}
}
if("undefined" == typeof jQuery) throw new Error(
"AdminLTE requires jQuery");
/*...*/†
ᵈ function (a) {
"use strict";
a.fn.boxRefresh = function (b) {
function c(a) {
a.append(f), e.onLoadStart.call(a)
}
function d(a) {
a.find(f).remove(), e.onLoadDone.call(a)
}
var e = a.extend({
trigger: ".refresh-btn",
source: "",
onLoadStart: function (a) {
return a
},
onLoadDone: function (a) {
return a
}
}, b),
f = a(
'<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
);
return this.each(function () {
if("" === e.source) return void(window.console &&
window.console.log(
"Please specify a source first - boxRefresh()")
);
var b = a(this),
f = b.find(e.trigger).first();
f.on("click", function (a) {
a.preventDefault(), c(b), b.find(".box-body").load(
e.source,
function () {
d(b)
})
})
})
}
}(jQuery),
function (a) {
"use strict";
a.fn.activateBox = function () {
a.AdminLTE.boxWidget.activate(this)
}
}(jQuery) function (a) {
"use strict";
a.fn.boxRefresh = function (b) {
function c(a) {
a.append(f), e.onLoadStart.call(a)
}
function d(a) {
a.find(f).remove(), e.onLoadDone.call(a)
}
var e = a.extend({
trigger: ".refresh-btn",
source: "",
onLoadStart: function (a) {
return a
},
onLoadDone: function (a) {
return a
}
}, b),
f = a(
'<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
);
return this.each(function () {
if("" === e.source) return void(window.console &&
window.console.log(
"Please specify a source first - boxRefresh()")
);
var b = a(this),
f = b.find(e.trigger).first();
f.on("click", function (a) {
a.preventDefault(), c(b), b.find(".box-body").load(
e.source,
function () {
d(b)
})
})
})
}
}(jQuery),
function (a) {
"use strict";
a.fn.activateBox = function () {
a.AdminLTE.boxWidget.activate(this)
}
}(jQuery)
† This code is skipped over
ᵃ The developer implies that this app is not a complete solution but a complete solution is available to buy.
ᵇ The boxwidgets collapse and height should adjust accordingly.
ᶜ The boxwidgets can be removed and height should be adjusted accordingly.
ᵈ The function boxRefresh() is a public method I believe. It could be used after an addition or subtraction of a widget I suppose.
I'm not the best at interpreting third party plugins, so any extra observations and/or corrections are welcome.
LAST UPDATE
I got it so when any section is collapsed, they will slide up rather than down. As for the 2 main columns, they behave as they should and if the first column is actually removed, then the second column will take the first column's place.
The new way of aligning is to use flexbox. Here's a simple example to show the power:
HTML:
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
CSS:
.wrapper {
display: flex;
}
Now your divs inside .wrapper are aligned in a row.
BTW, you can use Autoprefixer to get the right browser prefixes.
Flexbox is supported by all the major browsers: http://caniuse.com/#search=flexbox (with prefixes)
With flexbox you can align items as you want simply, aligning them vertically in the center, horizontally in the center, etc.
You can use display: flex, read more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
P.S. But you need use prefixes for old browsers
You could use float to position the boxes horizontally. I forked your Plunker and changed the .box from display: inline-block; to float: left;: http://plnkr.co/edit/Woo31pPiHi4HcvXZ9NXE?p=preview
After reading your question and looking over the comments I see the theme you are using has (or you have added) twitter bootstrap. I am not sure why you wouldn't use its grid system based on the layout you are trying to achieve. Looking at the theme link you provided I see this layout which contains 4 horizontally aligned widgets which should be more than enough for what you are trying to achieve.
<section class="content">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<!-- Column 1, example widget code below -->
<div class="info-box">
<span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Messages</span>
<span class="info-box-number">1,410</span>
</div>
</div>
<!-- Next widget underneath would go here -->
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<!-- Column 2, add widgets in here -->
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<!-- Column 3, add widgets in here -->
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<!-- Column 4, add widgets in here -->
</div>
</div>
</section>
If I am misunderstanding the question please let me know. Hope that helps.
EDIT #2 - Added some CSS and Fiddle link
Based on your feedback here is how I would handle the multiple columns
CSS
.cust-table {
display: table;
padding: 0;
width: 100%;
}
.cust-tr {
display: table-row;
}
.cust-td {
border-collapse: collapse;
display: table-cell;
vertical-align: top;
background: pink;
border: 1px solid gray;
min-width: 100px;
}
HTML
<div class="cust-table">
<div class="cust-tr">
<div class="cust-td">
<!-- Column 1, example widget code below -->
<div class="info-box">
<span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Messages</span>
<span class="info-box-number">1,410</span>
</div>
</div>
<!-- Next widget underneath would go here -->
</div>
<div class="cust-td">
<p>Its all bang bang bloddy bang to me!</p>
</div>
<div class="cust-td">
<p>This is another column with text just for fun</p>
</div>
<div class="cust-td">
<p>This is another column with more excitement then the last column. Dont believe me?</p>
</div>
</div>
</div>
This way if you end up with 20 columns they would all show horizontally. Depending on how wide you want them to show you could use min-width so they wouldn't end up too squished. Here is a JS.Fiddle link if you want to play around with the layout.
I have about 14 related products for each parent product and want the Owl-Carousel slider to function so visitors can scroll thru seeing 4 at a time.
The related products I have set up are rendering nicely except they are listed down the page vertical and not inside the carousel slider.
There is another owl-carousel Slider on this same site on the home page (index.html) which works fine.
The Difference?
This one gets each product detail form Business Catalyst module rendered as:
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
the id is different for each product of course.
Here is link if you want to View page source - starts on LINE 289
Link to product parent detail page
To see the module result - Here is some code from ONE product inside the owl-carousel
What can I add to this to make each block of product detail render horizontal?
<section class="section wow fadeInUp">
<h3 class="section-title">Accessories and Related Products</h3>
<div class="owl-carousel home-owl-carousel custom-carousel owl-theme outer-top-xs">
<div class="item item-carousel">
<div class="products">
<div class="product">
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
<!-- product detail -->
<div class="product-image">
<div class="image"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only"><img id="catsproduct_9568921" src="/assets/images/products-sm/FF400-2.jpg?bc_t=jVmrpgtTMrRukibgVCEGpA" alt="Fibre-Metal Headgear-Headgear" border="0" /></a> </div>
<!-- /.image -->
</div>
<!-- /.product-image -->
<div class="product-info text-left">
<h4 class="name"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">Fibre-Metal Headgear-Headgear</a> </h4>
<div class="description"></div>
<div class="product-price"> <strong>$19.50</strong> discountcryo price</div>
<!-- /.product-price -->
</div>
<!-- /.product-info -->
<div class="cart clearfix animate-effect">
<div class="action">
<h4>
<div class="action"><a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">SEE DETAIL</a></div>
</h4>
</div>
<!-- /.action -->
</div>
<!-- /.cart clearfix -->
<div class="padd-bottom-20"></div>
<!--/ END product detail -->
</li></ul> </div>
<!-- /.product -->
</div>
<!-- /.products -->
</div>
<!-- /.item item carousel -->
</div>
<!-- /.home-owl-carousel -->
</section>
<!-- /.section -->
Hope this is better to understand?
Thank You
Willz
Problem solved
The trouble was with the Business Catalyst Module productfeaturelist
- here is the module as edited to function correctly in owl-carousel:
{module_productfeaturelist tag="{tag_name}" render="collection" rowCount="99" sortType="Weight" template="/Layouts/OnlineShop/prodFeature.tpl"}
{% comment %} /* OLD */ {module_productfeaturelist,{tag_name},99,weight,_self,true } {% endcomment %}
Try Using:
display: inline-block;
Also have a look Here for tips on creating a grid.
Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?
What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.
I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.
Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?
I currently have an index.html, a header.html and an offcanvas.html, as follows:
header.html:
<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
<div class="desktop">
<ul class="title-area">
<li class="name">
<h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
<a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
</li>
</ul>
<div class="account">
<div class="text-edit">
<div data-ng-show="global.authenticated" mean-token-editable></div>
</div>
<ul class="right" data-ng-hide="global.authenticated">
<li><a ui-sref='auth.register'>Register</a></li>
<li><a ui-sref='auth.login'>Login</a></li>
</ul>
<ul class="right" data-ng-show="global.authenticated">
<li class="has-dropdown">
{{global.user.name}}
<ul class="dropdown">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
</div>
offcanvas.html
<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">SOL ::</h1>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
<li>Left Sidebar</li>
<li>Left Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
And finally, index.html
<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
<div class="row"> <!-- Site tag row -->
<div class="small-12 columns">
<h1 mean-token="'home-default'">SOL :: Search</h1>
</div>
</div> <!-- End site tag row -->
</section> <!-- End site tag section -->
<section> <!-- Logo section -->
<div class="row"> <!-- Logo row -->
<div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
<a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
</div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->
<section> <!-- Search input section -->
<div class="row"> <!-- Search row -->
<div class="small-8 columns small-offset-2"> <!-- Search column -->
<form>
<div class="row collapse"> <!-- Input group -->
<div class="large-9 columns">
<input type="text" placeholder="" class="form-control main-search-input">
</div>
<div class="small-3 columns">
Search
</div>
</div>
</form>
</div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->
The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).
It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?