I have created a simple project (Hybrid with Dojo) that contains one view with three pages - all created using the Dojo Mobile View wizard.
After I build all and deploy, and preview with the Worklight Console, the view doesn't render the arrows of the list items properly and once a list item is clicked, it looks like the new page opens on top of the view, instead of transitioning.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld2App</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/HelloWorld2App.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Heading'"></div>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 1',moveTo:'page1'"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 2',moveTo:'page2'"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 3',moveTo:'page3'"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page1">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 1',back:'Back',moveTo:'view1'"></div>On page 1
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page2">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 2',back:'Back',moveTo:'view1'"></div>On page 2
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page3">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 3',back:'Back',moveTo:'view1'"></div>On page 3
</div>
<script src="js/initOptions.js"></script>
<script src="js/HelloWorld2App.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Since Virginie is not copying the answer from the comments, here is answer for all to know:
The above did not work while using the internal browser in Eclipse. After moving to use an external browser this is now working.
Related
I have 5 buttons. With Fetch, the api is fetched and written to the screen. I want the top 50 countries to be listed when I click on button 1. After that, when you press button number 2, the countries between 50-100 should appear on the screen. In this order, I want to remove 250 countries 50-50 when each button is clicked
const row = document.querySelector('.row');
const buttons = document.querySelectorAll('button')
fetch('https://restcountries.com/v3.1/all')
.then(res=>res.json())
.then(data=>{
let card = "";
data.map(item=>{
card+=`
<div class="col-md-4">
<div class="card" >
<img height="300" src="${item.flags.png}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${item.name.common}</h5>
<p class="card-text">${item.capital}</p>
Go somewhere
</div>
</div>
</div>
`
})
row.innerHTML = card;
});
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<section>
<div class="container mt-5">
<div class="row g-5"></div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Hey guys im using bootstrap and i wanted to have text in one div but where i write more than the width of the div the text goes out instead of appear or the next line ... here is my html:
<!Doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>AGORA</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="SITE.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row entete">
</div>
<div class="row">
<!-- PROFIL -->
<div class="col-md-5">
<!-- PHOTO ET PRES -->
<div class="row">
<!-- PHOTO -->
<div class="col-md-3" style="padding:0;"><img src="profil.jpg" class="img-responsive"></div>
<!-- PRESENTATION -->
<div class="col-md-9">
<p>PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</p>
</div>
</div>
<!-- INFOS DU MEC -->
<div class="row bordure"></div>
<!-- NIVEAU TROPHEES ET CENTRE INTERET -->
<div class="row bordure"></div>
</div>
<!-- DEBATS -->
<div class="col-md-7">
<div class="row bordure"></div>
<div class="row bordure"></div>
</div>
</div>
</div>
</body>
</html>
and my css :
*{
padding:0;
}
.container-fluid{
border: 1px solid; box-sizing: border-box; height:100%;
}
.entete{
height:100px;
background-color: blue;
}
I do not understand while the text in the div doesnt stay in it ...
Thanks for help !
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header style="background-color: blue">
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<div class="container-fluid img-responsive">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-xs-4 col-sm-4 col-lg-4 col-xl-4" ><img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" width="200px" height="200px"></div>
<div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8" style="word-wrap: break-word ">PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle now:https://jsfiddle.net/77qmh8zm/
I created a navigation bar inside the class jumbotron using bootstrap. But it seems that there is some problem with the navigation bar menu. There is no padding or styles in the "li" tags. All the li tags just sticked together in the following manner:
HOMEPRICEGALLERYMEDIAFAQsCONTACT US
<!DOCTYPE html>
<html lang="en">
<head>
<title>TATTOO</title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!--create a header first using jumbotron class or header tricks-->
<div class="jumbotron" id="header">
<img src="#">here comes the image</img>
<!-- adding the navigtion bar -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>PRICE</li>
<li>GALLERY</li>
<li>MEDIA</li>
<li>FAQs</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</body>
you forgot to add a tags to your li tags. this a tag is responsible for the padding--
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TATTOO</title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!--create a header first using jumbotron class or header tricks-->
<div class="jumbotron" id="header">
<img src="#">
<!-- adding the navigtion bar -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>PRICE</li>
<li>GALLERY</li>
<li>MEDIA</li>
<li>FAQs</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</div>
</body>
</body>
If you wrap the text inside the list items in anchor tags, you would see it styled :) Let me know if it works
<ul class="nav navbar-nav">
<li><a href='#'>HOME </a></li>
<li><a href='#'>PRICE </a></li>
<li><a href='#'>GALLERY </a></li>
<li><a href='#'>MEDIA </a></li>
<li><a href='#'>FAQs </a></li>
<li><a href='#'>CONTACT US </a></li>
</ul>
Hello I am starting to learn in web programming language using asp.net mvc4 and bootstrap. I am getting this error (Server Error in '/' Application) when running my application but if it is in default code it is functioning fine.
These are my codes
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
I didn't change anything here
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="Corinthians 3" />
<title>Sample BS</title>
<!-- Bootstrap Core CSS -->
<link href="#Url.Content("~/plugin/bower_components/bootstrap/dist/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<!-- MetisMenu CSS -->
<link href="#Url.Content("~/plugin/bower_components/metisMenu/dist/metisMenu.min.css")" rel="stylesheet" type="text/css" />
<!-- DataTables CSS -->
<link href="#Url.Content("~/plugin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css")" rel="stylesheet" type="text/css" />
<!-- Animation CSS -->
<link href="#Url.Content("~/plugin/css/animate.css")" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="#Url.Content("~/plugin/dist/css/sb-admin-2.css")" rel="stylesheet" type="text/css" />
<!-- Custom Fonts -->
<link href="#Url.Content("~/plugin/bower_components/font-awesome/css/font-awesome.min.css")" rel="stylesheet" type="text/css" />
<link href="../../plugin/dateTimePicker/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div>
<label for="disabledSelect" style="color:#A94442; display:none;" id="lblTotalCollectibles"></label>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0; background-color:#337AB7;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
< span class="sr-only"> Toggle navigation < /span >
< span class="icon-bar">< /span >
< span class="icon-bar">< /span >
< span class="icon-bar">< /span >
</button>
<a class="navbar-brand" href="#Url.Content("~/BS/BSSSS")" style="color:White;">BS</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li style="margin-top:13px;">
<span class="fa fa-clock-o" style="color:White;" id="timeTxt"></span>
</li>
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
</li>
<li> <!--style="display:none;"> -->
</li>
<li> <!--style="display:none;"> -->
</li>
<li>
<i class="fa fa-wrench fa-fw" id="side-menu-filemaintenance"></i> File Maintenance <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
</li>
<li>
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper" style="background-image:url(../../Images/bg.gif); background-attachment: fixed;">
<div class="container-fluid">
#RenderBody()
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="#Url.Content("~/plugin/bower_components/jquery/dist/jquery.min.js")" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/bootstrap/dist/js/bootstrap.min.js")" type="text/javascript"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/metisMenu/dist/metisMenu.min.js")" type="text/javascript"></script>
<!-- DataTables JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/datatables/media/js/jquery.dataTables.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/plugin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/plugin/js/jquery.scrollUp.min.js")" type="text/javascript"></script>
<script src="../../plugin/dateTimePicker/js/moment-with-locales.js" type="text/javascript"></script>
<script src="../../plugin/dateTimePicker/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<!-- Custom Theme JavaScript -->
<script src="#Url.Content("~/plugin/dist/js/sb-admin-2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/userdefined/Sales/jsSales.js")" type="text/javascript"></script>
</body>
</html>
And Lastly for my View>BS>BSSSS.cshtml
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
<h1>aaaa</h1>
</div>
</body>
</html>
Here is the picture of the error.
UPDATED
#Gaurav here is the new error that i follow your suggested way.
Approach 1
Rename your BSSSS.cshtml to Index.cshtml and move it to Views/Home folder (replace existing file).
Leave the statement as return View(); in Home controller's Indexaction.
Approach 2
Let the BSSSS.cshtml file remain at path Views/BS/BSSSS.cshtml. In your Home controller's Index action change the return View(); to return View("BSS/BSSSS.cshtml");
i've already seen some user with the same problem:
Lightgallery not working
but i still can't get it to work, here's my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</li>
<li <a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</ul>
</div>
</div>
</body>
</html>
Can't figure out what i'm missing.
Thanks for any help
You haven't connect main file - lightgallery.js.
Connect it.
Can you please check this code and see if it does any help? Hope it does :)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
<li ><a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
</ul>
</div>
</body>
</html>