I am having hard time aligning elements inside the footer of a jQuery Mobile Page.
We have three different pieces of information to display: COPYRIGHT, VERSION NUMBER and CONNECTION STATUS. The goal is to align the footer in such a way that COPYRIGHT is left aligned, VERSION NUMBER is centered and CONNECTION STATUS is right aligned all on the same footer line.
I tried the following which unfortunately, did not work:
<div data-role="footer">
<span style="text-align:left">COPYRIGHT</span>
<span style="text-align:center">VERSION NUMBER</span>
<span style="text-align:right">CONNECTION STATUS</span>
</div>
Any suggestions how to accomplish this alignment setup?
Many thanks!
You should use jQuery Mobile grid like this:
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
<div class="ui-grid-b">
<div class="ui-block-a" style="text-align: left;">COPYRIGHT</div>
<div class="ui-block-b" style="text-align: center;">VERSION NUMBER</div>
<div class="ui-block-c" style="text-align: right;">CONNECTION STATUS</div>
</div><!-- /grid-a -->
</h3>
</div>
And here's a working example: http://jsfiddle.net/Gajotres/e2uaU/
And style it as you want. Everything should be wrapped in h3 tag so that footer can retain its height.
Related
I have a modal card in Bulma, and I want to have a left-aligned p tag on one side of the footer, and a right-aligned p tag on the other side, occupying the same horizontal space. The standard classes, like level and columns, don't seem to function correctly in the footer. I have tried a lot of approaches, but this is the most recent.
<footer class="modal-card-foot">
<div id="site-type-div" class="columns is-inline-flex">
<p id="chart-footer" class="level-item">Content</p>
<p id="site-type-p" class="level-item">Type</p>
</div>
</footer>
The two p tags show up in the same horizontal space, but both are left aligned; I want the first on the left and the second on the right.
Will this work? (seems the modal-card-foot class doesn't play well with stuff like level and columns)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<footer class="">
<div id="site-type-div" class="level is-mobile">
<p id="chart-footer" class="level-left">Content</p>
<p id="site-type-p" class="level-right">Type</p>
</div>
</footer>
Added the is-mobile as the snippet is small width and otherwise would display it one under the other.
Update:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<footer class="modal-card-foot" style="justify-content: space-between;">
<div id="site-type-div" class="">
<p id="chart-footer" class="">Content</p>
</div>
<div id="site-type-div" class="">
<p id="site-type-p" class="">Type</p>
</div>
</footer>
Seems you need to change the modal-card-foot style to use the justify-content: space-between; and divide them into 2 divs.
Info from is-pulled-right in modal-card-footer
im trying to build a profile card view and im using bootstrap for it.
i build two div elements on with the class col-lg-3 and the other one with col-lg-9. the problem is that the content inside the col-lg-9 is not align in the center. it has more space on the right side as on the left side and i tryde almost everything to get them center. disabled margin and padding didnt worked.
the col-lg-9 is inside a row and a normal container. and inside the col-lg-9 is the content. i have here a sample onbootplay if ya marke the container you can see that the contents with the class card hase right more space.
thats the html code of it
<div class="col-lg-9" style="min-height: 100px; background-color: #333">
<div class="container">
<div class="card">
<div class="model-image">
<img src="img/elliot.jpg">
</div>
<div class="card-content">
<a class="card-header">Team Fu</a>
<div class="meta">
<span class="date">Create in Sep 2014</span>
</div>
</div>
<div class="card-footer">
ds
</div>
</div>
</div>
</div>
i uploadet so ya can see the whole site. for better understanding demo
if you add an extra container for all .card divs you will get it centered:
<div class="container text-center">
<div class="cards-container" style="display:inline-block; box-sizing:border-box;">
<!-- here all your .card divs -->
</div>
</div>
You can add the css of the cards-container in css file.
When using bootstrap, just add the text-center class to your div and it will center your elements and all the children.
And i would suggest to use inline css rather put your css in a external stylesheet. It will be much easier to maintain in the future.
<div class="card-content text-center">
<a class="card-header">Team Fu</a>
<div class="meta">
<span class="date">Create in Sep 2014</span>
</div>
This is my html code:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin:0;">
<article>
<img src="http://placehold.it/1000x500" class="img-responsive" alt="">
<div class="content">
<h3>Title</h3>
<p><i class="fa fa-calendar-o"><small> 1 June</small></i> <i class="fa fa-clock-o"><small> 11:45 PM</small></i></p>
<p>For many individuals and businesses developing a strong social media presence is a cornerstone of their digital strategy, so prioritising social media.... <font color="#88c78a">Read More</font></p>
<div class="pull-right"><i class="fa fa-eye"></i> <small> 400 Views</small></div>
<div class="pull-left" ><i class="fa fa-thumbs-up"></i> <small> 400 Likes</small></div>
</div>
</article>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
My div currently looks like this:http://s13.postimg.org/fdis1mxyv/div.png
If you go through the image then you will see that there is some space from left and right green margin. I want that space to go away.
Which attribute of div will help do this thing?
The attribute in the css that makes that it writes the content of the child objects is the attribute called "padding". There is 5 types of different paddings :
padding=*X*; Makes the content to be wrote with a margin at every side
padding-top:*X*; Makes the content to be wrote with a margin from the top
padding-left:*X*; Makes the content to be wrote with a margin from the left side
padding-right:*X*; Makes the content to be wrote with a margin from the right side
padding-bottom:*X*; Makes the content to be wrtoe with a margin from the bottom
And then, you can play with these in CSS by specifying only the ones that you want (the number X is either in px or in %. e.g.: padding-top:10px;)
So for your you have to search the child parent class that contains the childs you want to be aligned to the div, and you change the value :
.parent
{
padding:*X*px;
//or padding-top, padding-left, padding-right, padding-bottom, in fonction of wich one you want
}
Here is a snippet to show you an example :
.parent_no_padding
{
padding:0px;
}
.child_no_padding
{
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
}
.parent_with_padding
{
padding:20px;
}
.child_with_padding
{
padding:20px;
}
<table border="1"><tr><td>
<!-- Only for the look -->
<div class="parent_no_padding">
<h3>Title here</h3>
<div class="child_no_padding">
<p>Content of the child</p>
Write a little sentence here to make some content (without padding)
</div>
</div>
<br/></td></tr><tr><td>
<div class="parent_with_padding">
<h3>Title here agagin</h3>
<div class="child_with_padding">
<p>Content of the child</p>
Write a second little sentence (with padding)
</div>
</div>
<br/></td></tr><tr><td>
<div class="parent_with_padding">
<h3>Title here over and over</h3>
<div class="child_no_padding">
<p>Content of the child</p>
Write a last little sentence (parent with padding but child without padding)
</div>
</div></td></tr></table>
Hope this helps ! (don't forget to check an answer if it's right, to help other people to see what works)
On my current website using bootstrap, I have a set of 'wells' within a container-fluid. The effect I am trying to achieve is to have each well is side by side in one row. This was fine for a few wells. However, now I have added more wells and I have begun testing on smaller resolutions.
Now, when the wells reach the edge of the browser window, they wrap around. This is not the behavior I'd like. Instead, I would like a horizontal bar to appear and allow users to scroll sideways to view the rest of the wells. All the wells should be in the same row, irrespective of screen resolution, the number of wells, and the width of the well's contents.
Here is a brief section of code to give you an idea of my structure:
<div class="container-fluid">
<div class="row">
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 1 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 2 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 3 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<!-- MORE WELLS HERE -->
</div>
</div>
Am I using the correct Container? How can I achieve this 'no wrap' row result?
Thanks!
You may need some custome CSS to get that result use this:
<div class="container-fluid">
<div class="row wells"> // ADD Class "wells"
<div class="span">
Then on CSS
.row.wells {
white-space:nowrap;
overflow:auto;
}
.span {
display:inline-block;
}
Check this Demo
I'm currently in the process of designing part of my web page, but have encountered difficulty positioning the contact cards as they appear below:
Currently the second column of contact cards is not vertically aligned because of the follwing markup structure. The <h2 class="text200 margbottom margtop">Contact Us</h2> is 'pushing' the other 2 contact cards in the first grid 4 down vertically, but of course this is not happening in the second grid 4 as no <h2> is present. Is there any way to have the contact cards positioned at the same height so they are aligned horizontally as shown in the image above by amending my HTML markup?
Here is the link: http://www.bestcastleintown.co.uk/pg/
<div class="grid_4">
<h2 class="text200 margbottom margtop">Contact Us</h2>
<div class="contact_block_tiny trophy clearfix">
<!-- content -->
</div>
<div class="contact_block_tiny target clearfix">
<!-- content -->
</div>
</div>
<div class="grid_4 omega">
<div class="contact_block_tiny drink clearfix">
<!-- content -->
</div>
<div class="contact_block_tiny editorial clearfix">
<!-- content -->
</div>
</div>
Is the "Contact Us" the heading for the first column or for both columns? If it is the heading for both columns, then why do you put it inside the first column? That's not where it belongs semantically, and consequentially breaks your layout.