This is my product template file.
<br>
<div>
<div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']" >
<h2 ng-show="product.group_by_CHANGED">{{product.BrandName}} </h2>
<div class='box'>
<ng-include src="'commonTemplate.html'"></ng-include>
</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>
Box class is defined like this in CSS:
.box {
margin : 5px;
display : inline-block;
width: 170px;
height: 275px;
background-color: #F5FBEF;
text-align:center;
vertical-align: top;
}
When display my product list look like this:
I want to show products side by side.
Can some one help me how to do that?
EDIT:
After changes suggested by Rachel Gallen, it turn out like this:
I want to display brand name in new line when new brand encounters. rest all looks good.
I put in .ng-repeat:display:inline plus a wrapper
#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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<div ng-if="SearchText.length<3" ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']">
<h2 ng-show="product.group_by_CHANGED">{{product.BrandName}} </h2>
<div id=wrapper>
<div class='box'>
<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>
</div>
<div class='box'>
<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>
</div>
</div>
</div>
</body>
</html>
Add property float:left to box class. If that doesn't work, please provide a demo.
Jsfiddle: http://jsfiddle.net/z9jbhmd4/
You can add float in your css:
.box {
margin : 5px;
display : inline-block;
width: 170px;
height: 275px;
background-color: #F5FBEF;
text-align:center;
vertical-align: top;
float: left;
}
And to keep the height of the container, move <div class="box">...</div> inside container like <div class="box-container">.....</div>
Then, add css:
.box-container:after {
content: " ";
display: block;
height: 0;
clear: both;
}
Related
I have a row of buttons in the bootstrap HTML website when I open it in desktop view it works perfectly, but in mobile view, it is a mess.
here is my code :
<div class="creative ">
<div class="container" style=" padding-top: 50px">
<div class="card mt-3" style=" background-color: rgba(255,255,255,.6);">
<div class="mt-1 card-body" id="artical">
{# <h4>El Gouna</h4>#}
<a class="btn btn-primary warn" href="#about">
<span>Divecenter</span>
</a>
<a class="btn btn-primary warn" href="#about">
<span>Hotels</span>
</a>
<a class="btn btn-primary warn" href="{% url 'price_list' %}">
<span>Price & Booking</span>
</a>
<a class="btn btn-primary warn" href="#contact">
<span>Book Hotel</span>
............
You can use block buttons on small devices and use flexbox on larger screens like this.
.wrap {
border: 1px solid black;
max-width: 500px;
padding: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap d-grid gap-2 d-md-flex">
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
<button class="btn btn-primary flex-md-fill">
Button
</button>
</div>
I am trying to merge and display Text with value from another <div> as modal-header but its not happening correctly. On giving a id to modal-header, the *×* symbol is dropped.
I have a modal-header like this:-
<div class="modal-header" style="padding-top: 5px;padding-bottom: 5px;">
<div style="text-align: center; float:center;font-weight: bold;">
Summary -
<?php echo '<script> return $("#show_finyear").html();</script>'; ?>
<button class="close" type="button" style="border-radius: 40%; margin:0; border-color: blue; float: right; color:white; background-color:black;"
data-toggle="tooltip" data-placement="bottom"
title="Close Dashboard" class="btn btn-block btn-warning"
onclick="dbHide();">×
</button>
</div>
The other from where value is to be copied as follows:-
<div class="container" style="display: none;">
<div id="show_finyear" style="display: none;">2017-18</div>
</div>
YES!!! Got It. Just amended the Code like this
<div style="text-align: center; font-weight: bold;">
Summary <script> document.write($("#show_finyear").html());</script>
<button class="close" type="button" style="border-radius: 40%; margin:0; border-color: blue; float: right; color:white; background-color:black;" data-toggle="tooltip"
data-placement="bottom" title="Close Dashboard" class="btn btn-block btn-warning"
onclick="dbHide();">×
</button>
</div>
I wanna make my horizontal buttons fill my modal view.
This is what I made, using this button classes: click here
HTML:
<div class="modal fade" id="usuario_info" abindex="-1" role="dialog" aria-labelledby="myInfoUser" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRbezqZpEuwGSvitKy3wrwnth5kysKdRqBW54cAszm_wiutku3R" name="aboutme" width="96" height="96" border="0" class="img-circle">
<h3 class="media-heading" id="bookId"></h3>
</center>
<br>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Subtitle</h3>
</div>
<p class="cuerpo-info-user">Something</p>
</div>
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="fa fa-phone"></i></span>
Call him
</button>
<button type="button button-infousuario" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="fa fa-ban"></i></span>
More information
</button>
<button type="button button-infousuario" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="icon_check"></i></span>
Success
</button>
<button type="button button-infousuario" class="btn btn-labeled btn-danger">
<span class="btn-label"><i class="icon-cancel"></i></span>
Remove him
</button>
<button type="button" class="btn btn-labeled btn-danger button-infousuario">
<span class="btn-label"><i class="icon-trash"></i></span>
Remove everything
</button>
</dsiv>
</div>
</div>
</div><!-- End modal -->
My result:
I tried with:
.button-infousuario{
display:inline-block;
}
but not working.
Thanks for helping!
If I understood you correctly, you can make your buttons fill your modal view by setting their width: 100%. But the text will appear in the center of the button. To prevent that you can set text-align: left
.button-infousuario{
width: 100%;
text-align: left;
}
I have a question regarding the vertical alignment of a button group within a row, using bootstrap.
This is an image that explains what I'm trying to achieve
And the following code is used in my current project:
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
<div class="row">
<div class="col-sm-9">
#if (item.Completed) {
<h4><span class="label label-success">Completed</span> #item.Procedure.Title</h4>
} else {
<h4><span class="label label-danger">Not completed</span> #item.Procedure.Title</h4>
}
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Time required:</dt>
<dd>#item.Procedure.Time</dd>
<dt>Material required:</dt>
<dd>#item.Procedure.Material</dd>
<dt>Engineers required:</dt>
<dd>#item.Procedure.Engineers</dd>
<dt>Documentation:</dt>
<dd>#item.Procedure.Documents</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Status:</dt>
<dd>#item.Status</dd>
<dt>Note:</dt>
<dd>#item.Note</dd>
</dl>
</div>
</div>
</div>
<div class="col-sm-3" style="vertical-align: middle;">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-success" role="group">
<span class="glyphicon glyphicon-ok"></span>
OK
</button>
<button type="button" class="btn btn-danger" role="group">
<span class="glyphicon glyphicon-remove"></span>
Not OK
</button>
<button type="button" class="btn btn-info" role="group" data-toggle="modal" data-target="#noteModal#(item.ID)">
<span class="glyphicon glyphicon-pencil"></span>
Add note
</button>
</div>
<div id="noteModal#(item.ID)" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<label for="note">Note:</label>
<textarea class="form-control" rows="5" id="note" style="min-width: 100%;"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add note</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Any help apreciated, thanks!
I solved the problem using the flex property on the outer .row
.row-flex {
display: flex;
align-items: center;
}
Image
This is what I did:
.btn-group {
flex-wrap: wrap;
width: 80px;
}
button{
width:80px;
}
Here is the JSFiddle demo
I'm trying to place a button on top of a thumbnail image but the button is added after the image, in the caption area.
Here is the code:
<div class="thumbnail">
<img class="img-responsive"alt="300x200" src="network_sec.jpg">
<button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button>
<div class="caption">
<h3 align="center">Network Security</h3>
<br>
<p>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> Manage</button>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> Preview</button>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> Edit Info</button>
</p>
</div>
</div>
I'm trying to align the button at the bottom right part of the image. Any suggestions on how can I achieve the desired result?
I would put the image an the button in a new div, then use positioning relative and absolute like this.
HTML
<div class="thumbnail">
<div id="thumb">
<img class="img-responsive"alt="300x200" src="network_sec.jpg">
<button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button>
</div>
<div class="caption">
<h3 align="center">Network Security</h3>
<br>
<p>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> Manage</button>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> Preview</button>
<button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> Edit Info</button>
</p>
</div>
</div>
CSS
#thumb
{
position: relative;
width: 300px;
height: 200px;
}
#thumb img
{
z-index: 1;
position: absolute;
width: 300px;
height:200px;
top: 0;
left: 0;
}
#thumb button
{
z-index: 5;
position: absolute;
bottom: 0;
right: 0;
}
Is that what you had in mind?