I am quite new to zurb, infact just found it yesterday. I am liking it so far, but I can't seem to figure out something simple. I can do this using css but I wanted to know if there is another out-of-the-box approach to this.
I want to be able to set the width and height of a text area. The way it is on this fiddle.
http://jsfiddle.net/bwZbh/
`<textarea id="content" placeholder="Nothing yet!!" class="large-12" style="margin: 0px -275.672px 0px 0px; height: 319px; width: 580px;"
it's a small bug in foundation
open up your css, and add the following
textarea {
height: auto;
}
then you will be able to style your textarea as you wish, and rows will work as well
example
<textarea rows="5" name="textareaname" cols="50"></textarea>
UPDATE:
This bug is now fixed in Foundation 5
Related
I'm trying to add a custom media query to Interchange for retina laptops, but it doesn't seem to be picking up. I'm sure something is in the wrong place or there's wrong syntax somewhere. Any ideas?
HTML:
<div
class="responsive-bg"
data-interchange="
[http://brycekirk.com/man-mountain/small.jpg, small],
[http://brycekirk.com/man-mountain/medium.jpg, medium],
[http://brycekirk.com/man-mountain/large.jpg, large],
[http://brycekirk.com/man-mountain/xlarge.jpg, xlarge]
[http://brycekirk.com/man-mountain/largeretina.jpg, largeretina]"></div>
CSS:
div.responsive-bg {height: 100vh; width: 100%; position: absolute; }
JS:
$(document).foundation();
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';
Interchange Documentation
Codepen
It is NOT working because you are add custom query after the Foundation has initialize, you have to use Foundation reflow or you can set the media query before init code.
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';
$(document).foundation();
I have a fixed menu, I always want it at the top of my page:
.fixed-menu{
position: fixed;
height: 75px;
width: 100%;
background: tomato;
}
I also want an off canvas menu.
The problem I am having is that when you open the off canvas menu, the fixed menu is no longer fixed.
After playing with the issue, it's something to do with 3d transform, but I cannot find a fix.
Here is a JSFiddle
If you do it this way, the page is essentially locked when the menu is open http://codepen.io/rafibomb/pen/hApKk
Basically wrapping the content and making it overflowY: scroll;
article {
overflow-y: auto;
}
Sorry to bother with such a beginner's question but I simply can't get this 100% height thing to work. Here is the situation (sorry, developing locally so no link):
I have a wrapping container that contains two floating elements. I followed all steps that might resolve the 100% issue, such as:
html, body {
height: 100%;
background: url(../img/bg.png);
font-family: 'SansationRegular', Helvetica;
}
.wrap {
width: 100%;
height: 100%;
height: auto !important; (apparently this fixes the issue in Chrome)
margin:40px 0px 0px 0px;
padding:0;
}
Both floating div's (sidebar and content) have height: 100% and I also added a third div container to clear the floating elements.
Still, when I add content to the content div the sidebar does not "grow" automatically. I feel I tried everything but it won't work.
Any ideas/hints are highly appreciated at this point! :)
Many thanks in advance!
P.S. I use Twitter Bootstrap as well in case that helps to solve my problem
Here's a basic example which shows how to do what you're trying to do. You should be able to take this code and adapt it to your own code.
http://jsfiddle.net/QXZuy/1/
<div class="wrap">
<div class="sidebar"></div>
<div class="content"></div>
</div>
html, body {
height:100%;
}
.wrap {
height:100%;
width:100%;
display:table;
overflow:auto;
background:#ccc;
}
.sidebar {
display:table-cell;
width:25%;
background-color:blue;
}
.content {
display:table-cell;
width:75%;
background-color:red;
}
When the user clicks the like button a comment box pops up that has a width of 450px. This is too large for the space I have available. As far as I can tell, this comment box does not seem to respond to the "data-width" property I had set here:
<div class="fb-like" data-send="false" data-layout="button_count" data-width="290" data-show-faces="false">
...so I had been forcing it with my css to this size:
iframe.fb_ltr { max-width:290px !important;}
All was good until it seems something just changed and this is no longer viable because the width of 450px is now being set within the iframe with this new? class:
<div class="fbpf pluginLikeFlyout pluginLikeFlyoutFull pluginLikeFlyoutFullButton">
.pluginLikeFlyoutFull {
top: 24px;
width: 450px;
}
Bottom line, is there another way to set the width of the comment box so it doesn't default to 450px?
Thanks,
Matt
I added this to my css:
div.fb-like.fb_iframe_widget > span {
width: 100% !important;
}
div.fb-like.fb_iframe_widget{
width: 100%;
}
I'm trying to customize the facebook like box, and I need to alter the image size slightly. I've been reading around and it seems to be difficult. Does anyone know a way?
You can change the css by adding your own style for
.connect_widget .connect_widget_image{
width: ##px !important;
height: ##px !important;
}
and also
.connect_widget .connect_widget_sample_connection{
width: ##px !important;
}
Did not try but that how I would do it.
Although I think it's not very recommended to change CSS of like button...