I'm adding a custom form for blog Post with Django. The Post model I defined has ManytoManyField, and when trying to create a Post in django admin.ModelAdmin, it has '+' button that a user can add it. However, when I create a custom form view, it didn't appear. Is there any way that I can create the '+' button so that a user can create a new item and add it by clicking it?
When adding a Post Model with django admin.ModelAdmin, it has the screenshot like below (keywords = ... in classPostForm was commented out to get this)
Creating with django admin.ModelAdmin
However, in custom view (source code included below), the '+' button does not exist.
Creating with custom form
# models.py
class Post(models.Model):
title = models.CharField(max_length=255)
slug = models.SlugField(max_length=200, unique=True)
keywords = models.ManyToManyField(Keyword, blank=True)
# forms.py
class PostForm(forms.ModelForm):
keywords = forms.ModelMultipleChoiceField(
Keyword.objects.all(),
widget=widgets.FilteredSelectMultiple('Keywords', False),
required=False,
)
def __init__(self, *args, **kwargs):
super(PostForm, self).__init__(*args, **kwargs)
class Meta:
model = Post
fields = ('title', 'keywords')
querysets = {
'keywords': Keyword.objects.all()
}
class Media:
css = {'all': ('/admin/css/widgets.css',
'admin/css/overrides.css'), }
js = ('/admin/jquery.js', '/admin/jsi18n/')
# views.py
class CreatePost(generic.CreateView):
model = Post
form_class = PostForm
template_name = 'post_create.html'
<!---base.html---!>
<!DOCTYPE html>
<html>
<head>
<title>Doc Flow</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet">
<meta content="notranslate" name="google"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link
crossorigin="anonymous"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
rel="stylesheet"
/>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<span class="glyphicon glyphicon-plus"></span>
{{ form.media }}
<meta charset="utf-8">
{% block extra_head %}
{% endblock %}
</head>
<body>
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
background-color: #fdfdfd;
}
.shadow{
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background:#3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
.div_slide {
width: 30%;
float: left;
}
.slide-container {
overflow: auto;
white-space: nowrap;
}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Front</a>
<button
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
class="navbar-toggler navbar-toggler-right"
data-target="#navbarResponsive"
data-toggle="collapse"
type="button"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright © Workhorse</p>
</footer>
</body>
</html>
<!---post_create.html---!>
{% extends 'base.html' %}
{% block extra_head %}
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
{% endblock %}
{% block content %}
<form method="post" autocomplete="off" novalidate>
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-success">Create event</button>
</form>
{% endblock %}
RelatedFieldWidgetWrapper is responsible for adding the "+" sign to your widget. So you need to wrap FilteredSelectMultiple in it, for this to work.
keywords = forms.ModelMultipleChoiceField(
Keyword.objects.all(),
widget=admin.widgets.RelatedFieldWidgetWrapper(
widget=admin.widgets.FilteredSelectMultiple('Keywords', False),
rel=Post.keywords.rel,
admin_site=admin.site
),
required=False,
)
That's not easy to find in the docs though, I had to search in the Django codebase to get to it.
Related
I am using barryvdh/laravel-dompdf to generate pdf.
I'm trying generate one pdf file with multiple pages from data collection the problem is that I get only first element and one page. Using foreach loop to generate pages. Also I was trying to use foreach in my blade, but then I get only the last page.
Controller:
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$html = '';
foreach($kuponai as $kuponas)
{
$view = view('pdf.multiple')->with(compact('kuponas'));
$html .= $view->render();
}
$pdf = PDF::loadHTML($html);
$sheet = $pdf->setPaper('a4', 'landscape');
return $sheet->stream('sugeneruoti.pdf');
}
Maybe problem in my blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dovanų kuponas</title>
</head>
<body>
<div class="coupon">
<div class="page">
<div class="subpage">
<div class="container" style="
width: 21cm;
height: 16cm;
position: absolute;
top: 6.8cm;
font-family: DejaVu Sans;
background: white;
">
<h2>{{!! $kuponas->kupono_nr !!}}</h2>
<h3 style="margin-left: 3.2cm">
Dovanų kupono numeris:
<span style="color: black"></span>
</h3>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
</style>
There are certain things that are wrong in the code snippet you have provided, I will explain those first then provide correct way of doing it(for which I get results).
Firstly
you have used with & compact together, I don't know if it gets correct results but you should use any one of them or use array syntax of view method.
Secondly
what you are doing it you are rendering the view to html & then concating it, so , your html would look like,
<html>
.... content
</html>
<html>
.... content
</html>
& so on.
Thirdly
You css is messed up & not working as you want because of inline css you have added.
Solution
I would have used View Components to create similar views with different data.
So we would create a component in resources/views/components/single.blade.php (here I have named it single).
I have added your repeative code in the component single from your view. Now your coupon div class is in the component single.
<div class="coupon">
<div class="page">
<div class="subpage">
<div>
<h2>{{ $kuponas->kupono_nr }}</h2>
<h3>
Dovanų kupono numeris:
<span></span>
</h3>
</div>
</div>
</div>
</div>
Then in your view,
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>Dovanų kuponas</title>
<style>
.page-break {
page-break-after: always;
}
</style>
</head>
<body>
#php $count = 0;#endphp
#foreach ($kuponai as $kuponas)
#php $count++ #endphp
<div class="container {{ (count($kuponai)-1 >= $count) ? 'page-break' : '' }}">
#component('pdf.components.single', ['kuponas' => $kuponas])
#endcomponent
</div>
#endforeach
</body>
</html>
use page-break class to create breaks, I have used count condition to remove one extra page break. I am passing the data of kuponas to the component.
Finally change your controller,
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$view = view('pdf.multiple', ['kuponai' => $kuponai]);
$html = $view->render();
$pdf = PDF::loadHTML($html)->setPaper('a4', 'landscape');
return $pdf->stream('sugeneruoti.pdf');
}
The transition Does not work in inertia page . if add appLayout between transition tag . its working . but all content gives transition.
Dashboard.vue
<template>
<admin-layout>
<h1>Admin Dashboard</h1>
</admin-layout>
</template>
adminLayout.vue
<section class="adminPanel" :style="contentStyle">
<AdminSvg/>
<header-admin :style="headerStyle"/>
<transition name="slide-fade">
<div class="content">
<slot></slot>
</div>
</transition>
<sidebar-admin :style="sidebarStyle"/>
</section>
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="{{ asset('css/admin.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
#inertia
</body>
</html>
Vue transition works when the element that is wrapped by the transition tag changes (inserted or removed). Since inertia uses the backend route, simulating a page change should help with this. - This is not optimal but it works!
<section class="adminPanel" :style="contentStyle">
<AdminSvg/>
<header-admin :style="headerStyle"/>
<transition name="slide-fade">
<div v-if="content-trigger" class="content">
<slot></slot>
</div>
</transition>
<sidebar-admin :style="sidebarStyle"/>
</section>
<style>
/* durations and timing functions.*/
.slide-fade-enter-active {
transition: all .5s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
<script>
export default {
data() {
return {
content-trigger:false
}
},
mounted(){
this.content-trigger = true;
}
}
</script>
Here is a simple solution that can help.
In the Layout component, Use the $page.url of the current url as a key 🎉.
<transition name="fade" mode="out-in" appear>
<div :key="$page.url">
<slot />
</div>
</transition>
I am using setParent() to show a particular folder only in Google picker but searching lists all the files and folders. I want search results restricted to parent folder.
Is this possible?
As far as I can tell there is no way to do this with the picker API. One hack is to filter for starred files but that is usually not helpful because you probably just want to set one directory/folder to search inside.
In the end I had to use the Google Drive API instead and create my own interface
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body style="background-color: rgb(221, 238, 232);">
<div style="max-width: 1100px; margin: auto;" class="conainer mt-5">
<div class="row text-center mt-5">
<div class="col-10 ms-5">
<div class="d-flex">
<input type="search" class="form-control me-2" id="search_input" oninput="search(event)" placeholder="Search" aria-label="Search">
<button type="button" class="btn btn-primary" oninput="search(event)">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row text-center mt-5 ">
<div class="col-10 ms-5" style="background-color: white; border-radius: 5px;">
<template type="text/x-handlebars-template" id="documentsTemplate">
<div class="row mt-2 mb-2">
{{#if documents.length}}
{{#each documents}}
<div class="col-2 mt-2">
<div style="height: 200px; width:150px; background-color: white; border-radius: 5px; border: solid 1px; border-color: lightblue;">
<img style="height: 150px; width:150px;" src="{{thumbnailLink}}" />
<input class="form-check-input" type="checkbox" value="">
{{name}}
</div>
</div>
{{/each}}
{{else}}
<div style="height: 200px; width:100%; background-color: white; text-align: center; font-size: 2vw; margin: 0 auto;">
No Results
</div>
{{/if}}
</div>
</template>
<div id="documentsList"></div>
</div>
</div>
</div>
</div>
<script type="module" src="script.js"></script>
<!-- <script src="https://apis.google.com/js/platform.js"></script> -->
<script src="https://apis.google.com/js/api.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
//script.js
//import { google_client_id } from "./utils/configs.js"
// get this from 'APIs and Services'>credentials>Oauth app
const google_client_id=XXXXX
(function() {
// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
gapi.load('auth2', onAuthApiLoad);
gapi.load('picker', onPickerApiLoad);
}
globalThis.search = (event) => {
clearTimeout(globalThis.searchTimeout);
globalThis.searchTimeout = setTimeout(() => {
getTemplateFolder()
.then(searchFiles)
}, 1000)
}
document.getElementById('search_input').addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
var key = event.key || event.keyCode;
if (key === 13) {
// Cancel the default action, if needed
event.preventDefault();
search(event);
}
});
gapi.load('client:auth2', (aa) => {
gapi.client.init({
client_id: google_client_id,
scope: 'https://www.googleapis.com/auth/drive',
discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
})
.then(checkSession)
.then(function() {
return getTemplateFolder();
})
.then(function(folder) {
return getFiles(folder);
});
});
function checkSession() {
if (!gapi.auth2.getAuthInstance().isSignedIn.get()) {
return gapi.auth2.getAuthInstance().signIn();
}
}
function getTemplateFolder() {
return gapi.client.drive.files.list({
q: "mimeType = 'application/vnd.google-apps.folder' and name = 'XXXXXX' and trashed = false",
pageSize: 10,
fields: 'nextPageToken, files(id, name)',
}).then(function(response) {
console.log(response);
return response.result.files[0];
});
}
function getFiles(templateFolder) {
return gapi.client.drive.files.list({
q: `'${templateFolder.id}' in parents and trashed = false`,
pageSize: 10,
fields: 'nextPageToken, files(id, name, mimeType, thumbnailLink)',
}).then(function(response) {
console.log(response);
var template = Handlebars.compile(document.querySelector("#documentsTemplate").innerHTML);
document.querySelector("#documentsList").innerHTML = template({ documents: response.result.files });
return response.result.files;
});
}
function searchFiles(templateFolder) {
return gapi.client.drive.files.list({
q: `'${templateFolder.id}' in parents and fullText contains '${document.getElementById("search_input").value}' and trashed = false`,
pageSize: 10,
fields: 'nextPageToken, files(id, name, mimeType, thumbnailLink)',
}).then(function(response) {
console.log(response);
var template = Handlebars.compile(document.querySelector("#documentsTemplate").innerHTML);
document.querySelector("#documentsList").innerHTML = template({ documents: response.result.files });
return response.result.files;
});
}
})();
Make sure to add the google_client_id and the directory name you want to filter by.
LAYOUT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/bootstrap")
#Scripts.Render("~/bundles/modernizr")
<link rel="Stylesheet" href="../../Content/bootstrap.min.css" />
<link rel="Stylesheet" href="../../Content/bootstrap-theme.min.css" />
</head>
#*<body style="background-image: url(../../Content/Images/old-paper.jpg)">*#
<body style="background-color: #EEE">
#*---- WEB PAGE ---- *#
<div class="wrap-middle">
#*---- TITLE OF THE WEBSITE ----*#
<div class="container-fluid" style="width: 100%; background-image: url('/Content/Images/Header.bmp')">
<div>
<h1>
ONLINE VOTING SYSTEM</h1>
</div>
</div>
#*---- BODY SECTION ----*#
<div class="jumbotron">
<div class="container">
#RenderBody()
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom" style="box-shadow: 0 0 20px black;">
<div class="container-fluid" style="color: Yellow">
Copyright <sup><span class="glyphicon glyphicon-copyright-mark"></span></sup>2014.
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
VIEW:
#model IEnumerable<Online_Voting_System_site.DAL.tbl_candidate>
#{
ViewBag.Title = "CandidateApproval";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Ajax.ActionLink("Approve",
"ApproveCandidate",
new { _CandidateID = item.CandidateID },
new AjaxOptions { UpdateTargetId = item.CandidateID.ToString() },
new { #id = item.CandidateID.ToString(), #class = "btn btn-sm btn-success" })
ACTION METHOD:
public string ApproveVoter(string ID)
{
/* Logic is hidden.I use that ID parameter in here */
return "Approved";
}
I'm trying to change button text by calling action method using
ajax.actionlink. That action method is returning a string as button ID
but it displayed in new page.
Edit: The string should the text of the button. But the text is getting displayed in a new page.
I have been working on this for a bit and am not savvy enough to know how to correctly implement it (such that it remains a responsive design).
I am running the free "responsive" wordpress theme by ThemeID on a test site and need to have the main body content text of the single article page wrap underneath the right sidebar and adjust "dynamically" as the sidebar changes height over time. I plan on having the "Archives" widget in this right sidebar, so over time it will grow in height...so the body text should not extend to underneath the sidebar until it reaches the bottom of the sidebar. Take a look at a mockup I made real quick to demonstrate what I mean.
Before: http://www.heliossolutions.net/responsive.jpg
After 2: http://www.heliossolutions.net/responsive3.jpg
As you can see, the text currently leaves a huge white space beneath the sidebar but I would like for it to be able to flow underneath and adapt to the sidebar height. It also needs to maintain the responsive nature of the theme and work correctly on mobile devices (i.e. the sidebar widgets should properly display underneath all the content when viewed on a mobile phone, as it does out-of-the-box).
Does this make sense?
The page code currently looks like this:
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" dir="ltr" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" dir="ltr" lang="en-US"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<meta name="template" content="Responsive 1.6.9" />
</head>
<body class="single single-post postid-36 single-format-standard">
<div id="container" class="hfeed">
<div id="header">
<div id="logo">
</div><!-- end of #logo -->
<ul class="menu"><li >Home</li></ul>
</div><!-- end of #header -->
<div id="wrapper" class="clearfix">
<div id="content" class="grid col-620">
<div id="post-36" class="post-36 post type-post status-publish format-standard hentry category-web-development">
<div class="post-meta">
<span class="meta-prep meta-prep-author">Posted on </span> July 2, 2012</span>
</div><!-- end of .post-meta -->
<div class="post-entry">
<p>Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.</p>
</div><!-- end of .post-entry -->
<div class="post-data">
</div><!-- end of .post-data -->
<div class="post-edit"></div>
</div><!-- end of #post-36 -->
<div id="respond">
<h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/parallax-slider/#respond" style="display:none;">Cancel reply</a></small></h3>
<p class="must-log-in">You must be logged in to post a comment.</p>
</div><!-- #respond -->
</div><!-- end of #content -->
<div id="widgets" class="grid col-300 fit">
<div class="widget-wrapper">
<div class="widget-title">In Archive</div>
<ul>
</ul>
</div><!-- end of .widget-wrapper -->
</div><!-- end of #widgets --> </div><!-- end of #wrapper -->
</div><!-- end of #container -->
<div id="footer" class="clearfix">
<div id="footer-wrapper">
<div class="grid col-940">
<div class="grid col-540">
</div><!-- end of col-540 -->
<div class="grid col-380 fit">
<ul class="social-icons"></ul><!-- end of .social-icons --> </div><!-- end of col-380 fit -->
</div><!-- end of col-940 -->
<div class="grid col-300 copyright">
© 2012
</div><!-- end of .copyright -->
<div class="grid col-300 scroll-top">↑</div>
<div class="grid col-300 fit powered">
</div><!-- end .powered -->
</div><!-- end #footer-wrapper -->
</div><!-- end #footer -->
</body>
</html>
And the corresponding CSS (tried to give you more than enough, since I can't pinpoint the exact issue):
#content {
margin-bottom:20px;
}
.grid {
float:left;
margin-bottom:2.127659574468%;
padding-top:0;
}
.col-60,
.col-140,
.col-220,
.col-300,
.col-380,
.col-460,
.col-540,
.col-620,
.col-700,
.col-780,
.col-860 {
display:inline;
margin-right:2.127659574468%;
}
.col-620 {
width:65.957446808511%;
}
.post-meta {
clear:both;
color:#9f9f9f;
font-size:13px;
margin-bottom:10px;
}
.post-entry {
clear:both;
}
.post-data {
clear:both;
font-size:11px;
font-weight:700;
margin-top:20px;
}
.post-edit {
clear:both;
display:block;
font-size:12px;
margin:1.5em 0;
}
#widgets {
margin-top:40px;
}
.col-300 {
width:31.914893617021%;
}
.fit {
margin-left:0!important;
margin-right:0!important;
}
.widget-wrapper {
-webkit-border-radius:6px;
-moz-border-radius:6px;
background-color:#f9f9f9;
border:1px solid #d6d6d6;
border-radius:6px;
font-size:13px;
margin:0 0 20px;
padding:20px;
}
.clearfix:after,
#container:after,
.widget-wrapper:after {
clear:both;
content:"\0020";
display:block;
height:0;
max-height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix,
#container,
.widget-wrapper {
display:inline-block;
}
.clearfix,
#container,
.widget-wrapper {
display:block;
}
Any ideas as how to do this? I know it is possible and probably a simple change, I'm just not adept enough at responsive CSS to see it!
Thanks,
D
[4/9/12 - Updated HTML code to show entire page, with extra Head info (javascript and style sheets) removed]
It's hard to tell because your HTML is not complete (most of the divs are not closed for example). However, both .widget-wrapper and .col-300 have bottom margins which if remove might do the trick.