I have a nav bar as shown as above. It is done using twitter bootstrap. However, there is alot of button.
Is it possible to make the whole nav bar scroll-able(via touch gesture) to see more buttons? (eg. right and left scroilable)
You might be able to apply this in your css:
.navscroll {
overflow-x: scroll;
to your navbar giving you the horizontal scroll.
Related
I am using a dialog from Vue Material (https://vuematerial.io/components/dialog). If I follow the link and open the first custom dialog on the page, it moves to the top left of my screen, and I can only see a portion of the dialog. The same happens with the dialogs that I have in my Vue app, and no CSS seems to bring it to the center of my screen. I am trying to show an interactive map in a dialog. Is there any way to keep my Vue dialog in the center of the browser window so I could actually see all of it and use it?
My dialog has the following markup:
<md-dialog :md-active.sync="showDialog">
<md-dialog-title>Map</md-dialog-title>
<interactivemap :lat="lat" :lon="lon" />
<md-dialog-actions>
<md-button class="md-primary" #click="showDialog = false">Close</md-button>
</md-dialog-actions>
</md-dialog>
It works the same in my browser: both at the docs and code sandbox.
When it's off the screen, the inner div (with the class .md-dialog > .md-dialog-container) has transform: translate(-50%,-50%) scale(1);, pushing it off.
Edit: yea, every dialog box has this CSS bug. Try overriding it and/or notify the devs.
.md-dialog-container {
transform: translate(0%,0%) scale(1) !important;
}
Modified the answer given by https://stackoverflow.com/users/13602136/zed, and my dialogue now sits nicely in the centre of my screen
Please see my fiddle below:
https://jsfiddle.net/okiewardoyo/s23v891m/11/
.affix {
top: 0;
}
To make the screen wider, scroll your screen.
What I want is, if I scroll, the sidebar become fixed when scrolling reach the bottom of header.
Then, when I scroll and reach the footer, the sidebar is not fixed and it follows the footer.
You will need to add an offset to the content class, and remove it again using jQuery.
Add the id 'content' to your content div. Then add the following jQuery script:
$('.sidebar').on('affix.bs.affix', function() {
$('#content').addClass('col-sm-offset-3');
}).on('affix-top.bs.affix', function(){
$('#content').removeClass('col-sm-offset-3');
});
You can test this here: https://jsfiddle.net/TimOgilvy/s23v891m/16/
Note I added a clearfix to the header.
I am building a slide menu.
The menu is long and I need to be able to scroll inside of it, so I have set overflow-y: scroll on it.
I am using -webkit-transform (and variants on other browsers) as the transition property.
Now I can't scroll inside the div, using the scrollwheel when on top of the div will make the whole page scroll.
If I change the menu's behavior and transition the right property (setting the menu to right: -320px and animating it back to right: 0), the scroll works.
This bug only happends in Safari, it works fine in Chrome and other browsers. Also works on iOS.
Anybody know a workaround? Anyone experienced this issue before? I can't seem to find any info on it. Thank you.
I had the same issue with the difference that I use an animation instead of a transition and overflow: auto instead of overflow: scroll.
This fixed the issue for me (el is the DOM element to which the animation is applied):
function fixSafariScrolling(event) {
event.target.style.overflowY = 'hidden';
setTimeout(function () { event.target.style.overflowY = 'auto'; });
}
el.addEventListener('webkitAnimationEnd', fixSafariScrolling);
With Bootstrap3, stacking of radio buttons text is not happening properly in mobile(xs) view- bootply.
Screen shot:
As can be seen, text is not properly aligned to radio buttons in mobile(xs) view.
It is because of the .jumbotron line-height..
Try this:
.jumbotron {
line-height:20px;
}
http://bootply.com/101503
I have come to see that Sencha Touch framework is improving noticeably. Since I couldn't see something like what I want, I wanted to ask here and see if it's possible. I would like to hear your opinion on how to do some image change animation when the image is touched. When you touch the image, another image will animate growing from the middle.
Actually I also want to detect (if possible) the location of the touch on the image (Things I could do on iOS).
Is this possible? If so, any advice is appreciated.
Thanks
Panel has some properties to find out location of the touch:
var Xscroll = somePanel.scroller.offset.x;
var Yscroll = somePanel.scroller.offset.y;
Also, for your animation, you can do something like this:
Have 1 image on your 1st panel (make that image fit to the panel and keep it to background) like this:
JS:
App.somePanel= new Ext.Panel({
cls: 'somePanel',
html: '<h1>Welcome to my app!</h1>',
//some other properties
});
CSS:
.somePanel {
background-image: url(http://somesite.com/someimage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Have second panel like that.
On some event on the first panel do:
Hide that panel with animation
Show the second panel with animation
The list of animations is given in Sencha Touch API