CodeCharge Studio
search Register Login  

Web Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Easy Bootstrap Modal Window Implementation in CCS

Print topic Send  topic

Author Message
MichaelMcDonald

Posts: 584
Posted: 11/12/2014, 9:16 PM

Don't use any styles other than Bootstrap. The following works cleanly.
Go ahead and get bootstrap and make sure these four files are in your....

<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Styles/css/bootstrap.min.css">
<link rel="stylesheet" href="Styles/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="Styles/css/custom.css">
<link rel="stylesheet" href="Styles/css/bootstrap3-datepicker.css">
<script src="Styles/js/jquery-2.1.1.min.js"></script>
<script src="Styles/js/bootstrap.min.js"></script>
<script src="Styles/js/bootstrap-datepicker.js"></script>
<script src="Styles/js/customstyling.js"></script>

</head>

At first I couldn't stop Modal from Autoload and on page refresh so I put together a jquery <script></script>
to hides and show the modal only on specific URL parameters.
In this example One of these params is "newrecord==1" as an "expression" URL parameter for "Add New" link, (built from CCS href properties inspector)
The other URL paramter is from the gridlink "idynlistbox"






So here's the code for Modal Window with form - I have stripped out the modal header, footer and closer.
In closers place there is a link on the form with "X" - this is used to remove those URL parameters to close the modal window and prevent auto re-load.


--------The Form in Modal-----------
( The arguments data-keyboard="false" data-backdrop="static" prevent modal close with esc key and clicking on backdrop.)

-------Form / Modal-------

<div id="myModal" class="modal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- BEGIN Form -->
<form id="form1" method="post" name="{HTMLFormName}" action="{Action}">
<h2>User Record <a href="{Link1_Src}" id="form1LinkHideModal">X</a></h2>
<table small>
<!-- BEGIN Error -->
<tr>
<td colspan="2" style="color: red">{Error}</td>
</tr>
<!-- END Error -->
<tr>
<td><label for="ynlistbox1yn">Yn</label></td>
<td><input id="ynlistbox1yn" maxlength="3" size="3" value="{yn}" name="{yn_Name}"></td>
</tr>

<tr>
<td><label for="ynlistbox1value">Value</label></td>
<td><input id="ynlistbox1value" maxlength="1" size="1" value="{value}" name="{value_Name}"></td>
</tr>

<tr>
<td style="TEXT-ALIGN: right" colspan="2">
<!-- BEGIN Button Button_Insert --><input type="submit" id="ynlistbox1Button_Insert" class="ButtonBasic1" alt="Add" value="Add" name="{Button_Name}"><!-- END Button Button_Insert -->
<!-- BEGIN Button Button_Update --><input type="submit" id="ynlistbox1Button_Update" class="ButtonBasic1" alt="Submit" value="Submit" name="{Button_Name}"><!-- END Button Button_Update -->
<!-- BEGIN Button Button_Delete --><input type="submit" id="ynlistbox1Button_Delete" class="ButtonBasic1" alt="Delete" value="Delete" name="{Button_Name}"><!-- END Button Button_Delete --></td>
</tr>
</table>
</form>
<!-- END FORM -->
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>

----------End Form/Modal---------


MAKE sure to also remove your url parameters on your Button_Update, form submit, etc...


Then add the onlick event to ADD NEW and to your gridlink {id} in this xample is called idynlistbox:

<td colspan="3">  <a href="{Link1_Src}" onclick="openmodal" id="ynlistboxLink1_{ynlistbox:rowNumber}">Add New</a>




Then,
This jquery snippet goes at bottom of page (this manages hide/show modal until url parameters "newrecord==1" or "idynlistbox >=1" and then hides it when those parameters are removed.

<script type="text/javascript">
$(window).load(function(openmodal){

function GetURLParameter(sParam){
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables.split('=');
if (sParameterName[0] == sParam)
{ return sParameterName[1];
}
}
};
var idynlistbox = GetURLParameter('idynlistbox');
var newrecord = GetURLParameter('newrecord');

if((idynlistbox >= 1) || (newrecord == 1)) {

$('#myModal').modal('show');}
});
</script>

<!-- FUNCTION disable modal close with click on backdrop -->
<script>
$(function() {
$.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});
</script>
----------End Of The Form In Modal----------



