I'm using bootstrap 3.3.7 and I use the standard bootstrap classes to create a menu. I've restyled it so that the color is set to white with a purple backcolor. All is fine when the page is initially loaded. As I reduce the screen width with the mouse, my menu starts to collapse down as expected, but the menuappears to disappear. If I stop reducing the screen size and I then move my mouse over where the menu should be at that point it comes back into view. So the action is working, the menu isn't keeping it's color scheme whilst being moved. Have a missed a trick somewhere?
I get the same issue if I size my screen to e 767 such that my 'hamburger' button appears for the menu. I click the hamburger and nothing seems to display until I move my mouse over the left of the screen where the menu is.
When you resize you viewport size with your mouse, the end result is not always correctly shown because of the javaScript working on that resize.
Try to use only the specific window sizes given: Ipad Pro, Ipad, etc. After selecting use a CTRL + F5 or CTRL + SHIFT + R for a hard refresh, and afterwards tell me if the problem persists.
Also, check the built-in styles from bootstrap, it may change when you are on a tablet or mobile device.
codepen.io/bilpor/pen/gjRQgj
So after seeing the codepen, this is the desktop result.
This is the menu before I hover over it.
And this is the image after I hover over elements.
Regarding your issue, use you javascript code to run only on desktop.
$(document).ready(function () {
if (screen.width < 1024) {
// your code that affect navbar here
}
else {
alert(Error!);
}
});
Related
This Stackblitz example opens a simple dialog which contains a radio group in the mat-dialog-content div.
You can see that the dialog-content shows an ugly scrollbar:
This does not happen when other components are used: e.g. input, etc.
Using chrome dev-tools, I can see that the mat-radio-buttons have a height of 20px:
but the mat-radio-group only has a height of 17px:
Is this a bug in angular material components (the example uses version 12.0.4), or is there a simple workaround/css that we can use to get rid of the scrollbar?
I've tried explicitly setting the height on the mat-radio-group, but this has no effect.
Notes:
in production we do of course have many dialogs and some of them are large and need the scrollbars
we need an application wide solution/workaround
simply hiding the scrollbars is not okay: it must remain auto so that the dialog can react to size changes (e.g. user rotates device, some items are shown/hidden dynamically, etc.
For now we came up with a workaround that fixes the issue in all our 30+ dialogs.
The nice thing is that we can apply it in one place, in styles.scss:
.mat-dialog-content {
padding-bottom: 10px !important;
}
We just add a padding to the bottom of the dialog content area and then scrollbars: auto works as expected in all our dialogs (small and large). i.e. when you make the browser window larger/smaller, the scrollbar is automatically shown/hidden.
And it also works when there are multiple mat-radio-groups in one dialog.
The additional padding between the content and bottom dialog-actions is acceptable for our ui.
Stackblitz example with workaround
The reason this happens is due to the ripple effect on the radio button - which takes up additional space and causes the scrollbar to show. See https://github.com/angular/components/issues/20344
There are a number of ways to resolve this, such as using padding or margins on the components or on the dialog content itself like you did. The important thing is that there is enough space added to accommodate the ripple.
I add a vuetify drawer to my application, and set the position to fixed and temporary.
When the drawer is open (and I have overlay), when I try to scroll the drawer stay in position - good. but the problem is the event pass to the page, and the page is do scroll.
How can I fix that?
My code on codesandbox.
open the link
click on toggle and the drawer is open.
try to scroll (with the mouse)
if you do, it's bad.
Your problem is that you give the wrapper div height:3000px.
you have to set it to height:100vh - in this case it will take the maximum height of your screen (like 100% of it)
I am struggling with a primefaces calendar problem on a webpage rendered on a mobile device (tablet). It seems that the css values calculated by primefaces to show the popup calendar are not recalculated on window rotation (you need to click on it again to recalculate).
Here is an example:
I have my webpage displayed in portrait mode. I clicked the calendar icon and the position of the popup is good:
(notice the css with left: 719.406px, calculated by primefaces). Everything OK so far.
Now I rotate to landscape mode:
Notice that the popup is no longer near the calendar icon. Also, the css states that, by having the same left value.
In order to get it correct, I need to click anywhere on the screen to close the pop up, then click again on the calendar icon:
The position is now good, with a different and correct value of left: 1061.91px.
How can I make primefaces automatically readjust the css without having to double click each time?
The solution found for me so far was to add a custom value for the right alignment with the screen and override the left one:
.ui-datepicker.ui-widget.ui-widget-content {
left: auto !important;
right: 10px;
}
But the above solution is very specific for this screen and luckily because I always have the calendar button in the right part of the screen, so I can always assume that 10 pixels from the right will look ok.
I also noticed that ui-datepicker-div is a child of body element, so I cannot link it with the button with css.
Any ideas/help of a general solution will be highly appreciated.
Primefaces version: 6.2
This problem is fixed with Primefaces 7.0.RC3.
It was released a week ago.
https://mvnrepository.com/artifact/org.primefaces/primefaces/7.0.RC3
I'm building an app using foundation 5. I'm using foundation's topbar, which collapses to the (menu) hamburger button on small screens.
I want to add a button, that will be visible next to that button only on small displays.
I've tried adding the button outside of the top-bar-section, but that places the button outside of the entire topbar. I also tried putting it inside the title area but than it doesn't even render.
I know I can use show-for-small-only class to display the button only on small devices, but what I don't know is how force it to stay presented when the topbar collapses on small displays.
How do I increase the native FORM submit button size for OSX-Safari?
I want to keep the native look of a FORM submit button for it's respective operating system while also enlarging the size of the submit button. (Meaning, no use of images, custom borders etc..)
Using the following CSS:
input.submitbutton {font-size:150%;}
On Windows, this increase the submit button size height and width as desired ... regardless of the browser (Safari, Firefox, IE, Chrome).
But on OSX - Safari does not increase the button size at all. The form button size remains the default size.
Try to include this CSS property on your style:
-webkit-appearance: button;
Hope this helps!
Safari's form buttons are notoriously hard to style (if not impossible).
As others have said, height is pretty much untouchable.
What you can do is set the font size to an exact pixel size to resize the button.
input.submitbutton {font-size:14px;}
That should make the font size larger and the button as well. It does max out though...you can't just keep increasing the font size.
The "native look" of a pushbutton includes a fixed height by definition
Push Button Specifications
Control sizes:
Push buttons are
available in regular, small, and mini
sizes. The height of a push button is
fixed for each size, but you specify
the width, depending on the length of
the label text you supply. If you
don’t specify a wide enough button,
the end caps clip the text.
What you want would not be "native" and therefore will necessarily involve the creation of a custom image, or you can always do something like this
http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/
If you apply a border to the button, Safari abandons it's glossy button and you can do what you like with it.
I am using several input type="button" and they style ok using:
input[type="button"] {
-webkit-appearance: button;
height:40px;
}
They did not style without the -wbkit- line.
or use the <button> tag.
Particletree! Rediscovering the Button Element
It’s an edge case, but if you’re trying all sorts of things and just can’t get Safari to make button labels smaller, you might have activated the “Never use font sizes smaller than X” option in Safari’s preferences:
This snagged me yesterday. Just turn it off and Safari will be much more likely to respect your CSS directives.
input.submitbutton{
width:200px;
height:500px;
}
Seems obvious, but have you tried changing the element size instead of the font size?