Menu icon Foundation

My Posts



My Comments

Andy Wallace commented on Dan Crowe's post about 3 years

Dan,
Apologies if you get excited at seeing a reply to this, but I'm also looking for a solution to a similar problem.
More simply, I'd like to extend the background colour of an edge column on one side of the page full width, whilst retaining an overall grid structure for content within that row.
In pseudo-code:
<div class="row">
<!-- This small-8 column conforms to grid -->
<div class="small-8 columns">Main content</div>

&lt;!-- This small-4 to-the-edge column actually extends to edge of page (full width) 
     and has a background colour, but content within is constrained to grid --&gt;
&lt;div class="small-4 columns to-the-edge" style="background-color: blue"&gt;Side content&lt;/div&gt;

</div>

Whilst that HTML doesn't make logical sense, I hope it illustrates what I'm thinking of.
If you find a solution, I'd be grateful if you could share it.
Thanks!Andy
 

Andy Wallace commented on Ste Cro's post over 3 years

Ah, my apologies - I didn't realise you were using F6. I've not gone near that with a barge pole yet, I'm sticking with F5! I've read too many stories of grief with F6 so sticking with what I know works :)
That's of no consolation to you right enough - your link is password protected I'm afraid so I can't see why it wouldn't be behaving.

Andy Wallace commented on Ste Cro's post over 3 years

Hi Stef,
Try this CSS:
/* initially, hide all slides... */
ul[data-orbit] li,
ul[data-orbit] .orbit-caption {
display: none;
}

/* ...except for the first one */
ul[data-orbit] li:first-child { display: block; }

/* show slides once .orbit is loaded */
.orbit ul[data-orbit] li,
.orbit ul[data-orbit] .orbit-caption {
display: block;
}

Andy Wallace commented on Arie Olivier's post over 3 years

Hi Arie,
When you click a submit button on a regular form in a reveal modal, the form is POSTing just like it would when not in a modal - so it behaves in the same way (the browser navigates away from the page, to the form action URL - it doesn't care that it's in a UI modal).
What you need to do is submit your form using AJAX instead. I'm not going to give you a tutorial here, but if you do a bit of Googling you'll find that it's not too hard!
Andy

Andy Wallace commented on ahmad's post over 3 years

Ahmad,
You will need to programatically close your reveal modal in your AJAX call, probably in the success function.
So something like:
$.ajax({
//url:"includes/widgets/insert.php",
method:"POST",
data:{first_name:first_name, last_name:last_name},
dataType:"text",
success:function(data){
//alert(data);
fetch_data();

// if form submitted ok and no form errors
$('#add_post').foundation('close');

}
});

Andy Wallace commented on Andy Wallace's post over 3 years

Hi Rafi,

Very nearly, the only flaw being that on small, the gutters are different, because you've got additional padding on your row.

https://www.dropbox.com/s/qfqkim4v307u3et/form-collapse.png?dl=0

I think that in my scenario, collapse would have to work slightly differently in that padding/margins are only removed internally.

I'll have a play around when I have more time and if I find a sensible solution, I'll let you now. It's probably not complicated, I just wondered if I was missing something obvious.

Andy

Andy Wallace commented on Anina's post over 3 years

Firstly, you shouldn't include the # on your id attribute in the HTML:

<form id="#preSignupForm"

should be

<form id="preSignupForm"

Also, your CSS has a definition for #PreSignupForm, and you're using lowercase 'p' in your HTML (#preSignupForm)

Andy Wallace commented on Anina's post over 3 years

Anina,

Can you paste the HTML that you are applying these id/classes to?

It's impossible to say for sure, but I suspect there is some other style/class on the #preSignupForm which is overriding your definition above. Or, the 'error' class is not being applied to the fields you expect/

Andy Wallace commented on Andy Wallace's post over 3 years

Hi Rafi,

I think I've over-complicated my explanation!

If you use my Codepen:

On larger (medium-up, say) screens I want the input/submit field to look as in example 2.

On small screens, I want it to look as in example 3.

The markup for example 2 is how I think it should work, but this doesn't close up the gap between the fields on small as I'd expect (that's the only thing - the gutters etc. are perfect).

From what I can work out, small-collapse doesn't work when used inside a form (use Firebug to change small-collapse to collapse, and it displays perfectly on small).

Andy

Andy Wallace commented on Ralph Mol's post over 3 years

I don't know about that - I imagine that you'd have to develop a "new email" template for Outlook which includes the Zurb Ink CSS, but this would probably screw up the content of the email unless you ensured that the CSS was signature specific (by prefixing a class, for example).

It's probably easier to make your signatures much simpler... I've yet to see anything beyond basic rich-text work in all browsers! Signatures have got way out of hand over the years, and mail clients just haven't kept up (Outlook especially).

Keep It Simple :)