That's it.
Works almost out-of-the box.
Now you can create fluid responsive apps for PC, Mobile and tablets.

EAT DIRT MENDIX !!!
_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
Stanj

Posts: 163
Posted: 11/13/2014, 2:25 AM

Thank you Michael, that is exactly what I wanted to do but did not know how! Yes is missing a sure bet by not adding simple integration with these common frameworks.
_________________
Stan
St Petersburg Russia
View profile  Send private message
Waspman

Posts: 942
Posted: 11/13/2014, 6:18 AM

Great job MC.

Have you tried foundation?

I like how it does modals, tabs, validation and all the other responsive stuff too.
_________________
http://www.waspmedia.co.uk
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/14/2014, 3:58 AM

Some more really cool stuff..

Make your links look like buttons with classes:

class="btn btn-default"
class="btn btn-sm btn-warning"
class="btn btn-sm btn-info"
class="btn btn-sm btn-danger"

and some table classes...

<table class="table table-striped table-bordered table-condensed table-hover"
_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/14/2014, 4:03 AM

Quote Waspman:
Great job MC.

Have you tried foundation?

I like how it does modals, tabs, validation and all the other responsive stuff too.

Yeah Mate I have had a look. It's nice, but I couldn't get the modal window behaviour that I wanted from it.

I am finding with the bootstrap modal/fluid display and the built-in validation that I can do basically all that stuff from CCS PHP.

I haven't tried tabs yet but I got away from them a while back by links with CSS UL's and JS to set the URL parameter and using the URL parameter to hide/show panels.


_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/15/2014, 1:54 PM

Integrating Bootstrap and Foundation is probably as easy as integrating a style.

And it wouldn't even really matter if you had to edit the fonts and colors in the CSS manually.

The only ambiguity I have come across is the bootstrap use of thead instead of th. This renders the inline css editors unusable but doesn't really matter because what is applied in the html is sparse and simple anyway and you can just type your TD properties in the HTML.



_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
Waspman

Posts: 942
Posted: 11/16/2014, 5:04 AM

MCD - Have you tried Pinegrow?
_________________
http://www.waspmedia.co.uk
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/16/2014, 4:17 PM

It looks superb. I'll grab a copy and assess.
_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
Waspman

Posts: 942
Posted: 11/17/2014, 1:30 AM

Although I normally work with Foundation straight into CCS, cos I can visualise what I want in traditional methods, the last couple of jobs I've worked on I used Pinegrow and I like it. If CCS was integrated into it then that would be a serious tool. ;-)
_________________
http://www.waspmedia.co.uk
View profile  Send private message
eratech


Posts: 506
Posted: 11/18/2014, 10:06 PM

I looked at Bootstrap and Foundation a few months ago - I decided to spend some time with Bootstrap in CCS as Foundation would be great if I needed to build a style to particular requirements, but most of my stuff is company-internal so the styles can be more 'off the shelf'
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia
View profile  Send private message
Waspman

Posts: 942
Posted: 11/19/2014, 2:00 AM

Quote eratech:
I looked at Bootstrap and Foundation a few months ago - I decided to spend some time with Bootstrap in CCS as Foundation would be great if I needed to build a style to particular requirements, but most of my stuff is company-internal so the styles can be more 'off the shelf'


I initially made the mistake that these frameworks were just about the style, but the way they make it easy to manipulate the presentation of data supplied by CCS is the real benefit. No more fighting with large forms that you want to show in tabs, simple modal (and multiple too), easy show and hide functionality for responsive application and there's lots of other things. It's like all the bits that CCS is missing.
_________________
http://www.waspmedia.co.uk
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/19/2014, 3:08 AM

It's like CCS tried to have all the bits but there were so many and varied component implementations that it was impossible to successfully integrate them. It almost provided all the features but just fell short of the line on a few.


BTW ... most of my copy/paste and move/drop problems disappeared when I cut over to a SSD.

The yes people once told me there are non-microsoft .dll's involved and I wonder if they weren't working with disk caching properly.
_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
cvboucher

Posts: 187
Posted: 11/19/2014, 12:11 PM

Michael,

Your post got me curious about integrating Bootstrap and CCS. So I took the built in Simple design and converted it to Bootstrap. Then I created a few templates to generate Bootstrap compatible grids, searches and record forms. Here is a link to an app with a few tables from the Intranet database. You can also download the project from this page.

