Does the jQuery Mobile framework have a way of centering elements, specifically buttons? It looks like it defaults to left-aligning everything and I can't find a way (within the framework) to do this.
jQuery Mobile doesn't seem to have a css class to center elements (I searched through its css).
But you can write your own additional css.
Try creating your own:
.center-button{
margin: 0 auto;
}
example HTML:
<div data-role="button" class="center-button">button text</div>
and see what happens. You might need to set text-align to center in the wrapping tag, so this might work better:
.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
example HTML:
<div class="center-wrapper">
<div data-role="button">button text</div>
</div>
An overkill approach: in inline css in the div did the trick:
style="margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;"
Centers like a charm!
In the situation where you are NOT going to use this over and over (i.e. not needed in your style sheet), inline style statements usually work anywhere they would work inyour style sheet. E.g:
<div data-role="controlgroup" data-type="horizontal" style="text-align:center;">
The best option would be to put any element you want to be centered in a div like this:
<div class="center">
<img src="images/logo.png" />
</div>
and css or inline style:
.center {
text-align:center
}
I had found problems with some of the other methods mentioned here. Another way to do it would be to use layout grid B, and put your content in block b, and leave blocks a and c empty.
http://demos.jquerymobile.com/1.1.2/docs/content/content-grids.html
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b">Your Content Here</div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
None of these answers alone worked for me. I had to combine them. (Maybe it is because I'm using a "button" tag and not a link typed as a button?)
In the HTML:
<div class="center-wrapper"><button type="submit" data-theme="b">Login</button></div>
In the CSS:
.center-wrapper {
text-align: center;
width: 300px;
margin:0 auto;
margin-left:auto;
margin-right:auto;
align:center;
text-align:center;
}
You can make the button an anchor element, and put it in a paragraph with the attribute:
align='center'
Worked for me.
To have them centered correctly and only for the items inside the wrapper .center-wrapper use this. ( all options combined should work cross browser ) if not please post a reply here!
.center-wrapper .ui-btn-text {
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
margin: 0 auto;
}
This works
HTML
<section id="wrapper">
<div data-role="page">
</div>
</section>
Css
#wrapper {
margin:0 auto;
width:1239px;
height:1022px;
background:#ffffff;
position:relative;
}
Adjust as your requirement
.ui-btn{
margin:0.5em 10px;
}
Related
How can I change the background color with app layout of angular components in an AngularDart project. I tried it but nothing affected the background blue color.
layout_component.html
<header class="material-header shadow">
<div class="material-header-row">
<material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Mobile Layout</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<material-button class="material-drawer-button" icon (trigger)="">
<material-icon icon="favorite"></material-icon>
</material-button>
</nav>
<nav class="material-navigation">
<material-button class="material-drawer-button"
icon
popupSource
#source="popupSource"
(trigger)="basicPopupVisible = !basicPopupVisible">
<material-icon icon="more_vert"></material-icon>
</material-button>
<material-popup defaultPopupSizeProvider
enforceSpaceConstraints
[source]="source"
[(visible)]="basicPopupVisible">
<div class="basic">
Hello, I am a pop up!
</div>
</material-popup>
</nav>
<nav class="material-navigation">
<div href="#AppLayout">SIGN IN</div>
</nav>
</div>
layout_component.css
.material-header-row {
background-color: black;
}
.basic {
height: 200px;
padding: 16px;
}
Thank You
If you add the style to a parent component (AppComponent) you can use ::ng-deep to pierce through component style encapsulation boundaries (from parent into children)
::ng-deep header.material-header {
background-color: black;
}
Or to use your code example
::ng-deep .material-header-row {
background-color: black;
}
Update
For above selector, the specificity wasn't high enough to override the background color.
This worked for me:
::ng-deep header.material-header.material-header {
background-color: black;
}
If you add the styles to index.html, ::ng-deep isn't required.
Angular rewrites styles selectors added to components to match the classes like class="_ngcontent-qbq-3" it addes to each component (with a different number for each) to enforce style encapsulation.
Styles added to index.html are not rewritten and these classes are ignored.
You also might need ::ng-deep for HTML added with [innerHTML]="..." or someElement.append(...) because HTML added this way doesn't get the classes added and selectors for CSS added to components will therefore not match after the rewrite anymore.
I'm making a web-app and came accross an interesting thing.
So I have a wrapper div with other divs in it. The wrapper has the following formating:
#ready{
height:568px;
white-space: nowrap;
}
their children divs have this:
.theme{
overflow: hidden;
position:relative;
display: inline-block;
height:568px;
width:320px;
text-align: center;
background-color: #FFF;
}
It works in firefox and chrome, the divs are next to each other as intended. I have to add float:left to .theme to make it work in Safari. Although when I add float:left Mobile Safari will break the divs to new lines.
Is this a bug, or am I doing something wrong? Any ideas, workarounds?
[EDIT]
Added html
<div id="ready">
<div id="welcome"class="theme active">
...
</div>
<div id="cat"class="theme">
...
</div>
<div id="minap"class="theme">
...
</div>
<div id="minecraft"class="theme">
...
</div>
<div id="padthai"class="theme">
...
</div>
<div id="orange"class="theme">
...
</div>
<div id="bszn"class="theme">
...
</div>
</div>
Since you've tried variations of float: left, display: inline-block, position: relative and position: absolute to get your row to stay in one line, but it always breaks into two lines on one device/browser or another, maybe a table layout will achieve your goal.
You can use either the HTML <table> element or CSS table properties. In my example below I've gone with CSS.
http://jsfiddle.net/w01ckufb/2/
HTML
<div id="container">
<div id="ready">
<div id="welcome"class="theme active">IMAGE</div>
<div id="cat"class="theme">IMAGE</div>
<div id="minap"class="theme">IMAGE</div>
<div id="minecraft"class="theme">IMAGE</div>
<div id="padthai"class="theme">IMAGE</div>
<div id="orange"class="theme">IMAGE</div>
<div id="bszn"class="theme">IMAGE</div>
</div><!-- end .ready -->
</div><!-- end #container -->
CSS
#container {
display: table;
width: 4000px;
border-spacing: 15px;
}
#ready{
display: table-row;
border: 2px solid red;
}
.theme {
display: table-cell;
height: 568px;
width: 820px;
text-align: center;
background-color: #FFF;
border: 2px dashed blue;
}
Hope this helps. If you have any questions leave a comment below.
I am actually kinda new to html, but i cant figure out why i have to scroll to see the footer when there isn't any content between the container and it.
HTML
<head>
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="homepage.css" />
<![endif]—>
body {
background-color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container">
<div class="content">
<!-- end .content --></div>
<!-- end .container --></div>
</div>
<div class="footer">
<p> FOOTER CONTENT </p>
</div>
</body>
</html>
CSS
.wrap {
position:relative;
margin:0 auto;
width:100%;
}
.footer {
background-color: black;
bottom: 0;
float: right;
height: 240px;
left: 0;
overflow: hidden;
padding-top: 5px;
width: 100%;
}
Edit, I added the full HTML body, Please refer to the top HTML section for information.
Looks like you have some malformed html. It seems to work fine in jsfiddle after stripping everything out before <body> and the last </html> tag. http://jsfiddle.net/g6gDS/
Edit. I also made the text white in the footer so you can actually see it against the black background.
I think i figured part of it out. My body height was set to 100%. So i backed it down to 85% and it eliminates the scroll but there is a black spot of the background showing at the bottom. Hmm
<div id="photo_attachment_container">
<%= f.file_field :photo %>
</div>
Currently this just looks like a button, how can I add some css and customise the look (e.g dimensions background etc) of this button? Thanks
The HTML file field has been, and remains, one of the most least customizable of the HTML form controls. The other problem is that it is rendered so differently between browsers and OSes. The best way to style these controls is to render the file control as a transparent element on top of another button or set of elements that is styled the way you want. The file control does not need to be visible to be activated with a user click, but it does need to be on the top most layer (sending it click or focus events doesn't work in my tests).
Here's some example HTML:
<div id="test">
<div class="wrapper">
<input type="file" />
</div>
<button>Select a file</button>
</div>
The CSS renders the wrapper div and button as absolutely positioned elements. The button is visible and styled while the wrapper which contains the file field is transparent. I've set the wrapper field to reduce transparency when you hover over it to illustrate its positioning relative to the styled button underneath.
#test {
position: relative;
}
#test .wrapper {
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
z-index: 2;
}
#test .wrapper:hover {
opacity: 0.5;
}
#test button {
background-color: #ccc;
border: none;
color: #666;
padding: 3px 5px;
border-radius: 5px;
position: relative;
top: 0;
z-index: 1;
}
Example on JS fiddle.
http://jsfiddle.net/JgDuh/
EDIT:
To answer the question you asked in your comment, you would structure the above answer in your Rails view template like this:
<div id="photo_attachment_container">
<div class="wrapper">
<%= f.file_field :photo %>
</div>
</div>
This would render as (Note that I used user as the substitute for whatever model you passed in form_for):
<div id="photo_attachment_container">
<div class="wrapper">
<input type="file" id="user_photo" name="user[photo]" />
</div>
</div>
I've been looking at this for days, and I've searched and searched, maybe I just can't see the forest for the trees, but if anyone could shed some insight, I'd be really grateful.
Ok, I have this sticky footer that sort of is at the top of the page and scrolling down the page, the bar is always at the botom of the screen.
It works perfectly on my PC, but I can't see it on other PC's I test. Same exact set up, the paths to the images are there. I just can't seem to figureit out, I fee like I'm going banana's!
html code is:
<body id="home">
<div class="wrap">
<!-- Header -->
<div id="header">
</div>
<div id="slideshow-container">
<div id="slideshow"></div>
</div>
<!-- // Header -->
<div id="main" class="clearfix">
<!-- Content -->
<div id="content">
</div>
<!-- // Content -->
<!-- Sidebar -->
<div id="sidebar">
</div>
<!-- // sidebar -->
</div>
<!-- // Wrap end -->
<div id="footer" class="clearfix">
<div class="wrap">
<div class="clearfix">
</div>
</div>
</div>
Ok, you just can't see the images... what is going on - I feel so retarded!!
CSS:
body{
background: url(../images/bg_body.png) center 0 #ffffff repeat-x;
font-size: 62.5%;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
padding: 0 0 50px 0;
height: 100%;
#footer{
background: url(../images/bg_footer.gif) center 0 repeat-x;
position: relative;
bottom: 0;
width: 100%;
left: 0;
right: 0;
z-index: 1000;
}
#footer .wrap{
background: url(../images/bg_footer_wrap.png) center 0 no-repeat;
padding: 7px 0 0 0;
height: 70px;
}
Take a good long look at CssStickyFooter.com and compare it to your code.
The immediately obvious thing is that your HTML is broken (body and wrap are never closed) and that ".clearfix" (not defined in posted CSS, btw) is applied all over the place.
Found a great sticky footer solution today. Hope it helps, seems to be the simplest solution to me:
<style type="text/css">
html,body {
height:100%
}
#wrapper {
min-height:100%;
margin-bottom:-150px; /* negative total computed height of footer */
}
#footer_padding {
height:150px; /* total computed height of footer */
}
#footer {
height:100px;
margin-top:50px;
}
</style>
<div id="wrapper">
<div>some content...</div>
<div id="footer_padding"></div>
</div>
<div id="footer"></div>
You will find on this github repository (Bredele css sticky footer) two versions of sticky footers : one with a header and an other one without.
Both these versions use display:table (works with IE8 and IE6/7 with polyfill) with no extra markups, no clearfix (instead CssStickyFooter) and a flexible content height.
Hope it'll be helpful!
Olivier