I am developing a responsive design for a website. The DA (director artistic) wants to put an action button at the bottom of the viewport.
And this button must be always displayed to the user.
I am applying a fixed bottom CSS style:
.mobile {
position: fixed;
bottom: 0;
left: -50%;
width: 75%;
transform: translate(-50%, -50%);
}
On iOS
The button is hidden when Safari's toolbar is displayed but it shouldn't be
And when the toolbar is hidden and the button visible, I can not click on it.
This toolbar has a different height depending on the iPhone version used.
Do you have some css tricks or any other idea to solve this case?
Related
I have an attribution icon on an Open Street Map layer in OpenLayers 3.
I have set it to the left side of the screen but when the button is clicked it attempts to expand out of the screen to the left (as is its default behaviour). Is there a way to get the attribution information expand to the right instead?
I have set the attribution icons position using some CSS:
.ol-attribution {
right: 95%;
}
The following jsfiddle shows the current behaviour I wish to avoid (click on the i button in the bottom left):
http://jsfiddle.net/single_entity/7mvuxytv/
By making the position relative to the left instead of the right, the div expands on the right. Making the button float on the left makes it also stay at the same position to toggle it on and off.
.ol-attribution {
right: auto;
left: .5em;
}
.ol-attribution button {
float: left;
}
http://jsfiddle.net/7mvuxytv/31/
I am working on a "drawer menu" component. The menu is an overlay that comes form the side and partially covers the main screen.
Is it possible to make it partially cover the status bar too? I have seen this effect in Google Inbox.
Yes, it is possible to make it partially cover the status bar. You can create a view component and you can position it with an absolute position. Based on this library, you can add this style to a view component
{
right: 0,
left: 0,
top: 0,
bottom: 0,
position: 'absolute',
backgroundColor: 'transparent'
}
Then you can add a custom width to the same view so the drawer doesn't take all the screen width.
You can also use the react-native DrawerLayoutAndroid, but this component is only available on android.
I have a div that needs to be height resizable. Adding the resizable bar at the top was not an issue however I also need to add an icon on the left side of the gray bar so it's more obvious to the user that they can drag that.
Unfortunately I can't seem to get it to work. Setting a background to the ui-resizable-n class won't work and adding an <img/> tag to the generated handle, event though I can make it look right, I can't grab the icon and drag it.
Any thoughts ?
http://plnkr.co/edit/tAQbS6LYMebLGsCXPJwL?p=preview
Layout: https://dl.dropboxusercontent.com/u/2227188/handle%20on%20the%20left.png (the gray bar is between 2 divs and it's resizing both of them .. that part is done - notice the icon on the left of the bray bar).
As per your screenshot, you just need to make changes in CSS to get that resize handler.
Please change the image url of handler as per your screenshot.
.lower .ui-resizable-n {
background: url(http://i.stack.imgur.com/Xkiaa.png) no-repeat;
height: 10px;
left: -8px; /*Adjust this value to fit it properly in the container*/
top: -5px;
}
.lower.ui-resizable {
border-top: 3px solid gray;
}
DEMO
In the header of my mobile web app, I want to provide a settings icon, and only a settings icon. I don't want any styles rendered. jQuery Mobile adds on a lot of styling, and I just want to remove it. I've gotten close, but ran into some problems.
Here I define the custom icon in the header:
And this CSS will remove the button and background color it adds under the icon (.toolbar is a class I defined for the header):
.toolbar .ui-btn, .toolbar .ui-btn-up, .toolbar .ui-btn-hover, .toolbar .ui-btn-down, .toolbar .ui-btn-inner,
.ui-btn-icon-left::after, .ui-btn-icon-right::after, .ui-btn-icon-top::after, .ui-btn-icon-bottom::after, .ui-btn-icon-notext::after
{
background:none;
}
I need to be able to set its size and always remain centered in the header (for all devices accessing the site). jQuery Mobile puts the icon in a bounding box so if I increase the size of my icon to 30px it cuts off part of the icon. 25px looks ok but isn't quite big enough and it's not centered perfectly in their defined box. I need to get rid of that box (which appears on hover), which you can see in this image.
Questions:
Is there a better way to add a simple icon to a header and avoid having to reset/override the styles?
Or what do I need to add to get the desired result?
I also want to do this for text-only buttons, so if I can kill 2 birds with one stone that'd be great.
Thanks a ton!
PS. I'm utilizing jQM v 1.4.0 rc1.
Here is a DEMO FIDDLE
I gave the button an id and added the class ui-nodisc-icon to hide the disc.
<a id="btnSettings" href="#settings" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-nodisc-icon" data-transition="flip"></a>
The CSS to hide the button and allw sizing of the icon is:
#btnSettings{
background-color: transparent;
border: 0;
}
#btnSettings:after {
height: 30px;
width: 30px;
background-size: 30px 30px;
margin-left: -15px;
margin-top: -15px;
}
Set the :after width, height, and background size to the size icon you want and then set the Margin left and top to negative one half the height and width to keep it centered.
With twitter bootstrap nav bar being sticky as well, it seems that when user scrolls down, the nav bar overlaps on top of the first row (column title) portion of the sticky header. Is there a way to push the sticky header down by a row so that it can fall below the bootstrap sticky nav bar as you are scrolling?
You’ll need these steps to achieve that (because of the tablesorter scrolling mechanism):
OFFSET = number of pixels to offset from the top. In your case = the height of the sticky twitter bar
Add a widget option with your desire OFFSET (=integer, #pixels) from the top:
$(‘table’).tablesorter({
widgets: [stickyHeaders'],
widgetOptions: {
stickyHeaders_offset: OFFSET
}
});
In my post I mention a "divHeader", but in your case you already have the twitter bar - see if you need any of these CSS as well, in case your twitter bar doesn't cover it all
#divHeader
{
position: fixed;
top: 0px;
height: OFFSETpx;
width: 100%; //to cover all the rows scrolling in the back…
background-color: White; //to cover all the rows scrolling in the back…
}
Add this CSS to your main div containing your table:
margin-top: OFFSETpx;
This way you’ll achieve smooth table sticky-enabled scrolling, with your sticky twitter bar
You can see my complete post about it.
BTW, mottie, great job with the tablesorter! I believe your fork is pretty much the main one in use today :)