http://apps.csustan.edu/craig/ccsbootstrap

Note: I have a little bit of javascript in the MenuIncludablePage that adds classes to buttons and form controls so they get the bootstrap look. I tried putting this code in the master page but it caused script errors in the builders.

Also, I built the project with C#/InMotion but it should work for any template. The only C# code I added was in the Default page that redirects to the customers_list page.

Craig
View profile  Send private message
eratech


Posts: 506
Posted: 11/19/2014, 10:53 PM

Craig - Excellent work. I had done some of the same with bootstrap and created some div-based component templates and it pretty much works.

I notice you ended up with the sorter images in the Bootstrap/images instead of using the BS glyphs - that was my quick method too. I tried to change the XML that generates the sorters but it beat me.

Cheers

Eric
_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia
View profile  Send private message
eratech


Posts: 506
Posted: 11/19/2014, 10:57 PM

Quote Waspman:
I initially made the mistake that these frameworks were just about the style, but the way they make it easy to manipulate the presentation of data supplied by CCS is the real benefit. No more fighting with large forms that you want to show in tabs, simple modal (and multiple too), easy show and hide functionality for responsive application and there's lots of other things. It's like all the bits that CCS is missing.

Waspman - agreed, I came to BS3 for the styles, and will likely stay for the nicer tabs and modals. Other than the Builder based forms with some modals built in, I have had great problems with integrating modals.

I suspect that CCS could handle a lot more with the 'attributes' ability to add code whereever into the template you need (eg: data-attributes).

Eric

_________________
CCS 3/4/5 ASP Classic, VB.NET, PHP
Melbourne, Victoria, Australia
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/19/2014, 11:06 PM

CV Boucher that's excellent work.

I am impressed with the JQuery scripts for example the button class definition scripts. I know bits and pieces and can throw stuff together sometimes to get it working but the neatness of your layout is a complete education to me and shows me more organised methods for my code.

Food for thought - Would you consider opening this project to further submissions?


Maybe folks could PM and as you moderate they would expect that some changes would be made to fit your structure as you deem necessary to maintain the integrity...

This could be the CCS jigsaw puzzle finally put together.... CCS will still hold the battleaxe for DB code generation strength and versatility and it's coming of age would be with a responsive framework ready to go.

What really gets me excited is the direction and layout that these frameworks force a coder to think.

Maybe we could also put together a foundation framework and have it and BootS ready to go. I'll be happy to mirror them...

Think of the 100's of forum questions on components that could become immediately redundant.

Example:

POST: Hi I'm a newb...

Reply: You might grow out of it so don't worry too much but in the meantime watch some Dr Who THEN go here to the foundation and BS framework and read it thoroughly and we WILL know by your next question whether you downloaded and played with them....!


I'm gonna say it again ..... Mendix EAT DIRT !!!!! :)
_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/19/2014, 11:08 PM

BTW .. I have a nice transparent ccs for the inline datepicker ready to go, removed a few daggy bits and she looks a treat !

happy to post it up..
_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
Waspman

Posts: 942
Posted: 11/20/2014, 2:39 PM

Great work guys, I think you're way beyond what I can do
;-)
_________________
http://www.waspmedia.co.uk
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/20/2014, 10:51 PM

Just found out I can set classes by ID in single Jquery script on the page...

<script type="text/javascript">
$().ready(function() {
$('#Form1Button_Insert').attr('class', "btn btn-sm btn-info");
$('#Form1Button_Update').attr('class', "btn btn-sm btn-warning");
$('#Form1Button_Delete').attr('class', "btn btn-sm btn-danger");
$('#maintable').attr('class', "table table-hover table-condensed table-responsive table-bordered");
$('#maintable').attr('style', "width: 400px; height: 400px");
});
</script>

No luck with datepicker... will research that ....


Might be able to create a single .js script that handles all the page styling...


_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
cvboucher

Posts: 187
Posted: 11/21/2014, 2:38 PM

Thanks eratech and MichaelMcDonald. I'll try to setup a CodeCharge Bootstrap Example project on GitHub that contains my sample project with example pages and explanations on how I did various things. Once I have the project on GitHub, others can pull down the project, add their own example pages, and push their example pages back up. The tricky part is going to be keeping it template agnostic.