Posts Followed





  • 4
    Replies
  • Error state color

    By Anina

    Error state color forms error

    Hi there I have two forms which I change the error state color below, but the strangest thing is that only the #partnerRegistrationForm error state color changes? I also separated them but no luck. Any ideas as to why this is happening? Thanks!

    Last Reply by Anina over 3 years ago






Following

    No Content

Followers

My Posts

My Comments

You commented on Dan Crowe's post about 3 years

Dan,
Apologies if you get excited at seeing a reply to this, but I'm also looking for a solution to a similar problem.
More simply, I'd like to extend the background colour of an edge column on one side of the page full width, whilst retaining an overall grid structure for content within that row.
In pseudo-code:
<div class="row">
<!-- This small-8 column conforms to grid -->
<div class="small-8 columns">Main content</div>

&lt;!-- This small-4 to-the-edge column actually extends to edge of page (full width) 
     and has a background colour, but content within is constrained to grid --&gt;
&lt;div class="small-4 columns to-the-edge" style="background-color: blue"&gt;Side content&lt;/div&gt;

</div>

Whilst that HTML doesn't make logical sense, I hope it illustrates what I'm thinking of.
If you find a solution, I'd be grateful if you could share it.
Thanks!Andy
 

You commented on Ste Cro's post over 3 years

Ah, my apologies - I didn't realise you were using F6. I've not gone near that with a barge pole yet, I'm sticking with F5! I've read too many stories of grief with F6 so sticking with what I know works :)
That's of no consolation to you right enough - your link is password protected I'm afraid so I can't see why it wouldn't be behaving.

You commented on Ste Cro's post over 3 years

Hi Stef,
Try this CSS:
/* initially, hide all slides... */
ul[data-orbit] li,
ul[data-orbit] .orbit-caption {
display: none;
}

/* ...except for the first one */
ul[data-orbit] li:first-child { display: block; }

/* show slides once .orbit is loaded */
.orbit ul[data-orbit] li,
.orbit ul[data-orbit] .orbit-caption {
display: block;
}

You commented on Arie Olivier's post over 3 years

Hi Arie,
When you click a submit button on a regular form in a reveal modal, the form is POSTing just like it would when not in a modal - so it behaves in the same way (the browser navigates away from the page, to the form action URL - it doesn't care that it's in a UI modal).
What you need to do is submit your form using AJAX instead. I'm not going to give you a tutorial here, but if you do a bit of Googling you'll find that it's not too hard!
Andy

You commented on ahmad's post over 3 years

Ahmad,
You will need to programatically close your reveal modal in your AJAX call, probably in the success function.
So something like:
$.ajax({
//url:"includes/widgets/insert.php",
method:"POST",
data:{first_name:first_name, last_name:last_name},
dataType:"text",
success:function(data){
//alert(data);
fetch_data();

// if form submitted ok and no form errors
$('#add_post').foundation('close');

}
});

You commented on Andy Wallace's post over 3 years

Hi Rafi,

Very nearly, the only flaw being that on small, the gutters are different, because you've got additional padding on your row.

https://www.dropbox.com/s/qfqkim4v307u3et/form-collapse.png?dl=0

I think that in my scenario, collapse would have to work slightly differently in that padding/margins are only removed internally.

I'll have a play around when I have more time and if I find a sensible solution, I'll let you now. It's probably not complicated, I just wondered if I was missing something obvious.

Andy

You commented on Anina's post over 3 years

Firstly, you shouldn't include the # on your id attribute in the HTML:

<form id="#preSignupForm"

should be

<form id="preSignupForm"

Also, your CSS has a definition for #PreSignupForm, and you're using lowercase 'p' in your HTML (#preSignupForm)

You commented on Anina's post over 3 years

Anina,

Can you paste the HTML that you are applying these id/classes to?

It's impossible to say for sure, but I suspect there is some other style/class on the #preSignupForm which is overriding your definition above. Or, the 'error' class is not being applied to the fields you expect/

You commented on Andy Wallace's post over 3 years

Hi Rafi,

I think I've over-complicated my explanation!

If you use my Codepen:

On larger (medium-up, say) screens I want the input/submit field to look as in example 2.

On small screens, I want it to look as in example 3.

The markup for example 2 is how I think it should work, but this doesn't close up the gap between the fields on small as I'd expect (that's the only thing - the gutters etc. are perfect).

From what I can work out, small-collapse doesn't work when used inside a form (use Firebug to change small-collapse to collapse, and it displays perfectly on small).

Andy

You commented on Ralph Mol's post over 3 years

I don't know about that - I imagine that you'd have to develop a "new email" template for Outlook which includes the Zurb Ink CSS, but this would probably screw up the content of the email unless you ensured that the CSS was signature specific (by prefixing a class, for example).

It's probably easier to make your signatures much simpler... I've yet to see anything beyond basic rich-text work in all browsers! Signatures have got way out of hand over the years, and mail clients just haven't kept up (Outlook especially).

Keep It Simple :)

Posts Followed

Following

  • No Content

Followers