I am trying to show the screen like in the image
list inside a container
the problem is the whatever I do, the list is on the bottom of the container like here
the HTML:
<div class="container" ng-init="getCartItems()">
<div class="hidden-xs">
<div class="">
<div class="title">סיכום הזמנה</div>
</div>
</div>
<div class="row">
<div ng-include="'templates/cart.html'"></div>
<div class="subTotalTabs">
<div class="col-md-3 col-xs-12">
<ul class="list-unstyled text-center">
<li>הוספת מבצע</li>
<li><a ng-click="addToCart()" class="clickable btn btn-lg borderBox padTop5 padBtm5 f22">הוספת פיצה</a></li>
<li>הוספת שתייה</li>
<li>מוצרים נלווים</li>
<li><a ng-click="clearCart()" class="my-btn-sqr my-btn-sqr-danger padTop5 padBtm5 f22">רוקן עגלה</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /row -->
</div>
How can I fix this? Thanks!
`
Related
I am creating a project Where I have a homepage with a sidebar. On click of the sidebar, the component is supposed to be loaded on the right hand side of the page. I have done the routing for the same too. Can anyone help me?
<div class="container">
<div class="row">
<app-mentor-sidebar></app-mentor-sidebar>
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li><a href="#" >
<em class="fa fa-home"></em>
</a></li>
<li class="active"><a [routerLink]="">Dashboard</a></li>
<li class="active"><a [routerLink]=""> {{breadcum}}
</a></li>
</ol>
</div>
<br>
<div class="row">
<div class="btn-group">
<button class="btn btn-primary" (click)=goback(); >Back</button>
</div>
<router-outlet> </router-outlet>
</div>
</div>
</div>
The is supposed to load the html component but nothing is happening.
I'm using a template that uses and I used it to implement a multi-language select. Problem is: when i switch to mobile view the top-header disappears and only the navbar stays. Does anyone have an idea how i can keep the top-header? Template uses Bootstrap 3
<body>
<div class="box-layout">
<header class="header-style-1">
<div class="bg-header-top">
<div class="container">
<div class="row">
<div class="header-top">
<div class="row">
<div class="col-md-3">
<img src="../assets/images/index/logo.png" alt="logo" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="header-top-right pull-right">
<ul class="header-contact">
<li>
<i class="flaticon-vibrating-phone"></i>
<div class="h-adress-content">
<h6>Telefon</h6>
<p>XXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<i class="flaticon-placeholder"></i>
<div class="h-adress-content">
<h6>Adresse</h6>
<p>XXXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<div class="h-adress-content">
<p><img src="../assets/images/index/de.png"> DE</p>
<p><img src="../assets/images/index/pl.png"> PL</p>
</div>
<!-- .h-adress-content -->
</li> `
I am trying to put these two elements side by side. I tried using the float: right or float left, but so far no luck. Here is my html code.
#idd11 {
float: left;
width 100px;
height 100px;
}
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div>
<!--Answer A-->
</div>
</div>
If anybody can help me with it, it would be greatly appreciated. I tried at least :p. I attached a screenshot too: I want to put the A element in the right side of the Items list.
Use display: flex; for the id="MainMenu" . you can then adjust the width and height for its child elements too..
Try learning more about css3 flexbox property
You need three divs to do this. One div to hold the other two child divs. Then float the two child divs next to each other. So put the things you want floated next to each other inside a div and try to float them.
HTML
<div id='parent'>
<div id='child1'>
...
</div> <!-- End child1 div -->
<div id='child2'>
...
</div> <!-- End child2 div -->
</div> <!-- End parent div -->
CSS
#parent{
width: 500px;
}
#child1{
float: left;
width: 40%;
}
#child2{
float: right;
width: 40%;
}
In your code, you have the div you are trying to float to the right within the div you are trying to float to the left. You need to make sure your divs are separated and put into a parent div. Take a look at my example and notice how my divs are separate from each other, but inside a parent div
<div id='parent'> <!-- Look here -->
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
</div>
</div> <!-- End the floating left section -->
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div> <!-- End the floating right Section -->
<!--Answer A-->
</div> <!-- End parent div -->
Dropdown1 and Dropdown2 must float to right. Paging must be to the right.
Paging content may reduce and dropdown1 and 2 must adjust accordingly. I tried different ways but unable to get the solution. In mobile device all the three divs must be centered.
We are using bootstrap. Divs are as follows
<div class="row">
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<!-- Title -->
</div>
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 alpha omega">
<div style="float:right">
<ul class="nav">
<li class="dropdown">
Drop Down 2<b class="caret"></b>
<ul class="dropdown-menu " style="text-transform:uppercase;">
<li data-filterkind="$p" data-filtervalue="DESC">
<a href="./" >1</a>
</li>
<li data-filterkind="$p" data-filtervalue="ASC">
<a href="./" >2</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="pull-right">
<!-- Drop down 2 -->
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<div style="float:right" >
<!-- Pagination -->
</div>
</div>
</div>
Please suggest
So like this?
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 text-center heading1">
<p> Heading </p><!-- Heading -->
</div>
<div class="col-sm-6">
<div class="row">
<div class="float text-center">
<div class="col-sm-4">
<p> DD1</P><!-- Drop down 1 -->
</div>
<div class="col-sm-4">
<p> DD2</P><!-- Drop down 2 -->
</div>
<div class="col-sm-4">
<p> PAGINATION</P><!-- pagination -->
</div>
</div>
</div>
</div>
</div>
</div>
Then add the following additional stuff to your custom CSS:
#media (min-width: 768px)
{
.float
{
float: right;
}
.heading1
{
text-align: left;
}
}
FYI - The above is bootstrap, but the additional classes are needed to get the custom result you want.
I use this to load a page and replace the current page:
$.get('genres.html').done(function (data) {
$('#pagecontent').html(data);
})
When i do this everything in de body gets replaced with the new content.
I need to replace the full body except this footer.
I did see something about div:not but i think thats not working with ajax.
How can i replace everything except the footer:
<footer class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide"><a class="jp-video-play-icon">play</a></div>
<div class="jp-interface">
<div class="jp-controls">
<div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a>
</div>
<div><a class="jp-play"><i class="icon-control-play i-2x"></i></a>
<a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
</div>
<div><a class="jp-next"><i
class="icon-control-forward i-lg"></i></a></div>
<div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a>
</div>
<div><a class="" data-toggle="dropdown" data-target="#playlist"><i
class="icon-list"></i></a></div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info"></div>
<div class="jp-title text-lt">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm"><a class="jp-mute" title="mute"><i
class="icon-volume-2"></i></a> <a class="jp-unmute hid"
title="unmute"><i
class="icon-volume-off"></i></a></div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter"></div>
</div>
</div>
<div><a class="jp-shuffle" title="shuffle"><i
class="icon-shuffle text-muted"></i></a> <a
class="jp-shuffle-off hid" title="shuffle off"><i
class="icon-shuffle text-lt"></i></a></div>
<div><a class="jp-repeat" title="repeat"><i
class="icon-loop text-muted"></i></a> <a
class="jp-repeat-off hid" title="repeat off"><i
class="icon-loop text-lt"></i></a></div>
<div class="hide"><a class="jp-full-screen" title="full screen"><i
class="fa fa-expand"></i></a> <a class="jp-restore-screen"
title="restore screen"><i
class="fa fa-compress text-lt"></i></a></div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker">
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item"></li>
</ul>
</div>
<div class="jp-no-solution hide"><span>Update Required</span> To play the media
you will need to either update your browser to a recent version or update
your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash
plugin</a>.
</div>
</div>
</div>
</footer>
Just put everything outside the footer in a container, then replace the contents of that. Something like:
<div id="content">
...your content here
</div>
<footer>
</footer>
Then do:
$.get('genres.html').done(function (data) {
$('#content').html(data);
})