Craig
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/21/2014, 3:27 PM

Quote Waspman:
Great work guys, I think you're way beyond what I can do
;-)


I get so much of it by googling. I know bugger all about YUI and even less about JQuery ! ..

What I am really good at is semantic construction of the questions of knowing what I want the page to do next and then finding bits and pieces of solutions on the web and bringing them together in a useful manner to fill the gaps in my apps. I never went to the later stages of school - I left when I was 16. About 8 years ago I studied set theory from a book by 2 Danish nerds that set the mathematical foundations I required in my mind required for every database professional. My advice to anyone is understand sets, prepositions and predicates and you will never have an issue working out a complicated join query and at the end of the day the small branching into subsets of specialist user driven RADS will never try to compete with custom cross-platform code.


The responsive frameworks imply where the concepts of readiness and availability must exist in the software design and lifecycle sequences.
That is what is so right about them.

The thing about these responsive frameworks I reckon for me is a new learning curve - bu that is simply about letting go of 100 potentially complicated CCS ways of doing stuff and looking for the fundamental components in the responsive frameworks that are useful and building from them. Honestly at the moment, I'm not doing mobiles and tablets and I'm not going to adjust my business to do them overnight either. But with these frameworks there's about 10 components I could write any business website app with that is going to look professional and removes the requirement for quite a few million CCS generated neural patterns.

I note that Craig has done some work with designs and I have seen that datadoit did some pretty cool early work integrating artisteer with CCS styles to create design. I reckon this is where it's at for Codecharge or any other RAD right now.

I see CCS main strength and flexibility in the ability to put code where and when it is needed - you know the whole "before, after insert, update, and dinner events". There is no other like it in the market it is the core functionality they got right and keeps customers for them. The ribbon reflects the components accurately but it has been built with a garden variety of platforms not withstanding it has now hashed at Jquery by default.

@Eratech - yeah it's all in the XML! ... We know "the developers" never respond in a timely manner to what each 8 billion of us humans individually believe is our birthright and being realistic I have heard some of them could live in a war zone. So what can be done? ... The XML templates... Yes - how much work, who knows? .. If that could be cracked it would be ideal. A core integration of a framework into a design and using custom.css might work... but it is in the XML that the generation occurs and we rely on for storage of our ideas that come to life and the ability to visualise them in design view. Given that they probably won't overhaul the product it is obvious to me then solutions lies in some way manipulatingthe stylesheets. Datadoit might have the nouse - I don't ... to me it looks like the CSS styling, xml templates and ribbon components either have to have their implicit relationships completely re-engineered or we forget using them almost altogether and keep the power of the before, after execute update, and after dinner mints.

The way to do this is stripped down frameworks ready to go built with an understanding of where we might come up against the ribbon, xml, etc.. and find a way to make sure at the least that the HTML does not appear broken to CCS in design view.

The other thing that is probably worth considering is integration of a JS PDF generator. DOM and his mate TC PDF are just too memory hungry and drink all the beer at a BBQ before anyone else gets a look in.



Phew, that's my 2 cents worth ..
_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
Waspman

Posts: 942
Posted: 11/22/2014, 1:02 AM

I'm impressed MCD:)

For me, I'm a designer. I spent my life creating visual stuff, but I love making things too. I'm a racing driver not a mechanic. CCS makes it possible for me to build amazing things without the need to know all the detailed workngs. As you saw, I build good looking stuff that works well. My integration of Foundation is done by simply wrapping divs around CCS output and I have total control and flexibility. It works and I don't really care how. That in essence is what drew me to CCS in the first place. It�s great that there are guys like you using CCS it confirms to me that it's the right choice, even if I don't know how it does it.
_________________
http://www.waspmedia.co.uk
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/22/2014, 3:27 PM

Further to my first post, and thanks to CVB for opening up the possibility of handling much of the styling inline using JQuery:-

I now have also set the class datepicker to some text fields using JQuery. I had to make sure the datepicker initialise script was below the class definitions.

This is some pretty cool inline using JQuery class creation using Bootstrap:



