I have custom checkboxes, and the content is jumping when I click between checked and unchecked states. How can I stop this from happening? Here's my code:
CSS:
input[type=checkbox] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border-radius:4px;
border:1px solid #cecece;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
font-size: 15px;
color: red;
text-align: center;
line-height: 15px;
}
HTML:
<input id="checkbox1" type="checkbox" class="checkbox" name="lists[Fortune Daily]" />
<label for="checkbox1"><img class="list" src="http://email-media.s3.amazonaws.com/fortune/fortunef_55x50.png" /> <span>Fortune Daily</span>
</label>
Thank you in advance!
It's no problem to correct the jumping. See the below code:
input[type=checkbox] {
display: none;
}
label {
font-size: 15px;
vertical-align: top;
}
label:before {
content: "\2713";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border-radius:4px;
border:1px solid #cecece;
font-size: 15px;
color: white;
text-align: center;
line-height: 15px;
}
input[type=checkbox]:checked + label:before {
color: red;
}
<input id="checkbox1" type="checkbox" class="checkbox" name="lists[Fortune Daily]" />
<label for="checkbox1"><img class="list" src="http://email-media.s3.amazonaws.com/fortune/fortunef_55x50.png" /> <span>Fortune Daily</span>
</label>
However, I wouldn't recommend you to continue with this solution, because it's seems to be impossible to make a correct vertical alignment of the elements here. For example, instead of label with 'before' you could realize it by an outside div with display:table property and three inside element with display:table-cell. At least you will have a full control on elements' placement not dependent on font size.
Related
been struggling for some time now.
I'm trying to give my welcome-section the same size as the viewport, but I just can't seem to get it done, whatever I do...
Then also, the bottom is hidden under the safari menu when I check the mobile version. I used the same formula as I used before on another project, but it doesn't work here.
Can somebody clarify, please?
Many thanks in advance!
body {
background: linear-gradient(to top right, grey, black);
height: 100%;
}
#navbar {
position: fixed;
width: 100%;
display: block-inline;
top: 0;
left: 0;
background: #db0b15;
}
.navbar {
text-align: right;
margin-right: 10px;
}
.navbar-item {
display: inline;
padding-left: 30px;
color: white;
font-size: 20px;
text-decoration: none;
text-align: center;
}
welcome-section {
height: 100%;
width: 100%;
}
a {
color: white;
text-decoration: ;
text-align: center;
}
h1 {
padding-top: 150px;
text-align: center;
color: white;
}
p {
color: white;
text-align: center;
}
.subheader {
font-size: 30px;
text-decoration: underline;
padding-top: 50px;
padding-bottom: 20px;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 150px 150px;
grid-column-gap: 70px;
grid-row-gap: 50px;
justify-content: center;
align-content: center;
}
.project-img {
height: 120%;
width: 120%;
}
.icon {
padding-right: 20px;
padding-left: 20px;
}
.profile-link: {
color: blue;
}
#welcome-section {
height: 100vh;
}
#media only screen and (max-width: 600px) {
.project-img {
max-width: 100%;
max-height: 100%;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 160px 160px;
grid-template-rows: 120px 120px;
grid-column-gap: 5px;
grid-row-gap: 5px;
justify-content: center;
align-content: center;
margin-right: 10px;
}
#media screen and (max-width: 768px) {
_::-webkit-full-page-media,
_:future,
:root .safari_only {
padding-bottom: 170px; //resize
}
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1c24d3937a.js" crossorigin="anonymous"></script>
<title id="title">Personal Portfolio - Iwan Van den Broeck</title>
</head>
<body id="body">
<navbar id="navbar">
<ul class="navbar">
<li class="navbar-item">Welcome</li>
<li class="navbar-item">Projects</li>
<li class="navbar-item">Contact</li>
</ul>
</navbar>
<welcome-section id="welcome-section" class="welcome-section">
<h1>Welcome to my Portfolio.<br><br>I am Iwan<br><br> and I'm a Web Developer<br><br></h1>
</welcome-section>
<projects-section id="projects">
<p class="subheader">These are some of my projects:</p>
<project-list class="project-list">
<a id="tribute-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/YzZoXvY" target="blank" alt="link to Steve Jobs tribute page"><img src="https://drive.google.com/thumbnail?id=1pTGPtU4oKYReRbMnAPkeC1ll-Nor0dSo" alt="screenshot of tribute page" class="project-img"></a>
<a id="survey-form" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/mdWZNPd" target="blank" alt="link to AirAsia customer satisfaction survey"><img src="https://drive.google.com/thumbnail?id=1Sclylussw2JNXSSlD3qs7xABHVKx_0LV" alt="screenshot of survey form" class="project-img"></a>
<a id="product-landing-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/NWjKdre" target="blank" alt="link to Apple landing page"><img src="https://drive.google.com/thumbnail?id=1RY4MuLY8knZk6pogcMwApjJ-fYOtTUCu" alt="screenshot of landing page" class="project-img"></a>
<a id="technical-documentation-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/BaRaRWp" target="blank" alt="link to JS technical documentation page"><img src="https://drive.google.com/thumbnail?id=1Pxp17-rmWZqD0or3lmF2UvtPbKuCyC6l" alt="screenshot of technical documentation page" class="project-img"></a>
</project-list>
</projects-section>
<contact-section id="contact">
<p class="subheader">Contact me:</p>
<p>Let's do some projects together! Contact me for more information.</p>
<p id="contact-links">
<p>
<i class="fas fa-phone-square-alt icon"> Call me</i>
<i class="fas fa-envelope-square icon"> Email me</i>
<i class="fab fa-linkedin icon"> Linkedin</i>
</p>
<p>Click here to visit my Profile
</p>
</contact-section>
</body>
</html>
You could set your section to height: 100vh; to make it the full height of your viewport.
In combination with display: block; it will work.
welcome-section {
height: 100vh;
width: 100%;
display: block;
}
I experience the following strange behavior in ui-bootstrap and angular 1.4. When I put a footable table directive inside a customized bootstrap panel, called hpanel, the footable initially takes more place than the panel itself:
But if I resize the screen (e.g. by collapsing the Developer Tools panel here), the footable directive draws itself and fits within panel:
Importantly, I've experienced similar problems with angular-c3 charts directives (they load incorrectly, exceeding the size of hpanel, but upon page resize behave fine), so it's probably not just a broken directive.
Have you seen anything similar?
DETAILS:
Below is an HTML template that represents the non-functional part of page. There we have an hpanel and within it a table with angular-footable directive ^1.0.3, applied to it.
Here's the template (toolList.html):
<div class="content">
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-heading">
<div class="panel-tools">
<a class="showhide"><i class="fa fa-chevron-up"></i></a>
<a class="closebox"><i class="fa fa-times"></i></a>
</div>
Available tools.
</div>
<div class="panel-body">
<input type="text" class="form-control input-sm m-b-md" id="filter" placeholder="Search in table">
<table id="example1" class="footable table table-stripped toggle-arrow-tiny" data-page-size="8" data-filter=#filter>
<thead>
<tr>
<th data-toggle="true">Id</th>
<th>Class</th>
<th>Label</th>
<th>Description</th>
<th data-hide="all">Owner</th>
<th data-hide="all">Contributor</th>
<th data-hide="all">Inputs</th>
<th data-hide="all">Outputs</th>
<th data-hide="all">Base command</th>
<th data-hide="all">Arguments</th>
<th data-hide="all">Requirements</th>
<th data-hide="all">Hints</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tool in vm.tools">
<td><a ui-sref="tool-detail({id: tool.id})">{{tool.id}}</a></td>
<td>{{tool.tool_class}}</td>
<td>{{tool.label}}</td>
<td>{{tool.description}}</td>
<td>{{tool.owner}}</td>
<td>{{tool.contributor}}</td>
<td>{{tool.baseCommand}}</td>
<td>{{tool.arguments}}</td>
<td>{{tool.requirements}}</td>
<td>{{tool.hints}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
The footable directive is meant to hide some columns of the table and show them upon click on a table row. It also provides pagination. It doesn't seem to work upon page load, but when I resize the page and the size of screen crosses the media-type margin (so that from medium-size screen it becomes large screen in bootstrap css terms), pagination buttons appear and columns that are meant to be hidden are hidden.
Here's how I import the footable directive in my main module app.js:
require("footable/js/footable");
require("footable/js/footable.filter");
require("footable/js/footable.striping");
require("footable/js/footable.sort");
require("footable/js/footable.paginate");
require("footable/css/footable.core.css")
require("angular-footable");
angular.module("app", [
...,
"ui.footable",
])
I use webpack to load all those modules and bower to install the dependencies.
hpanel is just a scss class, here is its definition:
/* Panels */
.hpanel > .panel-heading {
color: inherit;
font-weight: 600;
padding: 10px 4px;
transition: all .3s;
border: 1px solid transparent;
}
.hpanel .hbuilt.panel-heading {
border-bottom: none;
}
.hpanel > .panel-footer, .hpanel > .panel-section {
color: inherit;
border: 1px solid $border-color;
border-top: none;
font-size: 90%;
background: $color-bright;
padding: 10px 15px;
}
.hpanel.panel-collapse > .panel-heading, .hpanel .hbuilt {
background: #fff;
border-color: $border-color;
border: 1px solid $border-color;
padding: 10px 10px;
border-radius: 2px;
}
.hpanel .panel-body {
background: #fff;
border: 1px solid $border-color;
border-radius: 2px;
padding: 20px;
position: relative;
}
.hpanel.panel-group .panel-body:first-child {
border-top: 1px solid $border-color;
}
.hpanel.panel-group .panel-body {
border-top: none;
}
.panel-collapse .panel-body {
border: none;
}
.hpanel {
background-color: none;
border: none;
box-shadow: none;
margin-bottom: 25px;
}
.panel-tools {
display: inline-block;
float: right;
margin-top: 0;
padding: 0;
position: relative;
}
.hpanel .alert {
margin-bottom: 0;
border-radius: 0;
border: 1px solid $border-color;
border-bottom: none;
}
.panel-tools a {
margin-left: 5px;
color: lighten($color-text, 20%);
cursor: pointer;
}
.hpanel.hgreen .panel-body {
border-top: 2px solid $color-green;
}
.hpanel.hblue .panel-body {
border-top: 2px solid $color-blue;
}
.hpanel.hyellow .panel-body {
border-top: 2px solid $color-yellow;
}
.hpanel.hviolet .panel-body {
border-top: 2px solid $color-violet;
}
.hpanel.horange .panel-body {
border-top: 2px solid $color-orange;
}
.hpanel.hred .panel-body {
border-top: 2px solid $color-red;
}
.hpanel.hreddeep .panel-body {
border-top: 2px solid $color-red-deep;
}
.hpanel.hnavyblue .panel-body {
border-top: 2px solid $color-navy-blue;
}
.hpanel.hbggreen .panel-body {
background: $color-green;
color: #fff;
border:none;
}
.hpanel.hbgblue .panel-body {
background: $color-blue;
color: #fff;
border:none;
}
.hpanel.hbgyellow .panel-body {
background: $color-yellow;
color: #fff;
border:none;
}
.hpanel.hbgviolet .panel-body {
background: $color-violet;
color: #fff;
border:none;
}
.hpanel.hbgorange .panel-body {
background: $color-orange;
color: #fff;
border:none;
}
.hpanel.hbgred .panel-body {
background: $color-red;
color: #fff;
border:none;
}
.hpanel.hbgreddeep .panel-body {
background: $color-red-deep;
color: #fff;
border:none;
}
.hpanel.hbgnavyblue .panel-body {
background: $color-navy-blue;
color: #fff;
border:none;
}
.panel-group .panel-heading {
background-color: $color-bright;
}
.small-header .hpanel {
margin-bottom: 0;
}
.small-header {
padding: 0 !important;
}
.small-header .panel-body {
padding: 15px 25px;
border-right: none;
border-left: none;
border-top: none;
border-radius: 0;
// background: $color-bright;
}
.panel-body h5, .panel-body h4 {
font-weight: 600;
}
.small-header .panel-body h2 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 0 0;
}
.small-header .panel-body small {
color: lighten($color-text, 10%);
}
.hbreadcrumb {
padding: 2px 0px;
margin-top: 6px;
margin-bottom: 0px;
list-style: none;
background-color: #fff;
font-size: 11px;
> li {
display: inline-block;
+ li:before {
padding: 0 5px;
color: $color-navy-blue;
}
}
> .active {
color: lighten($color-text,20%);
}
}
.wrapper {
padding: 10px 20px;
}
.hpanel.collapsed .panel-body, .hpanel.collapsed .panel-footer {
display: none;
}
.hpanel.collapsed .fa.fa-chevron-up:before {
content: "\f078";
}
.hpanel.collapsed .fa.fa-chevron-down:before {
content: "\f077";
}
.hpanel.collapsed.panel-collapse .panel-body {
border-width: 0 1px 1px 1px;
border-color: $border-color;
border-style: solid;
}
.hpanel.collapsed .hbuilt.panel-heading {
border-bottom: 1px solid $border-color;
}
body.fullscreen-panel-mode {
overflow-y: hidden;
}
.hpanel.fullscreen {
z-index: 2030;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
margin-bottom: 0;
}
.hpanel.fullscreen .showhide {
display: none;
}
.hpanel.fullscreen .panel-body {
min-height: calc(100% - 77px);
}
Here's tool.module.js file, which animates the template:
import angular from "angular";
var ToolResource = require("workflow/tool/tool.service");
class ToolListController {
// #ngInject
constructor($location, $stateParams, $state, tools) {
this.$location = $location;
this.$state = $state;
this.$stateParams = $stateParams;
this.tools = tools;
}
}
// #ngInject
function routesList($stateProvider) {
$stateProvider.state("tool-list", {
url: "/tool",
parent: "layout",
templateUrl: "/app/workflow/tool/toolList.html",
controller: "ToolListController",
controllerAs: "vm",
data: {
pageTitle: "Tool",
pareDesc: "List of tools, available for workflow construction.",
},
resolve: {
ToolResource: "ToolResource",
tools: function(ToolResource) {
return ToolResource.query().$promise;
}
}
});
}
module.exports = angular.module("tool", [])
.service('ToolResource', ToolResource)
.controller('ToolListController', ToolListController)
.config(routesList);
tool.service.js:
module.exports = function ToolResource($resource) {
return $resource('/api/tool/:id', {id: '#id'});
}
ANSWER:
Community is awesome!
1.5 years ago this directive was created
12 days ago this bug was fixed by Alexryan in his fork
10 days ago I posted this question on StackOverflow
8 days ago I placed a bounty on this question
7 days ago ziscloud approved pull request
in the morning today the bounty expired and in the nick of time Walfrat found out that the bug was fixed
So, yes, it was a bug in the directive that made it draw itself before getting the data from server. With the bugfix I just added load-when="vm.tools" attribute to the directive and it works fine now.
Thank you, Alexryan, ziscloud, Walfrat and other commenters/answerers. StackOverflow and Github just made my day!
Are you using this directive ? https://github.com/ziscloud/angular-footable/blob/master/src/angular-footable.js. It's an homemade (meaning not done by the editor of the footable) directive so it can be not rightly implemented to works with Angularjs.
Looking at the code it seems that you have to use an attribute load-when if you want to delay the initialization of the grid even though you use the resolve attribute in your state, it can be worth to test it.load-when shall be an empty array at start an will trigger the load after the array won't be empty anymore, but the data binded won't be used for the initialization from what i saw.
Note : i wasn't able to set a proper plnkr myself, i don't know the version you're using (and with which jQuery version) and online links doesn't seems available.
Since you are asynchronously loading data (as was mentioned in the comments) your html is rendered prior to it having any data in it. This means the directive may be fired too early (if it is attempting to adapt based on data). Typically, in this scenario, you'll want to throw an ng-if on the portion of your html that is dependent on the data loading (and show a loading gif or something in its place). You can either run the ng-if off of the data itself being defined, or maintain a separate boolean that you set once the promise is resolved.
I wasn't able to find helpfull answer to the following problem.
Angular $resource POST/PUT (both) generate 405.0 - Method Not Allowed error on a simple WebAPI calls. Get works just fine. App is an MVC with WebAPI running in IIS 7.5. When I try to run a sample locally - works fine. It's not a CORS issue and Auth was stripped out.
PUT http://portal.local.com/api/products/5 405 (Method Not Allowed)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IIS 7.5 Detailed Error - 405.0 - Method Not Allowed</title>
<style type="text/css">
<!-- body {
margin: 0;
font-size: .7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #CBE1EF;
}
code {
margin: 0;
color: #006600;
font-size: 1.1em;
font-weight: bold;
}
.config_source code {
font-size: .8em;
color: #000000;
}
pre {
margin: 0;
font-size: 1.4em;
word-wrap: break-word;
}
ul,
ol {
margin: 10px 0 10px 40px;
}
ul.first,
ol.first {
margin-top: 5px;
}
fieldset {
padding: 0 15px 10px 15px;
}
.summary-container fieldset {
padding-bottom: 5px;
margin-top: 4px;
}
legend.no-expand-all {
padding: 2px 15px 4px 10px;
margin: 0 0 0 -12px;
}
legend {
color: #333333;
padding: 4px 15px 4px 10px;
margin: 4px 0 8px -12px;
_margin-top: 0px;
border-top: 1px solid #EDEDED;
border-left: 1px solid #EDEDED;
border-right: 1px solid #969696;
border-bottom: 1px solid #969696;
background: #E7ECF0;
font-weight: bold;
font-size: 1em;
}
a:link,
a:visited {
color: #007EFF;
font-weight: bold;
}
a:hover {
text-decoration: none;
}
h1 {
font-size: 2.4em;
margin: 0;
color: #FFF;
}
h2 {
font-size: 1.7em;
margin: 0;
color: #CC0000;
}
h3 {
font-size: 1.4em;
margin: 10px 0 0 0;
color: #CC0000;
}
h4 {
font-size: 1.2em;
margin: 10px 0 5px 0;
}
#header {
width: 96%;
margin: 0 0 0 0;
padding: 6px 2% 6px 2%;
font-family: "trebuchet MS", Verdana, sans-serif;
color: #FFF;
background-color: #5C87B2;
}
#content {
margin: 0 0 0 2%;
position: relative;
}
.summary-container,
.content-container {
background: #FFF;
width: 96%;
margin-top: 8px;
padding: 10px;
position: relative;
}
.config_source {
background: #fff5c4;
}
.content-container p {
margin: 0 0 10px 0;
}
#details-left {
width: 35%;
float: left;
margin-right: 2%;
}
#details-right {
width: 63%;
float: left;
overflow: hidden;
}
#server_version {
width: 96%;
_height: 1px;
min-height: 1px;
margin: 0 0 5px 0;
padding: 11px 2% 8px 2%;
color: #FFFFFF;
background-color: #5A7FA5;
border-bottom: 1px solid #C1CFDD;
border-top: 1px solid #4A6C8E;
font-weight: normal;
font-size: 1em;
color: #FFF;
text-align: right;
}
#server_version p {
margin: 5px 0;
}
table {
margin: 4px 0 4px 0;
width: 100%;
border: none;
}
td,
th {
vertical-align: top;
padding: 3px 0;
text-align: left;
font-weight: bold;
border: none;
}
th {
width: 30%;
text-align: right;
padding-right: 2%;
font-weight: normal;
}
thead th {
background-color: #ebebeb;
width: 25%;
}
#details-right th {
width: 20%;
}
table tr.alt td,
table tr.alt th {
background-color: #ebebeb;
}
.highlight-code {
color: #CC0000;
font-weight: bold;
font-style: italic;
}
.clear {
clear: both;
}
.preferred {
padding: 0 5px 2px 5px;
font-weight: normal;
background: #006633;
color: #FFF;
font-size: .8em;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>Server Error in Application "LITE_PORTAL"</h1>
</div>
<div id="server_version">
<p>Internet Information Services 7.5</p>
</div>
<div id="content">
<div class="content-container">
<fieldset>
<legend>Error Summary</legend>
<h2>HTTP Error 405.0 - Method Not Allowed</h2>
<h3>The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used.</h3>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<legend>Detailed Error Information</legend>
<div id="details-left">
<table border="0" cellpadding="0" cellspacing="0">
<tr class="alt">
<th>Module</th>
<td>WebDAVModule</td>
</tr>
<tr>
<th>Notification</th>
<td>MapRequestHandler</td>
</tr>
<tr class="alt">
<th>Handler</th>
<td>WebDAV</td>
</tr>
<tr>
<th>Error Code</th>
<td>0x00000000</td>
</tr>
</table>
</div>
<div id="details-right">
<table border="0" cellpadding="0" cellspacing="0">
<tr class="alt">
<th>Requested URL</th>
<td>http://portal.local.com:80/api/products/5</td>
</tr>
<tr>
<th>Physical Path</th>
<td>C:\_Dev\Applications\liteangular_portal\LiteAngular\api\products\5</td>
</tr>
<tr class="alt">
<th>Logon Method</th>
<td>Anonymous</td>
</tr>
<tr>
<th>Logon User</th>
<td>Anonymous</td>
</tr>
</table>
<div class="clear"></div>
</div>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<legend>Most likely causes:</legend>
<ul>
<li>The request sent to the Web server used an HTTP verb that is not allowed by the module configured to handle the request.</li>
<li>A request was sent to the server that contained an invalid HTTP verb.</li>
<li>The request is for static content and contains an HTTP verb other than GET or HEAD.</li>
<li>A request was sent to a virtual directory using the HTTP verb POST and the default document is a static file that does not support HTTP verbs other than GET or HEAD.</li>
</ul>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<legend>Things you can try:</legend>
<ul>
<li>Verify the list of verbs enabled for the module handler this request was sent to, and ensure that this verb should be allowed for the Web site.</li>
<li>Check the IIS log file to see which verb is not allowed for the request.</li>
<li>Create a tracing rule to track failed requests for this HTTP status code. For more information about creating a tracing rule for failed requests, click here.</li>
</ul>
</fieldset>
</div>
<div class="content-container">
<fieldset>
<legend>Links and More Information</legend>
This error means that the request sent to the Web server contained an HTTP verb that is not allowed by the configured module handler for the request.
<p>View more information »
</p>
</fieldset>
</div>
</div>
</body>
</html>
I can make ajax calls to this api methods, so they should be fine. I've tried adding/removing Http ResponseType attributes to them all to no luck. Can some web/angular guru shed some light on this problem? Is it something in IIS? I found this: https://support.microsoft.com/en-us/kb/942051 and this http://www.c-sharpcorner.com/Blogs/47627/wepapi-http-error-405-0-method-not-allowed.aspx
But messing with the IIS apphost config seems hackish. And I'm not familiar enough with it to make educated decision.
EDIT: My config:
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Accept, Authorization" />
<add name="Access-Control-Allow-Credentials" value="true" />
<add name="Access-Control-Allow-Methods" value="POST,GET,PUT,DELETE,OPTIONS" />
<add name="Access-Control-Max-Age" value="1728000" />
</customHeaders>
Thanks in advance!
P.S. It looks like the problem has to do with WebDAVModule:
Notification MapRequestHandler
Handler WebDAV
Error Code 0x0000000
Anyone knows what it might be, though? Anyone?...
It turned out removing WebDAV handler and WebDAVModule took care of the problem:
<handlers>
<remove name="WebDAV" />
</handlers>
<modules runAllManagedModulesForAllRequests="true">
<remove name="WebDAVModule" />
</modules>
I am trying to make an image respond to the browser size, so that when the browser is smaller, the image responds so that there is no scrolling involved. I found a similar question here How can I resize an image dynamically with CSS as the browser width/height changes?, but I'm not able to make that solution work. What am I missing?
I'm including my code below - I am using Wordpress, so it puts a "p" tag around my image automatically, wrapping my image in a paragraph. Also, I'm not sure if I'm including too much code for this purpose, but I wanted to make sure it was all there in case there's an error in a strange place that could be causing the problem...
Here is my html:
<body>
<div id="pop_up_page">
<div class="content_well_pop">
<div class="content_pop">
<div class="portfolio_workspace_9">
<h2>Here's the Header</h2>
</div>
<div class="portfolio_workspace_8">
<p>
<img src="heres_the_image"/>
</p>
</div>
</div>
</div>
</div>
</body>
Here's my CSS:
body {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
}
#pop_up_page {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
.content_well_pop {
left: 0;
width: 100%;
}
.portfolio_workspace_9 {
width: 1000px;
margin: 15px 0 0 0px;
position: relative;
float: left;
display:block;}
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;}
p{font-family: "Franklin Gothic Book";
font-size: 15px;
color: #757372;
display: block;
}
.portfolio_workspace_8 img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}
Thanks
this css rule here:
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;
}
You are specifiying a width on the parent container of the image. Change it to max-width instead of width.
Here is an javascrpt-free, crossbrowser-stable solution you are looking for. I have implemented it in past on that website: http://www.gardinenhaus-morgen.de/.
HTML:
<html>
<body>
<div id="page-wrapper">
<div id="inner-wrapper">
<!-- your content here -->
</div>
</div>
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="background" src="<bild>" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
#bg div
{
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
#bg td
{
vertical-align: middle;
text-align: center;
}
#page-wrapper
{
position: absolute;
top: 0;
left: 0;
z-index: 70;
overflow: auto;
width: 100%;
height: 100%;
}
#inner-wrapper
{
margin: 30px auto;
width: 1000px;
}
I am working with a to client fix a problem on a single page. On all pages, the footer content is positioned and displays properly. However, on this page, when viewed in IE7 the footer content moves up into the body area. The only difference between this page and all the other is the presence of a WooFoo contact form.
I have tried a zillion different ways to bump that content down, but it will not respond to padding or margin adjustments.
Here is the HTML:
<div id="footer">
<div class="width">
<ul class="footerNav">
<li><a class="bFB" href="http://www.facebook.com/pages/Charlotte-NC/The-Idea-People/124178504825" target="_blank" title="The Idea People Charlotte web design facebook">FaceBook</a></li>
<li><a class="bTW" href="http://twitter.com/theideapeople" target="_blank" title="The Idea People Charlotte web design twitter">Twitter</a></li>
<li><a class="bEM" href="http://feedburner.google.com/fb/a/mailverify?uri=theideapeople" target="_blank" title="The Idea People Charlotte web design email">FeedBurner</a></li>
<li><a class="bRSS" href="http://feeds.feedburner.com/theideapeople" target="_blank" title="The Idea People Charlotte web design rss">RSS</a></li>
</ul>
<br class="clear" />
<ul class="termNav">
<li>Terms of Use |</li>
<li>Privacy Policy</li>
</ul>
<p class="copyright">©2010 The Idea People. All Rights Reserved.</p>
<p class="company">Charlotte, NC web design, graphic design and internet marketing</p>
<div id="address"> <strong>The Idea People</strong><br />
4424 Taggart Creek Rd., Suite 111<br />
Charlotte, NC 28208 </div>
<div id="phone"> <strong>T</strong> 704.398.4437<br />
<strong>F</strong> 704.398.4438<br />
<strong>E</strong> ideas#theideapeople.com </div>
<br class="clear"/>
</div>
</div>
Here is the CSS:
#footer { clear: both; background: url(../images/bg_footer.png) 0 0 no-repeat; padding: 10px 0 76px; color: #ccc; font-size: 14px; font-weight: bold; }
#footer .width { position: relative; margin: 0 auto; width: 960px; }
.footerNav { width: 300px; height: 30px; font-size: 15px; position: relative; top: 5px; left: 770px; }
.footerNav li { position:relative; float:left; margin:0; }
.footerNav li a { color: #fff; display: block; text-decoration: none; font-weight: bold; text-indent: -9999px; }
.footerNav li a.bRSS { background: url(../images/icon-rss.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bFB { background: url(../images/icon-facebook.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bTW { background: url(../images/icon-twitter.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bEM { background: url(../images/icon-email.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
Any help in resolving this will be greatly appreciated!
Thanks.
The .footerNav element is causing overflow and busting the layout. I even get horizontal scrollbars on my machine, on all browsers.
The following CSS seems to fix it:
.footerNav
{
/* Add clear and float
*/
clear: left;
float: right;
font-size: 15px;
height: 30px;
top: 5px;
/* Delete these 3
position: relative;
left: 770px;
width: 300px;
*/
}