I'm currently struggling with setting up a responsive web page using the core-media-query element from polymer. I have a simple div container with two child-elements which i want to be aligned horizontally on large screens and vertically on small screens (eg. phones). I played around with the Auto-vertical example from the documentation but didn't get it to work for me.
I also tried a different approach:
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div layout {{phoneScreen ? vertical : horizontal}}>
<div>Alpha</div>
<div>Beta</div>
<div>Gamma</div>
</div>
But this also doesn't seem to work for me.
Anyone have an idea on how to properly use the core-media-query-Element?
Here's a working example. There's a live version at http://jsbin.com/lufewa (I can't embed this using the SO code runner, because you can't resize the output window.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer core-media-query Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="//www.polymer-project.org/0.5/components/core-media-query/core-media-query.html">
<template is="auto-binding">
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div layout vertical?="{{phoneScreen}}" horizontal?="{{!phoneScreen}}">
<div>Alpha</div>
<div>Beta</div>
<div>Gamma</div>
</div>
</template>
</body>
</html>
I don't think the {{phoneScreen ? vertical : horizontal}} you're trying to use will work in general for including/omitting boolean attributes.
My example pretty closely matches what's in the docs, and I'd imagine if you couldn't get it working originally, it might have been because it wasn't part of a Polymer element and wasn't wrapped in a <template is="auto-binding">?
Related
My requirement is to embed a bootstrap style div in few existing sites. Existing sites may have bootstrap or not bootstrap implementations.
Typical html structures below,
<!--Existing site html-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<here thier styles and scripts>
</head>
<body>
<Existing site body>
<!--My embedded div below-->
<div class="my-embedded-div">
<here my bootstrap prefixed style sheet(Ex:[.my-embedded-div allbootstrap styles])>
<all my divs , modals and components>
</div>
</body>
</html>
Issue below,
I am inserting my div in existing bootstrap site(existing site has thier own bootstrap version implementations). This scenario my elements inside my embeds div is responsive in all devices.This scenario fine.
But when i implement with un-bootstrap site(Existing site which dont have bootstrap implementstions). My embed div not responsive at all. Like shown below,
Even i have meta name="viewport" content="width=device-width, initial-scale=1.0 still its not responsive.
How i can resolve this case?
Note: I just handle conflict bootstrap by adding prefix to my parent element and prefixing my bootstrap plugins(Reference link). I am using bootstrap 4.1.3 , also i am not expert in html designs please.
For some reason, my images are being vertically distorted and I can't figure out as to why (See image below).
1
2
3
Long story short what I've done is moved all my single-page-app (SPA) app code/styles and created a server-side rendered codebase. I haven't changed any of the styles or tweaked anything, yet for some reason it's distorting. This is the working styles / code from the SPA app.
4
The only hack that seems to do much of anything is when I take out the
`height:100%;`
on the images, but this has a negative effect with filling out the images which is what I'm wanting.
5
I'm using CSS Modules and have some idea that it could be related to some inheritance issues that I'm unaware of. Thanks in advance, this bug is really been driving me crazy.
I've created a fiddle that represents the working code from the SPA. https://jsfiddle.net/0L0rdk6y/
Fixed this issue by adding
<!DOCTYPE html>
in my render method when returning server side html
Example is
return
<!DOCTYPE html>
<html>
<head>
${renderBaseMeta()}
${helmet.title.toString()}
${helmet.meta.toString()}
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="root">${content}</div>
<script>
window.INITIAL_STATE = ${serialize(store.getState())}
</script>
<script src="bundle.js"></script>
</body>
</html>
;
I am trying to get the foundation framework to link to my HTML page but when I try to use the grid system it does not do anything. I have been looked at a few different tutorials to make sure that I am linking things correctly but I still can not figure out why it wont work. Here is an image of my editor and display side by side. My index.html, css folder, and js folder are all contained within the same directory. Editor and Display
Also attaching my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="device=device-width, initial-scale=1.0"/>
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.min.css"/>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="row">
<div class="large-4 columns" style="background-color: lightblue"><p>Why u wont work.</p></div>
<div class="large-8 collumn" style="background-color: lightsalmon">Not displaying a grid system.</div>
</div>
<!-- include before </body> tag -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
First of all, you have a typo, it says collumn, should be column (or columns).
Second, please make sure you're using the proper grid, Foundation 6.4 has 3 grids available: XY (default), Float and Flex.
The code in your sample belongs to the "traditional" Float Grid, while the default grid in this new version (since June 27th) is XY Grid. So you have two options:
Change your markup according to the new XY grid (take a look to http://foundation.zurb.com/sites/docs/xy-grid.html )
Change the framework to use the Float Grid, now this depends on how you downloaded the framework in first place; if you used the precompiled package, you should go to http://foundation.zurb.com/sites/download.html/#customizeFoundation to customize (basically just selecting the Float Grid and download a new package); if you used the SASS version, go to app.scss remove comment to the line where shows #include foundation-grid;, and comment the one with #include foundation-xy-grid-classes;, then rebuild framework.
Hope this helps.
You have a typo on in your second column. 'large-8 collumn' should read 'large-8 columns' (one less 'l' and one 's').
Instead of
<div class="large-8 collumn" style="background-color: lightsalmon">Not displaying a grid system.</div>
Have:
<div class="large-8 columns" style="background-color: lightsalmon">Not displaying a grid system.</div>
For reference, here is a working pen.
I am encountering a very odd problem with Twitter Bootstrap. I'm using a customised version of Bootstrap downloaded via the 'Customize' page in the Bootstrap website. I'm using a customised version, because I need to use 24 columns instead of 12 in order to give me the variety of column widths I need.
These are the custom values I entered into the Customization form on the Bootstrap website:
#gridColumns 24px
#gridColumnWidth 30px
#gridGutterWidth 10px
I left all the options checked, except for the Responsive checkboxes. The site I'm building will be fixed width only, so I switched off all five of the Responsive options.
After I downloaded the files, I created a very basic HTML page to test the grid system.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="span9" style="background: #F00;">SPAN 9 COLUMN</div>
<div class="span15" style="background: #0F0;">SPAN 15 COLUMN</div>
</div>
</div>
</header>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
The problem is that the browser appears to ignore the CSS widths set on the .row and .spanXX styles that are set in the bootstrap.min.css file. I have checked the CSS file, and the widths are definitely included:
Lines 42-90 of bootstrap.min.css
.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:974;}
.span24{width:974;}
.span23{width:933;}
.span22{width:892;}
.span21{width:851;}
.span20{width:810;}
.span19{width:769;}
.span18{width:728;}
.span17{width:687;}
.span16{width:646;}
.span15{width:605;}
.span14{width:564;}
.span13{width:523;}
.span12{width:482;}
.span11{width:441;}
.span10{width:400;}
.span9{width:359;}
.span8{width:318;}
.span7{width:277;}
.span6{width:236;}
.span5{width:195;}
.span4{width:154;}
.span3{width:113;}
.span2{width:72;}
.span1{width:31;}
.offset24{margin-left:994;}
.offset23{margin-left:953;}
.offset22{margin-left:912;}
.offset21{margin-left:871;}
.offset20{margin-left:830;}
.offset19{margin-left:789;}
.offset18{margin-left:748;}
.offset17{margin-left:707;}
.offset16{margin-left:666;}
.offset15{margin-left:625;}
.offset14{margin-left:584;}
.offset13{margin-left:543;}
.offset12{margin-left:502;}
.offset11{margin-left:461;}
.offset10{margin-left:420;}
.offset9{margin-left:379;}
.offset8{margin-left:338;}
.offset7{margin-left:297;}
.offset6{margin-left:256;}
.offset5{margin-left:215;}
.offset4{margin-left:174;}
.offset3{margin-left:133;}
.offset2{margin-left:92;}
.offset1{margin-left:51;}
Through much trial and error, I discovered that if I completely remove the Doctype line from the top of the HTML file, the page displays correctly! This behaviour is consistent on Firefox (19.02) and IE 10.
When I inspect the rowXX and span DIV tags in Firebug, the CSS is indicated as empty when the DOCTYPE line is included in the HTML - see the attached screengrabs below.
Screengrab from Firefox with Doctype removed from the HTML:
http://tinypic.com/r/24gp1er/6
Screengrab from Firefox with Doctype included in the HTML:
http://tinypic.com/r/13ye05g/6
Thanks in advance for any suggestions to help resolve this problem.
There may be a problem with your CSS file. Firstly #gridColumns 24px should be #gridColumns 24 (ie, specify the number of columns, not a width.
Check the result and the page source of http://fiddle.jshell.net/panchroma/pegjC/show/ or the jsFiddle
You can grab my versions of the custom 24col css from https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.css and https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.min.css
Hope this helps!
I'm using the 960.gs CSS framework on a site and have hit problems almost instantly with IE (7, though I assume 6 is no better).
<html>
<head>
<link rel="stylesheet" href="design/reset.css" />
<link rel="stylesheet" href="design/960.css" />
<link rel="stylesheet" href="design/text.css" />
</head>
<body>
<div class="container_12">abc</div>
</body>
</html>
Given this HTML above (the CSS is just the files bundled with 960), Firefox and Chrome centre the grid, whereas IE pushes it to the left.
I've used 960 before without any issues, so I think I must just be doing something really stupid. Can anyone help?
You need to include a DOCTYPE at the beginning of your HTML, otherwise the CSS won't come out right in IE. You can use the one from the demo file that came with the 960 package.
It should be noted that there can not be anything in front of the DOCTYPE-tag.
For example, the default Netbeans HTML-template has a few lines of HTML comments before DOCTYPE, so be sure to delete that in order to get 960.gs to work.