Create buttons using jquery-mobile that stretch fullscreen - button

I'm trying to create a home page screen where the buttons in the body take up the full screen after the header and footer. Ideally the buttons 2x2 will stretch out to the remaining space on the screen.
I tried using ui-grid-a to stretch the buttons to the width of the screen but was unable to alter the height to the screensize.
<section id="Home" data-role="page">
<header data-role="header">
Home
<h1>testapp</h1>
Setup
</header>
<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a">button1</div>
<div class="ui-block-b">button2</div>
<div class="ui-block-a">button3</div>
<div class="ui-block-b">button4</div>
</fieldset>
</div>
<footer data-role="footer" data-role="footer" data-position="fixed">
<fieldset class="ui-grid-a">
<div class="ui-block-a"style="text-align:left">button1</div>
<div class="ui-block-b"style="text-align:right">button2</div>
</fieldset>
</footer>
I'm a noobie at coding so any help would be appreciated. Thanks in advanced.

I believe this is what your looking for. http://jsfiddle.net/codaniel/JAjJp/1/embedded/result/
CSS
<style>
.button{padding:25% 0;}
</style>
HTML
<section id="Home" data-role="page">
<header data-role="header">
Home
<h1>testapp</h1>
Setup
</header>
<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a">button1</div>
<div class="ui-block-b">button2</div>
<div class="ui-block-a">button3</div>
<div class="ui-block-b">button4</div>
</fieldset>
</div>
<footer data-role="footer" data-role="footer" data-position="fixed">
<fieldset class="ui-grid-a">
<div class="ui-block-a"style="text-align:left">button1</div>
<div class="ui-block-b"style="text-align:right">button2</div>
</fieldset>
</footer>
</section>​

Does this work:
http://jsfiddle.net/Pq9YP/
Using a navbar with one list item

Related

fixed sidebar floating at page height

In my work, I want the right-sidebar, left-sidebar, mid-sidebar boxes to be at page height and to stay fixed on the page by scrolling after the hedar. It should be placed between the footer and the header. like the twitch chat section
body{margin:0px;padding:0px;}
.header-wrapper{width:100%;background:gray;}
.outer-wrapper{width:100%;height:auto;}
.left-sidebar{width:15%;background:red;height:1000px;float:left;}
.main-wrapper{width:45%;background:yellow;height:1000px;float:left;}
.mid-sidebar{width:20%;background:blue;height:1000px;float:left;}
.right-sidebar{width:20%;background:orange;height:1000px;float:left;}
.footer-wrapper{width:100%;background:green;}
<body>
<div class="header-wrapper">HEADER
</div>
<div class="outer-wrapper">
<div class="left-sidebar">
</div>
<div class="main-wrapper">
</div>
<div class="mid-sidebar">
</div>
<div class="right-sidebar">
</div>
</div>
<div class="footer-wrapper">FOOTER
</div>
</body>

Make column fixed position in bootstrap

Using Bootstrap, I have a grid column class="col-lg-3" that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).
<div class="row">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Just the same way like the left column in LifeHacker.com
You will see that the left part is fixed however I scroll though the page.
I use bootstrap v3.1.1
<div class="row">
<div class="col-lg-3">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
Normal data enter code here
</div>
</div>
iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.
<div class="row">
<div class="col-lg-3" style="position:fixed">
Fixed content
</div>
<div class="col-lg-9 col-lg-offset-3">
Normal scrollable content
</div>
</div>
Following the solution here http://jsfiddle.net/dRbe4/,
<div class="row">
<div class="col-lg-3 fixed">
Fixed content
</div>
<div class="col-lg-9 scrollit">
Normal scrollable content
</div>
</div>
I modified some css to work just perfect:
.fixed {
position: fixed;
width: 25%;
}
.scrollit {
float: left;
width: 71%
}
Thanks #Lowkase for sharing the solution.
in Bootstrap 3 class="affix" works, but in Bootstrap 4 it does not.
I solved this problem in Bootstrap 4 with class="sticky-top"
(using position: fixed in CSS has its own problems)
code will be something like this:
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Updated for Bootstrap 4
Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional CSS...
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="position-fixed">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
</div>
https://www.codeply.com/go/yOF9csaptw
Bootstrap 5
The solution is very similar to v4, but you can use responsive variations with .sticky-*-top classes.
<div class="row">
<div class="col-lg-3">
<div class="sticky-md-top">
Fixed content
</div>
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>
Docs: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top
Use this, works for me and solve problems with small screen.
<div class="row">
<!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
<div class="col-lg-3 device-lg visible-lg">
<div class="affix">
fixed position
</div>
</div>
<div class="col-lg-9">
<!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
<div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
<div>
NO fixed position
</div>
</div>
Normal data enter code here
</div>
</div>
With bootstrap 4 just use col-auto
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto">
Fixed content
</div>
<div class="col-sm">
Normal scrollable content
</div>
</div>
</div>
If you really want to do it that way, you can't do it in "col- *", because it's going to overlap each other, you should do it in the parent class "row", but depending on what you're doing, you might have a problem with the browser scroll that will be "cut" from the screen, however, is simple to solve, just control the column width and everything will be fine.
<div class="row fixed-top h-100">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9 overflow-auto h-100">
Normal scrollable content
</div>
</div>
Use .col instead of col-lg-3 :
<div class="row">
<div class="col">
Fixed content
</div>
<div class="col-lg-9">
Normal scrollable content
</div>
</div>

bootstrap 3 layout overlap - lack of understanding

I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.
Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated
I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>

Twitter Bootstrap - Making footer run full width

I'm trying to make my footer run the whole width of the web page like the navigation, however I want to centre the content of the footer inline with the content above.
<footer>
<div class="container narrow">
<div class="row-fluid footer">
<div class="span4">
</div>
<div class="span3">
</div>
<div class="span5">
</div>
</div>
</div>
</footer>
I thought that adding the classes <div class="container narrow"> inside the footer would centre the content but this has not worked. Any ideas?
The site is available here - http://www.openreachmarketing.co.uk/
You have the footer background defined in the .footer class. So you need .footer to wrap around .container.narrow.
This works when I try:
<footer>
<div class="footer">
<div class="container narrow row-fluid">
<div class="span4">
</div>
<div class="span3">
</div>
<div class="span5">
</div>
</div>
</div>
</footer>

Getting CSS Div issue with ie9

Actually i have designed the template for one of my games site. In the when i play the game iam getting some problem in IE9 but no issues with other browsers. For clear understanding the issue please see this
play page Code:
<div style="float:left">
<div class="gameContentsurround">
<div class="gameContentbg">
<div class="gameDiv">
<div align='center'>
<!--game content here-->
</div>
</div>
</div>
<div class="gameboxbelowheight"></div>
</div>
<div style='height:5px'></div>
<div style="clear:both"></div>
<div class="gameDesc">
<!--game description here-->
</div>
<div class="moregamesbg">
<div class="moregameswhitebg">
<!--more games section here-->
</div>
</div>
</div>
<div style="float:right; width:390px">
<!--right column where actual issue comes here in IE9-->
</div>
right_column code:
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Ads -->
<!--<div><?php echo SPONSORS_TITLE;?></div> -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Comments Section -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<div style="overflow:scroll">
fb comments
</div>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Rating Section -->
<div class="ratethisgameWhiteBg">
<div class='ratethisgameDiv'>
rating system
</div>
</div>
Add width: 390px to content's first child.
When you use floating elements you should always set their width

Resources