I'm working with Bootstrap and the carousel plugin. This is my code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="img/tree.jpg"></img></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
But the images are displayed too small. I want to fill it the whole carousel.
Here is an image (yes, the image is bigger than it is shown in the image):
<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
...
</div>
The question is answered here
In bootstrap 3 add the responsive and center classes:
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
I believe this is a duplicate question.
Related
I have browsed throughout this forum trying to find a solution.
My problem is simple, the mat-sidenav doesn't straighten through the whole empty height, occupying only the content height.
<div class="main-container" fullscreen>
<div class="main-banner">
<button (click)='menuBar.toggle()'>XYZ</button>
<h1 class='banner-manners'>THIS IS IMPORTANT MESSAGE AREA</h1>
</div>
<mat-sidenav-container>
<mat-sidenav #menuBar mode='over' class="menu-container">
<app-menu></app-menu>
</mat-sidenav>
<mat-sidenav-content class="content-container">
<app-kushman></app-kushman>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<div class="main-container">
<mat-sidenav-container fullscreen>
<mat-sidenav #menuBar mode='over' class="menu-container">
<app-menu></app-menu></mat-sidenav>
<mat-sidenav-content class="content-container">
<div class="main-banner">
<h1 class='banner-manners'>THIS IS IMPORTANT MESSAGE AREA</h1>
<button (click)='menuBar.toggle()'>XYZ</button>
</div>
<app-kushman></app-kushman></mat-sidenav-content>
</mat-sidenav-container>
</div>
I am attempting to build a small page with BS4 (beta2).
<nav id="TOP" class="navbar navbar-light">
<span id="banner-logo" class="navbar-brand">
<span class="fa fa-bath fa-5x"></span>
</span>
<span id="banner-heading" class="navbar-text"><h1>
Wonderful page-title
</h1>
</span>
</nav>
(There also is a fiddle here)
Somehow I am missing something in the construction of the nav: I'd like to the #banner-heading-element to be left-aligned, next to the icon. Why is that not working?
EDIT: I noticed that it works if I put the nav into a - but the BS-Examples all do not do that, so something else must be wrong...
I haven't work much with bootstrap 4 beta before but I don't believe you are doing it right, just took a quick look at the documentation here,
Navbar are formatted like:
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<span class="fa fa-bath fa-3x"></span>
Wonderful page-title
</a>
</nav>
And you can but your menu and content in a container.
<div class="container">
<div class="row">
<div class="col-md-3">
My little menu
</div>
<div class="col-md-9">
Main content area, 9 cols wide
</div>
</div>
</div>
See fiddle
EDIT
To #Mbaas's comment, if you want the icon to be the link and not the text, use li and put the anchor tags around the icon.
<nav class="navbar navbar-light bg-light">
<li class="navbar-brand">
<a href="#">
<span class="fa fa-bath fa-3x"></span>
</a>
Wonderful page-title
</li>
</nav>
You can remove the underline hover of the link by applying css like:
.navbar-brand a{
text-decoration: none;
}
To make the text large as a h1 tag you can put it in a span with a class and apply css to it like:
<span class="bold-text">
Wonderful page-title
</span>
And the css for bold-text could be something like:
.bold-text{
font-weight:bold;
font-size: 40px;
}
fiddle
I am having a problem with nested popups with v1.4.0.RC.1. It works in v1.3.2. I have a footer, which has a button, which opens a popup, which contains a listview, and one of the listitems opens a popup. Again, in v1.3.2, this works as expected... but not with v1.4.0.RC.1. I understand that v1.4 isn't out yet, but I pose this issue anyway as someone may have some insight that I haven't come up with yet. I have a fiddle for both versions. The code for each is exactly the same. The only difference is that the first fiddle uses the 1.3.2 libraries and the second fiddle uses the v1.4.0 libraries.
Also, I have seen answers linking to a jQM popup page, showing that the page itself indicates that chaining popups isn't allowed. However, that's typically a v1.2.0 of jQM. The popup demo in v1.3.2 doesn't indicate that restriction, and is supported by the fact that it does in fact work (see fiddle below).
That being said, if anybody has any guidance or information, I'd really appreciate it. I've poured through the limited 1.4.0 documentation and the interwebs and the only thing I can come up with is doing a setTimeout within the popupafterclose event to open another popup. That seems like a sloppy hack to me, and I'd like to avoid doing that if at all possible.
Anyway, below is code and fiddles for 1.3.2 and 1.4.0.RC.1.
Thanks!
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.3.2</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.3.2 above
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.4.0.RC.1</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.4.0.RC.1 above
I am currently trying to build a Facebook-styled web App using jQuery mobile. My main problem is that users are not able to scroll both navigation-bar and content at the same time. I tried many css based solutions but whereas my normal browser displays everything correct all my mobile devices refuse to display two scroll bars at the same time.
So I tried to implement iScroll with iScrollview. It works just perfectly with every content but with my slideable menu-bar. I have no idea where the problem might be. As soon as a page is added iScrollview seems to ignore the data-iscroll attribute.
<body class="ui-mobile-viewport">
<div id="menu" data-role="content" data-iscroll> <!--Menu-->
<div id="memberDetails">
<h3>Username</h3>
</div>
<ul>
<li class="menuDivider" >MENUDIVIDER</li>
<li class="active"><span class="icon" id="home"></span><span class="text">Home</span></li>
<li></span><span class="text">Page One</span></li>
<li></span><span class="text">Page Two</span></li>
<li></span><span class="text">Page Three</span></li>
<li></span><span class="text">Page Eight</span></li>
<li class="menuDivider" >MENUDIVIDER</li>
</ul>
</div>
<!--/Menu-->
<!--page Home-->
<div data-role="page" class="pages ui-page ui-body-c ui-page-active" id="home" data-url="home" tabindex="0" style="margin-left: 0px; min-height: 882px; ">
<div data-role="header" class="ui-header ui-bar-a" role="banner"> <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">Menu</span></span>
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Home</h1>
</div>
<!-- /header -->
<div id="logo"><img src="files/images/wig_logo.png" alt="wig-logo" width="54" height="25"></div>
<!-- /logo -->
<div data-role="content" class="ui-content" role="main">
<p>Text</p>
</div>
<!-- /content -->
</div>
<!-- /page Home-->
</body>
I am using jQuery 1.8.2, JQM 1.2.0. The slideeffect is done by basically setting the content's margin to the menu's width. Let me know if you need any further information.
I'm getting white space at bottom of the page in iPad and I use jQuery mobile beta2. I'm splitting the UI as primary and secondary page.
when I move from first page to second page I'm getting white space in bottom of the iPad. Can any one help me?
Thanks in advance.
code:
<div data-role="page" class="type-interior" id="homePage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="contentHomePage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
//page:2
<div data-role="page" class="type-interior" id="resultPage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="resultPage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
Her I found solution for this problem. I set content height.
.ui-content {
min-height: 775px;
}
It's because your 'content-primary' does not take too much space. You can solve it in few ways, but I guess that the most logic one will be to use media queries (CSS) and to set the div dimensions in your CSS file. For more info: http://jquerymobile.com/demos/1.0b3/docs/api/mediahelpers.html
BTW, You might want to use jQuery mobile Beta 3