I have a menu in absolute position and I would like to pass it in fixed position when the screen size is less than 64em AND when the scrollTop is greater than 15. Is it possible to do this only in css or it must be done in JS?
Thank you
Related
As you can see I used a <v-data-table> that takes up all available space. I achieved this result by adding height: 70vh to my <v-data-table>. Obviuously this solution isn't ok because I simply hardcoded the height and if I change the toolbar height (the one that has "Devices" written), I also have to change the data table height. Is there any way to achieve a dynamic height? (from toolbar to bottom of the page, take all available space)
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
I'm new here so I thank you in advance for your help.
I do have a 3 columns page and I want to have the 1st and the 3rd ones fixed (they don't have to scroll with the middle column).
Everything works fine but I positioned these 3 columns in a container div which has a 100% width and a 100% height but also a min width and height.
My problem is that my 3rd column positioned on the right of my page (my footer has the same problem) doesn't block at the min width defined for the container.
If I change the position to absolute to the 3rd column it works but it scrolls with the content.
Can anybody help?
Thank you
I'm using vb.net to make a screen saver.
I want my label where the text shows to always be centered no matter what screen size it is.
is there a way to get the screen resolution of the current monitor?
if i can get that then i can calculate the middle and set my label there.
Stretch the label to the whole width of the form and dock/anchor to left and right side within the label parameters. This will center your label whatever the size of the form.
I'm working on a Firefox extension, and am having problems getting relative constraints on the width of elements in the sidebar. For example, I want a description element in the sidebar that will always be as big as the sidebar when the sidebar is resized, and has text wrapping accordingly.
If I put a description in a box with a fixed maximum width, it will wrap correctly, but I can't get relative widths to work correctly using css. If is set the max-width to be 100% in css, it seems to just ignore it and the text will be on a single line and will overflow the sidebar. Any suggestions on how to put relative width constraints on a box in XUL so that text will wrap correctly?
It sounds like setting maximum width isn't what you really want. Have a look at https://developer.mozilla.org/en/XUL_Tutorial/The_Box_Model, setting flex attribute would be the right approach to make an element fill all the available space (typically flex="1"). The corresponding CSS property would be -moz-box-flex: 1.