zurb-foundation

Different errors for a single input in Foundation Abide / AngularJS

由 余生颓废 提交于 2019-12-24 14:23:10
问题 I'm trying to setup a form with Foundation and I'm finding it difficult to do more than basic error checking. Lets say I have the following input field: <input pattern="username" required type="text" placeholder="username" /> Assuming the username regex is a custom pattern something along the lines of this: ^[A-Za-z]{3,6}$ What I need to be able to do is show different errors depending on whether the string in the input field is above or below that character limit. As far as I can tell

Error “Invalid UTF-8” when compiling sass with @import

由 丶灬走出姿态 提交于 2019-12-24 11:35:14
问题 There's my project with the folowing structire: project assets scripts styles app.scss bower_components node_modules public css app.css js bower.json gulpfile.js package.json I use gulp-sass to compile app.scss to app.css and i want to include foundation in app.scss gulp.task('styles', function() { return gulp.src(path.src.styles) .pipe(sass({ includePaths: ['./bower_components/foundation/scss'] })) .pipe(concat('app.css')) .pipe(gulp.dest(path.public.styles)); }) Then I white in app.scss

Can't get image to align to bottom of div with Foundation block-grid class

由 别说谁变了你拦得住时间么 提交于 2019-12-24 10:45:30
问题 I am using Foundation 4.0 framework, and I have a block grid I am trying to create. Each li contains an image with a fixed width but the height is not the same for all images. I need the images and text to align to the bottom of the div. Below is my html. I have tried changing the parent div to position relative and position absolute, but cannot get anything to work. Any help is greatly appreciated. CSS: li { display:inline-block; vertical-align: bottom; text-align: center; } img { max-width:

Pass timeout to Foundation 6 loading

由 橙三吉。 提交于 2019-12-24 08:58:25
问题 I'm using Angular2 and Foundation 6 for creating a webapp. I generate by myself scripts and styles from Foundation .scss files. Here is my index.html <html> <head> <title>MyApp</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="scripts/foundation.min.js"></script> <link rel="stylesheet" href="styles/foundation.css"> </head> <body> <my-app

Slick slider - Adding active class to first < a > in currently open foundation tab

由 自古美人都是妖i 提交于 2019-12-24 08:19:52
问题 Trying to add an active class to the first a tag within a selected tab. My code is adding the active class to the very first element in slide one and doing exactly what I want within slider one but then when I change tabs it is still adding the active class to the navigation on the first slider not slider 2 that is in view. JS $(document).ready(function(){ var $slideshow = $(".slider").slick({ dots: false, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true, swipeToSlide: true,

Use image for radio button selection in primefaces selectOneRadio

由 假如想象 提交于 2019-12-24 06:38:13
问题 I am trying to build UI using primefaces selectOneRadio. Currently I need to be able to display 5 images which are actually radio buttons and the image gets a blue border when selected. The actual radio button is hidden. I tried primefaces selectOneRadio with custom layout but clicking on image does not select the radio button and the button is also visible. Here is my code. I use foundation for css. <ul class="small-block-grid-5"> <p:selectOneRadio value="scooter" id="vehicleType" layout=

Foundation 5 Grid Push Pull

由 删除回忆录丶 提交于 2019-12-24 02:43:57
问题 I'm using Foundation 5 and I'm trying to achieve the following DIV layout on a mobile screen: -------------------- | A | -------------------- | B | -------------------- | C | -------------------- | D | -------------------- | E | -------------------- and I'd like this to display as the following on a desktop screen: -------------------------------- | | | A | | | -------------------------------- | | | | B | | | | | -------------------- E | | | | | C | | | | | -------------------------------- |

Toggle mobile view in Foundation using CSS class or JS

由 给你一囗甜甜゛ 提交于 2019-12-24 01:54:43
问题 I am trying to toggle the mobile view for foundation framework. I found the relevant section of css in the foundation.css file... @media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; } .column, .columns { width: auto !important; float: none; } ... more code here ... .push

how to configure foundation joyride plugin callbacks

由 不想你离开。 提交于 2019-12-24 01:44:57
问题 I'm using foundation 4.3.1. This is my code: $(document).foundation('joyride', { postRideCallback: function () { alert('test') } }); $(document).foundation('joyride','start'); I can't seem to get it to alert('test') It goes through the ride, but then nothing. Not sure what I'm doing wrong here. The docs aren't clear at all on how or where to put the config options, they only provide a list of what they are. Why won't the postRideCallback trigger? 回答1: Okay, so I had to bang my head against

How to get textcolumns to auto-wrap in Zurb Foundation v3.2.5?

由 依然范特西╮ 提交于 2019-12-23 04:45:27
问题 I've checked the documentation but cannot find out how to have Zurb Foundation auto-wrap text in columns like Word does, example here: http://note.io/1aunnZM Can anyone help, please? 回答1: You would need to use CSS3 Multiple Columns instead of Foundation's columns. HTML <div class="row"> <div class="small-12 columns newspaper"> ALL YOUR TEXT HERE </div> </div> CSS .newspaper { column-count:2; -moz-column-count:2; -webkit-column-count:2; } Here's the full demo. 来源： https://stackoverflow.com
订阅 zurb-foundation