I'm using Materialize grid but for some reason I'm getting a gap when my grid is on large screens.
I was using Bootstrap and Materialize and realised it was a bad idea to use both, so I removed Bootstrap grid and redid it in Materialize grid.
However I'm not sure if it's to do with changing over to Materialize grid as I had the same problem on Bootstrap grid. I may have messed with script tags and link tags in my header and footer so that may have messed something up.
Please see the screenshot below and my code for HTML, CSS, header, footer.
#store {
padding: 2%;
background-color: #c8def7;
}
.item-name {
margin-top: 4%;
font-size: 1.4rem;
text-align: left;
}
.item-add {
margin: auto;
padding: 10px;
margin-top: 10px;
display: block;
width: 100%;
background-color: #a8323a;
font-family: 'Open Sans', sans-serif;
}
.item {
margin-top: 4%;
font-family: 'Baloo Tammudu 2', cursive;
padding: 15px;
border-radius: 15px;
}
.price {
color: red;
text-align: center;
float: right;
font-size: 1.4rem;
}
.item-details {
margin-top: 4%;
text-align: center;
}
.item-pic {
width: 100%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/styles.css">
<!-- Materialize -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/v4-shims.js"></script>
<!-- Materialize -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<div class="selling-items">
<div class="row">
<div class="col m4 l3">
<div class="item item-1">
<img class="item-pic item-pic-1" src="images/item-1.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-2">
<img class="item-pic item-pic-2" src="images/item-2.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-3">
<img class="item-pic item-pic-3" src="images/item-3.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-4">
<img class="item-pic item-pic-4" src="images/item-4.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-5">
<img class="item-pic item-pic-5" src="images/item-5.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-6">
<img class="item-pic item-pic-6" src="images/item-6.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-7">
<img class="item-pic item-pic-7" src="images/item-7.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-8">
<img class="item-pic item-pic-8" src="images/item-8.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
</div>
</div>
</body>
This case needs to standardize the height of the image elements
solution:
edit height of images on photos editor like as photoshop, paint
===================== OR ======================
css:
.item-pic {height: 20vw}
===================== OR ======================
js:
let _height = 0;
$('.item-pic').each(function () {
if ($(this).height() > _height) {
_height = $(this).height();
}
});
$('.item-pic').height(_height);
example: https://codepen.io/Em-An/pen/ExKLZNG
I don't find any fault in the html codes nor the style and even the document i made from this same codes shows proper results that you might be expecting. Try adding browser support and updating your browser.
Or try putting the BR tag after desired products.
Related
Below is the HTML and the CSS (used Bootstrap 5) for my home page layout. I have trouble filling the remaining space with the carousel and making the "Welcome" text along with the paragraph sit on top of the carousel.
If I give the carousel "vh-100" it will fill the rest of the space. But it would then push the footer out of the screen putting a vertical scroll bar. My aim is to show everything in the same view without adding a vertical scroll bar.
Hope somebody can help me what I'm trying to achieve.
#font-face {
font-family: "seaford";
src: url(../fonts/SeafordRg.ttf);
}
html {
position: relative;
min-height: 100%;
font-size: 14px;
font-family: seaford, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
body {
margin-bottom: 60px;
font-family: seaford, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
/*css - for custom elements*/
.bg-join-newsletter {
background-color: #cbcbcb !important;
}
.carousel-item {
width: 100vw;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
opacity: 0.4 !important;
}
.item-1 {
background: url(../images/img1.jpg) no-repeat center center fixed;
}
.item-2 {
background: url(../images/img2.jpg) no-repeat center center fixed;
}
.item-3 {
background: url(../images/img3.jpg) no-repeat center center fixed;
}
/* media rules */
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - GCT.Web</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-dark border-bottom box-shadow">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">GCT.Web</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid carousel slide carousel-fade p-0 m-0 d-flex align-items-stretch" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner m-0 p-0">
<div class="carousel-item active item-1 h-100">
<div class="carousel-caption">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item item-2 h-100">
<div class="carousel-caption">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item item-3 h-100">
<div class="carousel-caption">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<main role="main" class="pb-3">
#RenderBody()
</main>
<footer class="border-top footer text-muted bg-dark">
<div class="container-fluid bg-join-newsletter">
<div class="container d-flex justify-content-center">
<form class="row align-items-center w-75">
<div class="col-auto text-black">
<label>Join our news letter</label>
</div>
<div class="col-4">
<label class="visually-hidden" for="subscribeEmail">Username</label>
<div class="input-group">
<input id="subscribeEmail" type="email" class="form-control" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="basic-addon2">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="subscribeName">Name</label>
<input type="text" class="form-control" id="subscribeName" placeholder="Enter your name">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="container">
© 2022 - GCT.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
I'm working with the .card below and having the dickens of a time getting the text "You liked this." in-line with the Like and Comment .btn-links beneath the hr element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted" style="">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
I've tried everything I can think of. Changing the display property. Using margins or padding. Adjusting the font-height. None of it has worked. I'm not sure how to get it to align and any help would be appreciated.
I probably could get it to work with using floats or even flexbox, but that seems over kill and I'd prefer not to if possible. Thanks.
You missed the vertical alignment, use the bootstrap class align-middle on your span.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted align-middle">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
You can use this code
body {
margin: 0;
padding: 0;
}
.btn-link {
font-weight: 400;
color: #007bff;
text-decoration: none;
margin-top: -4px;
}
<div class="card mx-auto mt-5" style="width:500px">
<div class="card-body">
<hr>
<div>
<button class="btn btn-link">Like</button>
<span class="text-muted" style="">You liked this.</span>
<button class="btn btn-link float-right">3 Comments</button>
</div>
</div>
</div>
I have tried to give the full length of div . But button could not get the full length . Please help me to fix out the errors.
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Try to update css:
.card {
padding-right: 0px;
padding-left: 0px;
}
.block {
display: block;
width: 100%;
}
And the button has already taken full width of parent div, if you want to make div wider, try to adjust bootstrap column size, for example col-md-3 to col-md-6:
<div class="col-md-6 col-sm-6 text-center card">
Because in bootstrap, the column have padding-right: 15px; and padding-left: 15px; by default. So if you want your button to get the full width of the column, you can overwrite these css or add the css below to your button:
Demo:
.block {
margin-right: -15px;
margin-left: -15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="block" data-toggle="modal" data-target="#myModal">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Use display: inline-block in both "span" and next "div" tag.
Remove padding to the column div:
.card{ padding:0px}
Here is the snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.card{ padding:0px}
</style>
</head>
<body>
<script src="script.js"></script>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<span class="icon">
<!-- <img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px"> -->
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
</body>
</html>
All Bootstrap columns (.col-*) have padding-x (padding-right: 15px; and padding-left: 15px;) by default.
If the button is the only child element of that column, and you don't want to override the class's styles, you can use the px-0 or p-0 class on the column to override the padding of only that column:
<div class="col-md-3 col-sm-6 text-center card px-0">
...
</div>
<div class="col-md-3 col-sm-6 text-center card">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100%">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
Use width:100% as style or add it in any class and then apply that class to the button
Just use padding zero .
<div class="col-md-3 col-sm-6 text-center card px-0" style="padding: 0px ">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#classRoutine" style="width:100%">
<span class="icon">
<img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}"
alt="Classroutine" style="width:50%;
height: 93.3px; padding-top: 15px; padding-bottom: 25px">
</span>
<div style=" padding-bottom: 10px; padding-top: 20px">
<h3>Class <br> Routine</h3>
</div>
</button>
</div>
I am using bootstrap and am trying to fix a div to the top of the body-container div.
Using this css, I am able to accomplish fixing the div to the top of the container, but it spills outside the right of the body-container div:
.top-bar {
position: fixed;
z-index: 1030;
top: 60px;
width: 100%;
}
.top-bar .item-count h4{
text-align: center;
}
Here is the all my html/css: https://jsfiddle.net/rttvqa3k/
Check this if its helpful.. :)
OLD:
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
NEW:
<div class="navbar-fixed-top container" style="top:60px;">
<div class="panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
</div>
This answer explains the issue with position: fixed relative to a container. The answer does offer ways to accomplish this but it deals with known widths.
The problem with using "fixed" positioning is that it takes the
element out of flow. thus it can't be re-positioned relative to its
parent because it's as if it didn't have one.
You can set the width or the max-width (.top-bar width 750px) of the fixed element, but then you will have to deal with the media queries for different screen sizes.
I'll just post this so that you get things clear since it would be too long for a comment in the answer marked as correct.
There are several values you can use in the CSS property position.
Static, which is the default, relative, absolute and fixed.
Read more about that here.
If you use position: fixed; without defining top and left values, your element will default these values to where its parent element is rendered.
Here's an example for clarity:
If your body content has padding-left: 15px; your element with position: fixed; will have a default value of left: 15px;. The same goes for top, if your parent element is positioned (X)px top from the viewport, lets say X equals to 60 your position: fixed; element will default to top: 60px;
You can see this behavior here: (Notice that I did not reference bootstrap.js so you can see it has nothing to do with your problem.)
.top-bar {
position: fixed;
z-index: 1030;
width: 100%;
}
body {
padding-top: 135px;
}
footer {
text-align: center;
}
.top-bar {
position: fixed;
z-index: 1030;
width: 100%;
}
.top-bar .matter-count h4 {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="/">Home</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br/>
<br />
<br />
<br />
<br />
<br />
<br />
<br/>some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br/>event more content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br />event more content
</div>
</div>
<hr />
<footer>
<p>© Some Application</p>
</footer>
</div>
</body>
So the correct approach is to set this properties so they don't default.
This way:
.top-bar {
position: fixed;
top: 60px;
left: 0;
z-index: 1030;
width: 100%;
}
body {
padding-top: 135px;
}
footer {
text-align: center;
}
.top-bar {
position: fixed;
top: 60px;
left: 0;
z-index: 1030;
width: 100%;
}
.top-bar .matter-count h4{
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="/">Home</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br/>
<br />
<br />
<br />
<br />
<br />
<br />
<br/>
some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br/>
event more content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
event more content
</div>
</div>
<hr />
<footer>
<p>© Some Application</p>
</footer>
</div>
</body>
Add overflow-x to your class description. This will add a scroll bar when needed
overflow-x:auto;
This is my css and HTML template file.
#wrapper {
display: inline!important;
height: 275px;
max-width: 540px;
}
.box {
margin: 5px;
display: inline-block;
width: 170px;
height: 275px!important;
background-color: #F5FBEF;
text-align: center;
float: left;
}
.ng-repeat {
display: inline-block;
}
HTML File
<br>
<div>
<div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']" >
<div ng-show="product.group_by_CHANGED"><h2>{{product.BrandName}} </h2></div>
<div id=wrapper>
<div class='box'>
<ng-include src="'commonTemplate.html'"></ng-include>
</div>
</div>
</div>
<!-- template (common piece of code) -->
<script type="text/ng-template" id="commonTemplate.html">
<div class="BrandName"> <b>{{product.BrandName}}</b> </div>
<div class="ProductName"> {{product.ProductName}} </div>
<br>
<div> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img> </div>
<div class="ProductVariants">
<select class="form-control btn btn-default btn-xs text-center" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"></select>
</div>
<div class="Price">
<strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}}
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart==0">
<a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div class="AddToCart" ng-if="SelectedVariant.InCart>0">
<a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-sm btn-info disabled">{{SelectedVariant.InCart}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
</script>
</div>
This is how my page looks like-
What i want when new brand comes say annapurna or panchratan, display that in new line. and then in next line display all the products of that brand.
(similar to aashirvad first brand.)
How to do that?
You have to wrap whole template with outer div that is full width:
<script type="text/ng-template" id="commonTemplate.html">
<div class="brand-wrapper">
<div class="BrandName"> <b>{{product.BrandName}}</b> </div>
...
</div>
</script>
// May be omitted as div already block element.
.brand-wrapper {
clear: both; // if floated
width: 100%;
display: block;
}
Change wrapper:inline to inline-block and it should work. Also put your h2 inside the wrapper.
Also, change the float on the box to float:right;