Your SAS programs, embedded in web apps and elsewhere

Link in twitter bootstrap for custom css styling of stored process

Accepted Solution Solved
Reply
Contributor
Posts: 33
Accepted Solution

Link in twitter bootstrap for custom css styling of stored process

I am creating a stored process where I'm attempting (but failing) to import twitter bootstrap to have access to some easy custom css styling options.

 

At the top of the stored process code below, it imports bootstrap, jquery, and a jquery library for bootstrap. It is nearly identical to the example shown here except with a small paragraph that will show an alert message when clicked (which was another example).

 

What is interesting is that the jQuery part works (the alery message is activated) but the bootstrap styling is missing and apparently not working. Maybe SAS is overwriting the style? Can someone tell me how to incorporate bootstrap into my stored process?

 

data _null;

 file _webout;
 put '<!DOCTYPE html>
		<html>
		<head>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<script>
		$(document).ready(function(){
		    $("p").click(function(){
		        alert("The paragraph was clicked.");
		    });
		});
		</script>
		</head>
		<body>

		<p>Click on this paragraph.</p>

		<div class="container-fluid">
		  <h1>My First Bootstrap Page</h1>
		  <p>This is some text.</p> 
		</div>
	
		</body>
		</html>';
  
run;

Accepted Solutions
Solution
‎02-11-2016 05:17 PM
Contributor
Posts: 33

Re: Link in twitter bootstrap for custom css styling of stored process

Found the answer inspecting the source. Need https not http...

View solution in original post


All Replies
Solution
‎02-11-2016 05:17 PM
Contributor
Posts: 33

Re: Link in twitter bootstrap for custom css styling of stored process

Found the answer inspecting the source. Need https not http...
Frequent Contributor
Posts: 106

Re: Link in twitter bootstrap for custom css styling of stored process

Ted,

 

If you link to it in the script tag as //, so without https:// or http://, your browser will pick out the protocol automatically. This will make it a portable solution if you're migrating your code between environments that may or may not use https.

 

If you're going to that level of complexity with your web development, consider hosting your static html/js/css files on your web server (if you can), and using something like our HTML5 Data Adapter for SAS library to talk to the STP webapp. It'll make your code a lot easier to work with as your frontends grow in complexity. 

 

Nik

Contributor
Posts: 29

Sv: Link in twitter bootstrap for custom css styling of stored process

[ Edited ]

You need som extra, in case you have old IE-browsers running

 

 

%macro readCards4();
	format infile $char256.;
	input;
	infile = resolve(_infile_);
	file _webout encoding='utf-8';
	put infile;
%mend readCards4;

data _null_;
	%readCards4;
cards4;
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Bootstrap v3 DEMO</title>

	<!-- Bootstrap specific -->
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>
<body role="document">
[...stuff happens here...]

</body>
</html>
;;;;
run;


 

☑ This topic is solved.

Need further help from the community? Please ask a new question.

Discussion stats
  • 3 replies
  • 414 views
  • 0 likes
  • 3 in conversation