I'm trying to set the icons to the right side rather than the left. I've tried data-iconpos="right" which works fine on the buttons but no affect here.
Thanks
What I have done is to override the style.
Put this after the mobile css is loaded
<style>
.ui-btn-icon-left .ui-icon {
left: auto !important;
right: 10px !important;
}
</style>
Or you can edit the JQM CSS directly, OR you can create your own custom CSS.
These are the only three ways I have found so far, but love the JQM folks to do something about this.
I added a specific rule for collapsible elements, so their icons are always on the left.
.ui-collapsible-set .ui-btn-icon-left .ui-icon {
left:auto;
right:15px;
}
This affects all the collapsible content headers without setting all of the left icons to right. :-)
Related
I am bulding a mobile project which has a number of modules having elements positioned as fixed. The issue which am facing is only on browsers running on iOS.
The exact issue is that whenever I tr to scroll over the body of the page having , say the bottom toolbar, as fixed, the whole fixed element moves respectively with the scroll, and once the scroll ends completely, then only it comes back to its assigned place.
I have given the body of the page a relative css rule.
Please help as this happens only on iOS.
.add-to-block {
background: #fff;
position: fixed;
bottom: 0px;
right: 0px;
display: block;
height: auto;
width: 100%;
*(inner content element) {
inner content element styling...
}
}
Please try this, source here
.add-to-block {
transform: translate3d(0,0,0);
.....
.....
}
There is not really an easy answer to this as it has been a known issue on ios for a while (supposedly fixed in ios8) but this gives you a few ways to fix it: https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios it details all the issues with position fixed on ios devices and possible ways to fix it if you need to use it.
Add height: 100% and overflow: auto for fixed element.
Full example at https://codepen.io/astnt/pen/ExgOqeX
Safari allows you to scroll beyond the limits of the fixed div so that it can put in a nice bouncy effect. When you scroll past this point though, if there is a container that is scrollable, then subsequent touch events get handed off to this. Therefore scrolling does nothing for a bit until control gets handed back to the fixed div.
The fix is to give the container div the overflow-y: hidden style so that Safari does not hand off the touches, and we continue interacting with the fixed div.
None of the proposed solutions worked for me, although i had the fixed element inside the scrolling div (and moved it up), had no transform or other layer-creating properties on the parent elements (and created a layer on the fixed element) etc.
My solution was to just change the fixed element to be position: sticky;
I'm having issues with my footer. It's the appropriate width and length but I can't get the text to move.
I've tried toggling with the numbers, using both negative and positive numbers with no luck. I'm using a theme created by another tumblr user, with permission to edit it to my liking, but she won't help me edit it, which is how I got here.
I'd like the text on the left side to be 20px from the left, and the text on the right to be 20px from the right. Both sets of text should be 15px from the top. (These are just guesses- once this problems solved, I'll probably toggle a bit more.)
Here's a link to the coding: http://pastebin.com/c0RdkC4W
Thank you in advance!!
OK, so you have some css being applied to the footer (I assume you are talking about the main site footer rather than the footer for each post.
You need to find the css for the #footer
And apply the following css:
#footer {
padding: 15px 20px 20px 20px;
height: 130px;
}
That is in addition to the properties already applied to that element. It's on line 231 of the full block of html you posted.
I am afraid setting the height on the footer is a hack, you would have to adjust this if you add or remove navigation items. A better solution is to use clearfix.
You also have some inline styles hard coded into the html, this is often frowned upon as it is easier to control the css using classes, id's and element selectors. But sometimes these inline styles get written to the template via the tumblr options.
See how you get on and give us a shout if you need more help.
I'm using jquery-mobile and want to separate page into two areas: list and details. So I do it with two-column grid. But sometimes list or/and detail area getting too long for screen and I'd like to have independent scrolling of both areas, preferably with jquery-tools, so that scrolling of one area doesn't affect the other one.
Does anyone have ideas?
Solution 1
Create content divs data-role="content" and much as you want directly under data-role="page. Set a max-height value and overflow-y: scroll;.
.ui-content {
max-height: 150px !important;
overflow-y: scroll;
}
Demo
Solution 2
Inside main content div data-role="content", add content divs and override their max-height and overlfow-y only not the parent content div.
.ui-content .ui-content {
max-height: 150px !important;
overflow-y: scroll;
}
Demo
I'm using jQuery UI and have setup a table to resize columns.
span {
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
I apply some simple ellipsis to the cells so that when they are too small I get the ...
If I look at the page it looks like:
When I resize the column however, it doesn't re-apply the ellipsis :(
Is there a simple way to do this? I tried removing the overflow by making it visible, then re-applying it to be hidden, but the ellipsis goes back to the original view when rendered.
The problem was that the Table Cell had a fixed width in CSS:
width: 120px;
Which was then resized with JavaScript. When the resizing happens the cell content in the cell stayed the same width.
Changing the CSS to be min-width: 120px; and resizing with JavaScript from width to min-width solved the problem.
I am trying to add a 4 pixel bottom border to the header of a ThemeRoller Mobile template. I see the option for setting a border color but it just applies the border all around. Is there a way inside of ThemeRoller to set it to bottom only and set the width, or can anybody provide the proper place inside the css file to adjust this? Thanks in advance!
Edit: I tried changing the .ui-bar-a class in the css file from border: to border-bottom: and chaing the pixel width, but the changes do not show up when the file is rendered in chrome. But if I change it in the web inspector, the changes do work and I can get a 4 pixel bottom border on that element.
Try this:
ui-header {
border-bottom:4px solid #000;
}
You can put this in your own css file to keep thing clean and organized. But remember, when defining all your css files in your head section. Make sure to FIRST load the jquerymobile css file and after that your css file. This is because now your css declarations will overwrite the jquerymobile declarations.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="your-css-file.css" />
Try this
$(".ui-header").css("border-bottom", "4px solid #000000");
just put it on the page you want the border changed, or js file that contains it