I have flexbox layout with collapsible sidebar. I used 'fit' mode of jQuery colResizable plugin (JColResizer) created by Alvaro Prieto Lauroba v1.6. The problem is the plugin table not shrinking or can't calculate its width. The table widens but does not shrink.
It works perfectly in the plugin demo page but in my demo page it's not shrinking.
Plugins demo page
My jsFiddle
What am I doing wrong?
When I remove flex declarations and fixed position from div.dms-container it starts to work as its designed for: Widens and shrinks. All good. But I have to keep dms-container fixed to able to scroll longer table rows while keeping all other content still.
Related
I am adding a menu to the side of my page using Bootstrap. I want the menu to stay at the top of the page when the user scrolls past it. I have discovered affix which is in bootstrap.js. However because I am using different col sizes for the screen I am struggling to get it to stay in the right place.
I have got it to start at the right time and to make it position the top correctly but the width and the right are not working.
I am using bootstrap 3.3.
I think that I will have to use percentages of the screen width and then also do media queries in the CSS.
JS Fiddle
I have solved it.
The element with affix needs to be a child to an element with a col- class on it. You then also have to set the width in pixels for each different screen width that bootstrap recognises.
I'm having trouble creating Navbars while implementing Grid LayOut.
https://codepen.io/Aeshtray/pen/BdqeZL
In mobile view, I want the Navbar to be horizontal (as coded), but fixed,
whereas after the first breakpoint, at 500px width, I want the Navbar to be Vertically Fixed on the left side.
I already tried setting the position: fixed but that only jumbles up my whole layout.
Made some css tweakings, checkout this fiddle https://codepen.io/anon/pen/LjgoKE?editors=1100
Updated pen: https://codepen.io/anon/pen/BdGBBo?editors=1100
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
I am trying to implement the scrollable feature for a series of paper-tab's in a Polymer project, like so:
<paper-tabs selected = "{{selectedtab}}" scrollable>
<paper-tab>Page 0</paper-tab>
<paper-tab>Page 1</paper-tab>
<paper-tab>Page 2</paper-tab>
</paper-tabs>
Despite having my code be the same for the scrollable example in the official Polymer documentation, it is not working for me. Here is what is happening:
When I copy-paste more paper-tab elements to test it out, it shrinks the size of all the paper-tabs to accommodate the new ones. The arrows that are supposed to appear at the left and right of the paper-tabs element do not appear.
When I enable the scrollable, the original three paper-tab's are shrunk, instead of covering the full width of the screen. I tried setting the width:170px for each of the paper-tab's, but it's not reproducing the effect before enabling scrollable.
What can I do to maintain the width of all the elements the same so that they cover the entire width of the screen? that is, how can I avoid the re-adjustment when adding in more paper-tab's?
This seems to be by design:
If true, tabs are scrollable and the tab width is based on the label
width
The problem is that scrollable will change the styles of the tabsContent div and thus the tabs won't flex.
The current workaround is to measure if your tabs do fit in your available space and if not set the scrollable attribute.
You can also create an issue in the issue tracker.
i have a responsive layout that im working on but having troubles, whenever i try and shrink the browser to reflect mobile view the elements in my container are responsive but they get cut off.... this is due to a overflow hidden property on my container. Now everytime i set it off my elements in the main container appear but they just present them selves over my footer.
is there anyway i can get the footer to be responsive to those elements in the container and move down with the content?
https://trial.nationalpaymentcard.com/FuelMaster/enroll.html this is the link of what im trying to work on.
please inspect element and help me figure out this puzzle.
Thanks again!