On iPhone Website Zooms Out When Clicking Dropdown? - html

I am having an issue with a site I am developing on iPhones. When I click a select element on my phone it zooms the website out and adds white space to the right side of the screen.
This only occurs when I click one of the two dropdowns that are on the right side of the screenshot (Industries or Category). While if I click a dropdown on the left side (Services, or Companies) It doesn't add the white space to the left of the screen.
I can't seem to figure out what is causing this issue?
EDIT: A little harder to see in the screenshot, but the blue filters block should be all the way to the right size of the screen, but white space is added to the right side when a dropdown is selected.

Related

Side bar is getting pushed down to the bottom of the page

I have 2 monitors. One is slightly wider than the other. When I put my page that has the right side bar with nav links and other controls, it shows properly off to the far right side of the page as you can see below. This is on the wider monitor.
And when I drag the browser onto my narrower monitor, the next image below demonstrates the results of pushing the entire contents of the sidebar down underneath the main content. How can I correct this problem to insure the right sidebar lines up with the tables that are floating next to each other down the main content area?

My Toggle Icon Not Functioning well. It shifted from right to left when i do click on it

I have made a responsive navigation bar, but when the screen gets small and I click on the toggle icon to expand it, my toggle icon gets shifted from right to left.
Here is a screenshot of the problem.
A link to my code:
https://github.com/Anonsatyam/Responsive-navbar
It is because you forgot to add "px". See this image.

How to get rid of of those lines going beyond the pictures?

My own website, I've done on the left side, menu bar and on the right side, three pictures stack below each other, with the white space in between.When I did box-shadow on all of the pictures suddenly the padding line began to show up as well. How to remove that? How to do to keep box-shadow only across the picture measurement?

How do I customise the dropdown when my navbar collapses?

I have a navbar on my page where the left hand side contains a bunch of views and the right hand side contains a bunch of actions (eg. create)
On mobile devices, I want the left side to collapse into a dropdown box while the action commands on the right stay the same.
I can get this working but I can't get it looking right. I have some working code here.
http://www.bootply.com/OEYfZVIaGA#
Basically, the problem I have is on the mobile view, when I click on "Toggle view", it turns the entire navbar into a dropdown list and drags the right hand side buttons down as well.
I would like it to act just like a standard dropdown list (http://getbootstrap.com/components/#dropdowns-example). I would be happy if it didn't drag the New button down when I opened the dropdown list.
How do I customise the behaviour of the drop down list from a collapsed navbar?

Hidden scrollbar reappears after state change?

I'm having an issue with hidden scrollbars after a div is hidden then shown again. Everything works fine on page load, but after the divs are closed with the toggle button and re-opened, the scrollbar is still invisible but the screen real estate where the scrollbar would be is rendered, pushing the nav menus away from the screen edge and creating a blank space. Could someone kindly point me in the right direction here? I can't provide any sample code, but you can see a live demo on my website using the "Slider" skin. The left and right navigation menus are what is giving me problems. Thanks in advance. :)