I have used kendo UI mobile version in ASP.NET MVC to show changes in a iframe.
In my html i have several views in which i want header,contain area,footer area i need scroller in contain area for which I have used
" " in each view it's working only in one view but not other view so is there anything wrong which I have missed out .
<div data-role="header" class="header-home3" >
<span class="headerContent1"> Opening Hours </span>
</div>
<div id="divLayout" data-role="scroller" class="scroller-content middle-home3">
<div id="divOpeningHoursPageBackgroundImage" class="inner-container">
<div id="divOpeningHoursheaderImg" class="inner-imgheader"> <img id="OpeningHoursHeaderImage" style="width:100%;"/></div>
<div id="divOpeningHoursHeaderText" class="inner-txtheader"></div>
<div class="inner-midcontainer">
<div id="divOpeningHoursContainer" style="height:80%;min-height:400px;position:static;"></div>
<div id="div5" style="float: left;height: 20%;position: relative;width: 100%;"></div>
</div>
<div id="divOpeningHoursFooterText" class="inner-txtfooter" > </div>
<div id="divOpeningHoursFooterImg" class="inner-imgfooter"> <img id="OpeningHoursFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-share">
<div data-role="header" class="header-map3" >
<span class="headerContent1"> Map & Direction </span>
</div>
<div id="div1" data-role="scroller" class="scroller-content middle-home3">
<div id="divMapPageBackgroundImage" class="inner-container">
<div class="inner-imgheader"> <img id="MapHeaderImage" style="width:100%;"/></div>
<div id="divMapHeaderText" class="inner-txtheader"></div>
<div id="divMapContainer" class="inner-midcontainer">
<div id="divgooglemap" style="height:80%;min-height:400px;position:static;"></div>
<div id="divMapRoute" style="float: left;height: 20%;position: relative;width: 100%;"></div>
</div>
<div id="divMapFooterText" class="inner-txtfooter" > </div>
<div class="inner-imgfooter"><img id="MapFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Twitter">
<div data-role="header" class="header-mile3" >
<span class="headerContent1"> Twitter </span>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-History">
<div data-role="header" class="header-history3" >
<span class="headerContent1"> Contact Form</span>
</div>
<div id="divContactFormMain" data-role="scrollview" class="scroller-content middle-home3">
<div id="divContactFormPageBackgroundImage" class="inner-container">
<div id="divContactFormheaderImg" class="inner-imgheader"> <img id="ContactFormHeaderImage" style="width:100%;"/></div>
<div id="divContactFormHeaderText" class="inner-txtheader"></div>
<div id="divContactFormContainer" class="inner-midcontainer">
<div id="div6" style="height:80%;min-height:400px;">
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Name</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlName" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Address</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlAddress" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Country</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlCountry" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Email</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlEmail" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;">
<div style="float: left; padding-left: 5%; width: 25%; text-align: left;"> Phone</div>
<div style="float: left; width: 55%; padding-left: 5%;"> <input type="text" id="txtHtmlPhone" class="newstyle" name="name"></div>
</div>
<div style="width: 100%; height: 20%; margin-bottom: 13%;text-align:center;margin-top:20%;">
<input type="button" id="btnHtmlSaveContactForm" class="newButton" value="SAVE"/>
</div>
</div>
</div>
<div id="divContactFormFooterText" class="inner-txtfooter" > </div>
<div id="divContactFormFooterImg" class="inner-imgfooter"><img id="ContactFormFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-news">
<div data-role="header" class="header-news3" >
<span class="headerContent1"> News & Articles </span>
</div>
<div id="divNewsMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divNewsPageBackgroundImage" class="inner-container">
<div id="divNewsheaderImg" class="inner-imgheader"> <img id="NewsHeaderImage" style="width:100%;"/></div>
<div id="divNewsHeaderText" class="inner-txtheader"></div>
<div id="divNewsContainer" class="inner-midcontainer">
This is News and Article Page
</div>
<div id="divNewsFooterText" class="inner-txtfooter" > </div>
<div id="divNewsFooterImg" class="inner-imgfooter"><img id="NewsFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-About">
<div data-role="header" class="header-about3" >
<span class="headerContent1"> About Page</span>
</div>
<div id="divAboutMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divAboutPageBackgroundImage" class="inner-container">
<div id="divAboutHeaderImg" class="inner-imgheader"> <img id="AboutHeaderImage" style="width:100%;"/></div>
<div id="divAboutHeaderText" class="inner-txtheader"></div>
<div id="divAboutContainer" class="inner-midcontainer">
This Is About Page
</div>
<div id="divAboutFootertext" class="inner-txtfooter" > </div>
<div id="divAboutFooterImg" class="inner-imgfooter"><img id="AboutFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Events">
<div data-role="header" class="header-event3" >
<span class="headerContent1">Events</span>
</div>
<div id="divEventsMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divEventsPageBackgroundImage" class="inner-container">
<div id="divEventsHeaderImg" class="inner-imgheader"> <img id="EventsHeaderImage" style="width:100%;"/></div>
<div id="divEventsHeaderText" class="inner-txtheader"></div>
<div id="divEventsContainer" class="inner-midcontainer">
This is Events Page
</div>
<div id="divEventsFooterText" class="inner-txtfooter" > </div>
<div id="divEventsFooterImg" class="inner-imgfooter"><img id="EventsFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Team">
<div data-role="header" class="header-team3" >
<span class="headerContent1"> Team Member </span>
</div>
<div id="divTeamMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divTeamPageBackgroundImage" class="inner-container">
<div id="divTeamheaderImg" class="inner-imgheader"> <img id="TeamMembersHeaderImage" style="width:100%;"/></div>
<div id="divTeamHeaderText" class="inner-txtheader"></div>
<div id="divTeamContainer" class="inner-midcontainer">
<div id="div2" style="height:80%;min-height:400px;">
This is team member page
</div>
<div id="div3" style="float: left;height: 20%;position: relative;width: 100%;"></div>
</div>
<div id="divTeamFooterText" class="inner-txtfooter" > </div>
<div id="divTeamFooterImg" class="inner-imgfooter"><img id="TeamMembersFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Contacts">
<div data-role="header" class="header-contact3" >
<span class="headerContent1"> Contact Details</span>
</div>
<div id="divContactDetailsMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divContactDetailsPageBackgroundImage" class="inner-container">
<div id="divContactDetailsHeaderImg" class="inner-imgheader"> <img id="ContactDetailsHeaderImage" style="width:100%;"/></div>
<div id="divContactDetailsHeaderText" class="inner-txtheader"></div>
<div id="divContactDetailsContainer" class="inner-midcontainer">
This is contact details Page
</div>
<div id="divContactDetailsFooterText" class="inner-txtfooter" > </div>
<div id="divContactDetailsFooterImg" class="inner-imgfooter"><img id="ContactDetailsFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-Facebook">
<div data-role="header" class="header-mile3" >
<span class="headerContent1"> Facebook </span>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<div data-role="view" id="tabstrip-miles">
<div data-role="header" class="header-mile3" >
<span class="headerContent1"> Milestones </span>
</div>
<div id="divMilestonesMain" data-role="scroller" class="scroller-content middle-home3">
<div id="divMilestonesPageBackgroundImage" class="inner-container">
<div id="divMilestonesHeaderImg" class="inner-imgheader"> <img id="MilestoneHeaderImage" style="width:100%;"/></div>
<div id="divMilestonesHeaderText" class="inner-txtheader"></div>
<div id="divMilestonesContainer" class="inner-midcontainer">
this is Milestones page
</div>
<div id="divMilestonesFooterText" class="inner-txtfooter" > </div>
<div id="divMilestonesFooterImg" class="inner-imgfooter"><img id="MilestoneFooterImage" style="width:100%;"/></div>
</div>
</div>
<div data-role="footer" class="footer-common footerimg" ></div>
</div>
<!--3rd layout ends here-->
<script>
var subMenuVal = parent.document.getElementById("selectedSubMenu").value;
if ((subMenuVal == "") || (typeof subMenuVal === "undefined")) {
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
}
else {
console.log(subMenuVal);
var app = new kendo.mobile.Application(document.body, { transition: "slide", initial: subMenuVal });
}
</script>
</body>
Thanks in advance
Related
Applogies for the question again. I'm new to laravel and this is my first project.
I'm trying to generate a pdf using DomPDF but before submitting my form to database, I dont know whether it is possible or not.
this is my create.blade.php code
#extends('layouts.main')
#section('content')
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Orders</h1>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-12">
<div>
<div class="card-header">{{ __('Creating Order') }}
Back
</div>
<div>
<form method="GET" action="{{ route('orders.create') }}" enctype="multipart/form-data">
#csrf
<div class="form-row align-items-center">
<div class="form-group col-md-6 col-lg-5">
<select id="customer_name" onchange="this.form.submit()" type="search" name="customer_id" class="form-control #error('customer_id') is-invalid #enderror" value="{{ old('customer_id') }}" required >
<option selected></option>
#foreach ($customers as $customer)
<option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
#endforeach
</select>
#error('customer_id')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="col-auto">
<input id="btn" type="button" class="btn btn-primary mb-3" value="Show Catalog" onclick="showDiv()">
</div>
</div>
<div class="m-3">
Displaying Catalog for: <strong> <span style="color: red" id="customerName"></span><span style="color: red">. {{$count_linkeds}}</span></strong> items found in this Catalog.
</div>
</form>
<form method="POST" action="{{ route('orders.store') }}" enctype="multipart/form-data">
#csrf
<main id="catalog" style="display: none" class="main">
<div class="container">
<div class="row s6 m3">
#foreach($linkeds as $lnkditem)
<div class="col s6 m3">
<div class="card item-images">
<div class="img-wrapper">
<img src="{{ asset('uploads/linkedItems/'.$lnkditem->item_image) }}" width= '50' height='50' class="img img-responsive" />
</div>
<div class="card-content mt-2 item">
<h6 style="font-size: 18px">
Product Name: <strong style="color: red">{{ $lnkditem->product->product_name}}</strong>
</h6>
<div style="float: right; margin-top: -30px">
<label hidden style="float: right;" for="linked_id">{{ __(': Linked ID') }}</label>
<textarea hidden style="text-align: center; resize: none; width:100px; height: 28px; overflow:hidden; border:none; background-color: #f8f8f8;" readonly rows="1" name="linked_id" id="linked_id" class="form-control"
value="{{ old('linked_id', $lnkditem->id) }}">{{ $lnkditem->id}}</textarea>
</div>
<p>
Product description: <strong style="color: red"> {{ $lnkditem->product->product_description}}</strong>
</p>
Item Name: <span readonly id="item_name" name="item_name" style="font-weight: bold; color: black" value="{{ $lnkditem->item->item_name}}">{{ $lnkditem->item->item_name}}</span>
<p>
Item description: <strong style="color: black"> {{ $lnkditem->item->item_description}}</strong>
</p>
<p>
Supplier Ref.: <strong style="color: black"> {{ $lnkditem->supplier_ref_no}}</strong>
</p>
<p>
Supplier Barcode: <strong style="color: black"> {{ $lnkditem->supplier_barcode}}</strong>
</p>
<div class="pass-quantity col-lg-3 col-md-4 col-sm-3 pl-0">
<label for="item_quantity" class="pass-quantity">Quantity:</label>
<input style="color: red" name="item_quantity" class="form-control" type="number" value="0" min="0">
</div>
<div>
<label for="pass-quantity" class="pass-quantity" style="color: red; font-weight: bold; float: right; margin-right: 45px !important; margin-top: -32px">Item Price: AED - </label>
<p type="number" name="item_cost" class="item_cost" style="color: red; font-weight: bold; float: right; margin-top: -32px">
{{ $lnkditem->item_cost}}
</p>
</div>
<div class="product-price d-none">{{ $lnkditem->item_cost}}</div>
<hr class="sidebar-divider">
<strong style="color: red"><p>Total Amount: AED:</p></strong>
<div class="product-line-price pt-4 pb-4 text-uppercase" style="color: red; font-weight: bold; float: right; margin-top: -67px">
<strong><span style="color: red" type="number" class="product-line-price">0.00</span></strong>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
<div class="card card-action mb-3 pt-4" style="padding: 15px; height: 100%; width: 50%; margin-left: 25%">
<div class="mb-3" style="margin-left: 15px">
<label for="order_unq_id"></label>
Order UID: <textarea name="order_unq_id" style="color: red; font-weight: bold; width: 350px; resize: none; margin-left: 22%; margin-top: -31px !important; height: 38px; overflow:hidden; border:none; background-color: #f8f8f8;" readonly rows="1" id="order_unq_id" class="form-control #error('order_unq_id') is-invalid #enderror" value="{{ old('order_unq_id') }}">
</textarea>
</div>
<div style="margin-left: 20px">
Saving Order for - <strong> <span class="text-uppercase" style="color: red" id="order_save_customerName"></span></strong>
<input type="text" class="customerName_order_save_input" hidden id="customerName_order_save_input" value="">
</div><br>
<div class="col-xl-12 col-lg-4 col-md-5 totals">
<div class="border border-gainsboro mb-3 px-3">
<div class="border-bottom border-gainsboro">
<p class="text-uppercase mb-0 py-3 bg-primary text-white text-center"><strong>Order Summary</strong></p>
</div>
<p class="mt-3 text-uppercase">Subtotal AED:</p>
<div class="totals-item d-flex align-items-center justify-content-between"
style="float: right; margin-top: -40px">
<p class="totals-value" id="cart-subtotal"></p>
</div>
<div class="totals-item d-flex align-items-center justify-content-between">
<p class="text-uppercase">Aprox. VAT #5%</p>
<p class="totals-value tax" id="cart-tax"></p>
</div>
<div class="totals-item totals-item-total d-flex align-items-center justify-content-between mt-3 pt-3 border-top border-gainsboro">
<label for="total" class="text-uppercase" style="color: red;"><strong>grand Total</strong></label>
<input type="text" class="total_input" hidden id="total_input" name="total_input" value="0.00">
<textarea style="self-align: center; text-align: right; color: red; padding-top !important; 10px; resize: none; width:100px; height: 35px; overflow:hidden; border:none; background-color: white; font-size: 18px" readonly rows="1"
class="totals-value font-weight-bold cart-total" name="total" id="total" style="color: red;"></textarea>
</div>
</div>
</div>
<div>
<a type="submit" target="_blank" class="btn btn-success" href="{{route('mht_order_pdf')}}">Generate PDF</a>
</div>
<button type="submit" class="btn btn-primary" id="save_order" >Save Order</button>
</div>
</main>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
I dont want pdf to get data from database. I need to generate the pdf with form data before form gets submit to database. Is this possible to achive? Thank you in advance.
In terms of tecnicality, this is possible. Personally I've done something like this, only that the PDF is being generated after the form is stored to DB, but before the request is sent back to users.
So in the controller, you can do something like this:
// first validate request inputs..
// then generate the PDF
PDF::generate('order_pdf'); // or something, idk what's the actual syntax
// finally
return view('order_dashboard');
However you need to know that while the PDF::generate() line is being executed, the app will wait until it finished before moving to the next line, meaning that the execution is being done synchronously. Thus if the PDF generation takes too long, user will have to wait for it. To face this issue, you might want to look at Laravel's Queue so that the PDF generation can be executed asynchronously.
Unable to set card footer as expected output
Expected output:
My Code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
</div>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
jsfiddle: https://jsfiddle.net/sidh_41/p8sdfy7u/2/
.card-footer:last-child {
border-radius: 0!important;
}
.card-footer {
padding: 0!important;
background-color: unset!important;
border-top: unset!important;
}
.text-center {
color: #fff;
}
.card-img-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
</div>
Try this:
.card-footer:last-child {
border-radius: 0!important;
}
.card-footer {
padding: 0!important;
background-color: unset!important;
border-top: unset!important;
}
.text-center {
color: #fff;
}
.card-img-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6 class="m-0 small">
AFRICA
</h6>
<h1>
Kenya
</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="card">
<img class="card-img" src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
</div></div>
I think you need to add another div surrounding the card. This div needs to have the class row
.img-wrapper{
position: relative;
text-align: center;
color: white;
}
.card-footer{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
h3, h1{
color: #fff
}
<div class="col-md-3">
<div class="card">
<div class="img-wrapper">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
</div>
</div>
</div>
<div class="card-footer text-center">
<h3>
Africa
</h3>
<h1>
Kenya
</h1>
</div>
</div>
</div>
My code:
.items {
display: grid;
grid-template-columns: repeat(3, 1fr);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}
How can I properly display my images as a 3 column grid?
<section id="work-a" class="text-center py-3">
<div class="container">
<h2 class="section-title">My Work</h2>
<div class="bottom-line"></div>
<p class="lead">
Check out some of my projects
</p>
<div class="items">
<div class="item">
<div class="item-image">
<img src="img/items/item1.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item2.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item3.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
</div>
</div>
</section>
I have made the following grid in Bootstrap 4:
<div class="container-fluid">
<div class="row padding">
<div id="workshop1" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_05.jpg" class="img-fluid nopadding" alt="">
</div>
<div class="col-lg-6">
<div class="row">
<div id="workshop2" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_06.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop3" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_08.jpg" class="img-fluid nopadding" alt="">
</div>
</div>
<div class="row">
<div id="workshop4" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_09.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop5" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_07.jpg" class="img-fluid nopadding" alt="">
</div>
</div>
</div>
</div> <!-- end of first row -->
<div class="row padding">
<div id="workshop6" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_01.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop7" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_04.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop8" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_02.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop9" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_03.jpg" class="img-fluid nopadding" alt="">
</div>
</div> <!-- end of second row -->
</div>
The css file looks like this:
.nopadding {
padding-left: 0;
padding-right: 0;
}
Now I have the problem, that there is a small white line between the right part of row 2 and row 3 in Safari and Chrome on my Mac. In Firefox everything looks fine:
Firefox
Chrome & Safari
Does anybody have an idea how fix this? All browsers are up to date.
Thanks in advance.
Regards
Lars
Try adding display: block; to your images or float: left;
Sometimes trying font-size: 0; or line-height: 0; works.
I built this mock-up:
I was wondering if this type of gallery is possible to build with bootstrap, I did not start to code yet because I think that it will not work because of the rows.
I would like some second opinions, from people who have worked with bootstrap for longer than me.
I found something that actualy works!! and it's responsive! :D
.poligono, .poligono div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 250px;
height: 250px;
}
.poligono {
transform: rotate(45deg) translateY(10px);
}
.poligono .los1 {
width: 355px;
height: 355px;
transform: rotate(-45deg) translateY(-74px);
}
.poligono .los1 img {
width: 100%;
height: auto;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.poligono:hover img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<div id="projects" class="projects">
<div class="container">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<h2>Projects</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
<p class="descricao">Cenas maradas acontecem</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
</div>
</div>
If you are asking if there is a default bootstrap for this the answer is no.
But yes this is possible with your own css.
I don't see why not you could not skew the image with something like the following:
img.tilted{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
If you want this "mask like behaviour" i don't see why you couldn't put all the images on a layer bellow and put a transparent image on the top
Or you can try to css clip it like this http://www.html5rocks.com/en/tutorials/masking/adobe/