<script type="text/javascript">
$().ready(function() {
$('#ynlistboxsearch').attr('class', "table table-condensed table-responsive table-bordered");
$('#ynlistboxsearch').attr('style', "width: 500px");
$('#tableynlistbox1').attr('class', "table table-condensed table-responsive table-bordered");
$('#tableynlistbox1').attr('style', "width: 500px");
$('#gridynlistbox').attr('class', "table table-hover table-condensed table-responsive table-bordered");
$('#gridynlistbox').attr('style', "width: 500px");
$('#panelgrid').attr('style', "width: 530px");
$('#panelsearch').attr('style', "width: 530px");
$('#panelsearchheading').attr('style', "height: 40px");
$('#panelgridheading').attr('style', "height: 40px");

$('#nohover').attr('style', "background-color: #ffffff");
$('#removehover1').attr('style', "background-color: #ffffff; vertical-align: middle; text-align: center; height: 30px");

$('input[type=submit]').removeClass('Button');
$('input[type=submit]').addClass('btn');
$("input[type=submit][value='Add']").addClass('btn-info btn-sm');
$("input[type=submit][value='Submit']").addClass('btn-primary btn-sm');
$("input[type=submit][value='Delete']").addClass('btn-danger btn-sm');
$("input[type=submit][value='Cancel']").addClass('btn-warning btn-sm');
$("input[type=submit][value='Search']").addClass('btn-primary btn-sm');

$('#ynlistboxSearchs_value').attr('class', "datepicker");
$('#ynlistbox1value').attr('class', "datepicker");
});
</script>
<!-- FUNCTION Initialise Bootstrap DatePicker -->
<script>
$(function(){
$('.datepicker').datepicker()
});
</script>


above you will see "removehover" - this just sets the background of row in a table hover-class to white so the hover does not appear on the row.

_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
Waspman

Posts: 942
Posted: 11/23/2014, 1:12 AM

Quote MichaelMcDonald:
Further to my first post, and thanks to CVB for opening up the possibility of handling much of the styling inline using JQuery:-

I now have also set the class datepicker to some text fields using JQuery. I had to make sure the datepicker initialise script was below the class definitions.

This is some pretty cool inline using JQuery class creation using Bootstrap:



<script type="text/javascript">
$().ready(function() {
$('#ynlistboxsearch').attr('class', "table table-condensed table-responsive table-bordered");
$('#ynlistboxsearch').attr('style', "width: 500px");
$('#tableynlistbox1').attr('class', "table table-condensed table-responsive table-bordered");
$('#tableynlistbox1').attr('style', "width: 500px");
$('#gridynlistbox').attr('class', "table table-hover table-condensed table-responsive table-bordered");
$('#gridynlistbox').attr('style', "width: 500px");
$('#panelgrid').attr('style', "width: 530px");
$('#panelsearch').attr('style', "width: 530px");
$('#panelsearchheading').attr('style', "height: 40px");
$('#panelgridheading').attr('style', "height: 40px");

$('#nohover').attr('style', "background-color: #ffffff");
$('#removehover1').attr('style', "background-color: #ffffff; vertical-align: middle; text-align: center; height: 30px");

$('input[type=submit]').removeClass('Button');
$('input[type=submit]').addClass('btn');
$("input[type=submit][value='Add']").addClass('btn-info btn-sm');
$("input[type=submit][value='Submit']").addClass('btn-primary btn-sm');
$("input[type=submit][value='Delete']").addClass('btn-danger btn-sm');
$("input[type=submit][value='Cancel']").addClass('btn-warning btn-sm');
$("input[type=submit][value='Search']").addClass('btn-primary btn-sm');

$('#ynlistboxSearchs_value').attr('class', "datepicker");
$('#ynlistbox1value').attr('class', "datepicker");
});
</script>
<!-- FUNCTION Initialise Bootstrap DatePicker -->
<script>
$(function(){
$('.datepicker').datepicker()
});
</script>


above you will see "removehover" - this just sets the background of row in a table hover-class to white so the hover does not appear on the row.



How will setting the physical attributes impact on a responsive design?


_________________
http://www.waspmedia.co.uk
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/23/2014, 2:40 AM

I don't know exactly.


I guess the dimensions will always have to stay within the responsive css parameters for responsiveness.
That being said the only item so far that appears here that might concern are panels and tables. I guess some of the attributes will have to be specified "em" and such...

Probably using the built-in responsive setup for columns would not require adjustments to table size, there are probably column sizes that will contain close to what is required anyway

