How to Center align the Navigation bar on this link? - responsive-design

http://medialoot.com/preview/css-only-navigation-menu/index.html
I'm learning how to make a website responsive and I came across this issue.
You see the ul left aligned and I'm trying to make it center aligned.
It kinda looks simple but I couldn't solve it. Please help.

Related

How do I disable scrolling twice on mobile website?

this website: http://mr-chemie.dev-pixalla.de has a scrolling issue on mobile phones and tablets. When scrolling in one direction, everything is working perfectly fine, but as soon as you change the scrolling direction you got to scroll twice. I noticed that when scrolling up after scrolling down, the vertical scroll bar on the right expands out to full height for a moment. When scrolling up the second time everything works fine.
I'm using Elementor page builder for Wordpress and got some knowledge with CSS. The problem did not occur on any other website I created. I just do not know any kind of property to solve my issue, neither did I encounter similar questions when searching for it on the internet.
Thank you very much for your help!
I had the same problem. It was caused by shape bottom divider turned on (Elementor, waves divider). The top one works fine. But when bottom is enabled - then the strange behaviour on mobile happens.

How to make the hint text of TextInputLayout vertically center?

Our design team follow the iOS catalog app , the hint text of TextInputLayout is vertically center, but when I try Android it is not. I don't seem to find an option to make it. So why they are different ? Or there's some way to make it?
This is a bug with the implementation of TextInputLayout in the material design library. We have fixed this internally and will be releasing the updated component soon.
As a work around you may be able to set the padding on the child TextInputEditText to adjust it so it is centered.

UIScrollView Canvas Equivalent?

I'm currently putting together a PoC for the web. I've done about 9 years of iOS development so I think in those contexts/concepts. What I need to build is something similar to a UIScrollView/CATiledLayer for the web.
I need to build out a tool that allows users to build their own flowcharts, something I've already built on iOS. I'm prototyping on the web and I'm not sure where to get started. I've played around with a few canvas libraries thus far.
I want to build something that can have a fixed viewport with other components rendered off-screen. The viewport has fixed bounds that you can expand and allows me to put subcomponents in the view and move them around if I'd like to.
My web/javascript experience is pretty much Ember, React and plain old ES5/ES6. My HTML skills aren't that strong and I think I may have missed something fundamental.
My goal is to have something that can work with an existing react stack my company uses. I'm happy to roll my own solution but would love to get advice about the right direction to pursue. I feel like I have almost nil domain knowledge in this area.
This JS library, Dracula should be of great help to you since you're working with drag and drop flowcharts. You can see a working example here. NOTE: This lib is based on SVG and doesn't use canvas.
Here's another beautiful live demo: Source code for JS Flowchart here
Also take a look at this Dragon drop fiddle
And regarding ScrollView in HTML, you can simply use divs with css styles overflow-y: scroll and/or overflow-x: scroll. Using flex layouts, apart from giving you mobile-like development feel, will help you have so much control over your layouts based on the screen size.
Hope this should get you started.

Issue with a mobile menu

I have a problem displaying the mobile menu. Here is the page http://www.hawaiiluaus.com/contact.htm
When you minimize the screen you can see the menu showing up very little bit, indicating it must be some sort of z-index issues. I tried a few solutions but it still did not work. I would appreciate any tips for this issue. thanks!

Silverlight 2 Zindex Issue on ASP.NET Page IE6

I Have a Silverlight Menu on a ASP.NET page,
on this page bellow the menu there's a Html Table
and bellow the table there's a dropdownlist.
The silverlight DIV is position: absolute; z-index: 999;
The silverlight App is designed with zindex in its elements, is windowless, and background transparent.
This Works fine on Firefox however in IE6 (requirement) it doesn't work, the silverlight gets bellow the html table and dropdownlist
Any help would be appreciated.
Thanks
Gabriel
I only spent a small amount of time reading up on this particular problem, but it seems that this is a problem with most z-index settings with IE6.
It appears that in Internet Explorer
(windows) positioned elements do
generate a new stacking context,
starting with a z-index value of 0 quote
I found an article that addresses this issue by setting the parent div's z-indexes as well. However, you mention that the Silverlight div has a z-index specified, but no code, so I can only guess that what you have done might be the same as in the article.
There is another article that makes use of iFrames, that you might want to look at as well.
Hope this helps you.
Well I had to solve the problem with a nasty javascript.
The think is the IFrame solved most of the problem, another part I had to remove any position: relative i had used, and there was still the ASP.NET DropDownList's that got on front of my silverilght Menu, I didn't have the time to solve this on a 'correct' way (if I can even say this). I had to use javascript to hide the DropDownList's and when the user hover out of the menu I'll show the dropdownlist's again.
this link with a working example helped me a lot.
Thanks for the help everyone that helped.

Resources