I am currently working on an AngularJS project for a tablet with the basic navigation through all the different pages. The project consists of all the basic features like Side Navigation Menu, a Header, the links of different pages, and a Footer.
The project is also created responsively using Bootstrap. I am not facing any responsiveness issue in all the elements created in the project except one.
When keyboard opens, the responsiveness gets disturbed.
Basically, the header div position gets distorted, the footer shifts above and gets placed right above the keyboard opened, and the side-navigation width also gets disturbed.
I tried the following things -
Used position: fixed, position: relative but nothing changed.
Looked into many different SO question links but got no fruitful result.
I have one option (hack) left that is stated in this SO answer given by Roberrrt but that's a long process and I'm short on time and doubt if it will be a positive hack.
Any help would be hugely appreciated.
Update :-
Giving an idea of how the structure of my project is -
This is the main page where a search box that is in-built in DataTables is used. The Header, Footer and Side-Navigation Burger Menu Button are as described here.
When clicked on the Burger menu, the side-nav opens in full-width as shown below -
Now on clicking the search box the following screen shows with all the elements distorted and responsiveness screwed -
For reference purpose, The theme that I'm working on is Inspinia
Related
ETA: I was brought in to help with one little bit of this site. I am not the designer, so I had to ask permission to share the site and get a staging site set up. I can now provide the link....
https://staging3.childsfirststeps.com/
I have stripped all the z-index/overflow instances I had been working with so it's a relatively clean slate.
In a nutshell, I need the Home page slider frame to overlap the nav items as per the image attached below. ON the other pages, I need the page header (title bar) to overlap the nav items. All this, while preserving the dropdown menu.
A client has requested (despite all objections on our part) to do this nav design based on a static design (image) she found somewhere. I thought it was technically doable so I set out to recreate it. I managed to figure it out but ran into a snag when a dropdown menu item was added: the z-index on the dropdown item is not behaving.
I have positioned all related items and stacked the z-index as I would expect. Everything works properly except the dropdpown menu items which currently sit behind the page header.
The menu items are all transformed (rotated) and translate on hover. The page header (title bar) needs to be stacked higher than the nav to cover the bottom bits of the rotated menu items.
The HTML is of course rather convoluted as the site designer is using WordPress and Elementor so moving containers around is not possible.
I have tried every z-index and overflow setting on everything I can think of.
Is this design achievable with a dropdown menu item?
main nav image
I recently designed a one-page website for myself using the latest Concrete5. My site uses a dynamic sticky nav which later turns into a fixed nav to the top when I scroll down. The tool bar covers the fixed nav and I cannot see it again until I scroll back to the top.
What I am interested in is this. Is there a way to have the wrapper class that C5 needs for editing to behave like an iFrame from days gone by. The effect that I am looking for is that everything under the toolbar be the website and still be editable.
When the concrete5 toolbar is visible, the html element in your HTML will have the ccm-toolbar-visible class.
With this class, you can change your navigation behavior based on the toolbar visibility. A common approach is to set the navigation position from fixed to static when the toolbar is visible.
Additional information on this topic can be found here:
https://www.concrete5.org/community/forums/customizing_c5/theme-fixed-header-in-admin-mode/#860110
https://www.concrete5.org/community/forums/customizing_c5/trying-to-make-a-header-stationary/#762608
I made my first Wordpress for learning purposes. I have downloaded Themekraft, and I added my own customized bootstrap header navbar, because I want to customize as much as I can.
I have some sections (only "inicio" and "articulos" are working), but when there is an article with photo (sometimes without photo happens the same), I have realised that blue navbar moves.
I tried to fix it in many different ways (adding a max width for the body
and navbar, deleting a lot of margins and/or paddings...), but I have only discovered that it is a problem of paddings... I think.
I mean, when I add, for example, a padding-top:10px for the body, everything seems to be ok... until I have an article or two. When it happens, it seems i have to add more padding-top on the body in order to "fix" the problem.
I have searched on SO suggestions, looking for some clues, but I found nothing.
Bootstrap navbar moves right on scroll
Bootstrap navbar covers top of section when linked
What could I do? I have uploaded the site to a server so you can check it.
http://pruebaint.esy.es/
As far as I can see it the issue is not any of your padding. Its the scroll bar that is causing the problem as the content moves somewhat to the left. If your page has lesser content without vertical scrolls you will not see the nav moving.
Is there any other problem that you see apart from horizontal movement?
I'm a novice / beginner and I am trying to create a html page that has images that when you click on them, a text box pops up and provides information. The text is about 150 - 200 words and I want the pop up boxes to be responsive.
After a lot of time spent on this, the best solution I found (at my beginner level) was to use a modal box with scroll bars (due to the amount of text to read). I have used this code / guide:
http://www.w3schools.com/howto/howto_css_modals.asp
and I amended line 8 in the code from absolute to relative because the original version does not allow the scroll bars to scroll to the bottom to read the text fully when I used the code and tried it for myself.
.modal {
display: none; /* Hidden by default */
position: relative; /* Stay in place */
I have uploaded a version here with the slight amendment.
http://sugastore.com/test/modal-textbox.html
However, I want to have multiple modal text boxes on the same html page and I do not know how to do this. I have been reading online and the information about numbered div ID's but the information has been too advanced for me to understand.
My question is:
Q1. How can I use this modal code to create multiple modal boxes on one page? (and for them to be responsive)
Also, but not so important (I am sure I can find a way from reading online, but will ask here as well).
Q2. How do I change the link from a button to an image, so you click on an image and the modal box pops up?
Q3. When I change the modal from absolute to relative (as detailed above) the semi-transparent black background does not fit the whole page, is there a simple fix to amend this?
I also welcome anyone who already has a script / code example for a simple responsive multiple modal text box pop up (upon clicking an image) that is responsive and allows for scrolling to account for a lot of text.
Try this:
Q1: You can use the code to create multiple modals but you have to give them different ID's. eg #myModal, #myModal1, #myModal2 or better still name them according to what they display. They should be responsive as bootstrap modals are designed to be responsive
Q2: Replace the button tags with image tags and give it the ID "myBtn". Clicking on the image should trigger the modal
Q3: Change the relative to fixed. This should solve the problem.
I am trying to make a similar offcanvas element in one of my projects. I found few examples, but since I am using bootstrap 3 I went on with this one: http://getbootstrap.com/examples/offcanvas/ I replicate it in my project, but instead of the toggle button on mobile I use Hammer.js like this:
Hammer("body").on("hold", function() {
$(".row-offcanvas").toggleClass("active");
});
The tricky part is that whenever my content inside the visible div, is shorter than the div containing the list of links (on the right) the page is scrolling. Once I add more content to the visible div, I do not get any scrolling and everything works as it should. I made a simple example here http://florin-cosmin.dk/offcanvas/index1.html , but it can only be tested on mobile, if you really want to see the scrolling (just HOLD not click anywhere in the body). The working example is here: http://florin-cosmin.dk/offcanvas/itworks.html
I tried to set overflow-x: hidden on the visible div, but that doesn't help.
Again, how can I remove scrolling on mobile even when the content on the left is shorter than the one on the right side?
It is very frustrating. Please help :)
UPDATE: I am testing it on default Android browser on 4.3 and 4.1.2. I need to use the default browser as my Android app uses a webview.