I haven't gone that far yet ... just testing components in a standard container.

I am working on a project that was going to be full width only but I might make it responsive so I can see and answer the question fully.

I find this interesting because I can see how responsive evolved using JQuery but at the end of the day JQuery controls all of it BUT even more is the requirement to stick to the responsive framework as much as possible without using JQuery to override when working on responsive sites.

_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
Waspman

Posts: 942
Posted: 11/23/2014, 3:17 AM

Since these frameworks are all about responsive design it makes sense to work with it.

In foundation you would do this...

<!-- BEGIN Record contentSearch -->
<form id="contentSearch" method="post" action="{Action}" name="{HTMLFormName}">
<div class="row collapse">

<div class="small-12 medium-6 large-2 columns">
<input type="text" name="{s_headline_Name}" value="{s_headline}" maxlength="250" size="50" id="contentSearchs_headline" placeholder="Keywords">
</div>

<div class="small-12 medium-6 large-2 columns">
<select name="{typeID_Name}" id="contentSearchtypeID">
<option value="">All types</option>
{typeID_Options}
</select>
</div>


<div class="small-2 large-2 columns">
<!-- BEGIN Button Button_DoSearch --><input name="{Button_Name}" type="submit" value="Search" alt="Search" id="contentSearchButton_DoSearch" class="button small postfix"><!-- END Button Button_DoSearch -->
</div>
</div>

</form>
<!-- END Record contentSearch -->

you can see the size of the textbox is specified, but foundation will override it and make it fit the column. But you can specify the width for different screen sizes - small, medium and large.

The columns in the row are collapsed so they "butt up" to each other and the button is a small version rather than standard button size applied to other buttons on the page.

I also use different button styles on a page so I wouldn't use the global approach.

I prefer to use the jQuery DateTimePicker plugin. It displays on-focus and avoids the need for validation.

_________________
http://www.waspmedia.co.uk
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 11/24/2014, 3:21 AM

Waspman thanks for that. That gives me the whole responsive column collapse concept in one easy lesson.

I've been looking at foundation validation and is probably more comprehensive but a.t.m. I am still on CCS built-in validations as I have a couple of validations that run DB query to detect a combinatioin of fields if result then throw to built-in classes error.

While I can see how all the single item type foundation validation works nicely and JQuery is obviously doing the validateinginline as text fields get populated I haven't yet come up with the custom code that would run inline and prevent the record insert/update as it relies in the first instance on attempted form submission. :-D

I'm going to work on coming up to speed with XMLHttpRequest and see if I can pass the variables to an external PHP script (know how to do that bit) and then get the result back !!!. Once I get that I believe Jquery validation will be the way to go.
_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
gerrit


Posts: 130
Posted: 10/15/2015, 5:55 AM

<script type="text/javascript">
$().ready(function() {

$('input[type=submit]').removeClass('Button');
$('input[type=submit]').addClass('btn');
$("input[type=submit][value='Add']").addClass('btn-info btn-sm');
$("input[type=submit][value='Submit']").addClass('btn-primary btn-sm');
$("input[type=submit][value='Delete']").addClass('btn-danger btn-sm');
$("input[type=submit][value='Cancel']").addClass('btn-warning btn-sm');
$("input[type=submit][value='Search']").addClass('btn-primary btn-sm');

});
</script>

I dont get it working ..
_________________
| http://www.vision.to |
View profile  Send private message
MichaelMcDonald

Posts: 584
Posted: 10/24/2015, 12:53 AM

Is this in the head tags?

<link rel="stylesheet" href="Styles/css/bootstrap.min.css">
<link rel="stylesheet" href="Styles/css/bootstrap-theme.min.css">
<script src="Styles/js/jquery-2.1.1.min.js"></script>
<script src="Styles/js/bootstrap.min.js"></script>

and are the files in those locations?
_________________
Central Coast, NSW, Australia.

Use the EXETA Online Business Valuation Tool to
value your business.

www.exeta.com.au
View profile  Send private message
gerrit


Posts: 130
Posted: 11/04/2015, 1:21 AM

hi,

Yes, but I dont get it working.

_________________
| http://www.vision.to |
View profile  Send private message
 Page 1 of 2  Next Last


Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

MS Access to Web

Convert MS Access to Web.
Join thousands of Web developers who build Web applications with minimal coding.

CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.