I have a problem with Facebook customer chat. When it pop up on a laptop let's say smaller screens, chat jumps under the website header and menu bar. Is there any possibility to change fb customer chat height or any idea how to make it to be over the header and menu bar?
Thanks in advance
Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index scale that begins at 1000. This starting number is random and serves as a small buffer between our styles and your project’s custom styles.
Each overlay component increases it’s z-index value slightly in such a
way that common UI principles allow user focused or hovered elements
to remain in view at all times.
So changing the Z-index value of chat box to a value greater than z-index of navbar might fix the issue.
Related
Vue 3 and UI newbie here. Given this playground area with a code sample, I wanted
In the "collapse" animation of the menu, for the entire menu to slide out (but if you notice, the size of the menu changes first - making it occupy less than 100% of the height - and then it slides out)
If it is a smaller screen, I wanted the side menu to be collapsed by default and for it to be an overlay when sliding in (so the main contents are not pushed by it when sliding in)
As a Vue and UI beginner, I feel like I am going down the wrong paths when trying to explore solutions for these problems, and was hoping the community of experienced developers could help me with them.
I ended up using https://github.com/amirkian007/vue-awesome-sidebar. It is a pretty neat component.
I have a very long XPage and use dialog boxes on multiple locations on it. I note that the xp:dialogbox control requires to navigate up to the xpage in order to be able to read it.
Is it possible to have it displayed (sometimes) centered?
The content (height) of the dialogs differ for each case?
With a bootstrap theme, the height from the top is managed via CSS, as a top margin. You can override that in your application-level stylesheet and possibly on each dialog. I don't think you can calculate the height of the dialog on-the-fly, but you should be able to identify the page height and calculate based on the approximate height you expect the dialog to be. I'm not sure if the browser will repaint if the user changes the height of the browser window, but if that is the case that's a browser restriction, not an XPages one.
I am having some issues getting my header images to flow correctly. This is a responsive WP theme.
Here is the design I am trying to achieve. (I am not worried about the social icons right now): http://screencast.com/t/0xJuqKuteU
First, I need the message bar with the redish background to flow under the logo and beyond the banner like this: http://screencast.com/t/CZ4DkbRA50R
Then for both the banner and the message bar, I need them to work better when the screen is shrunk down to phone size. This his how I need it to look on a phone: http://screencast.com/t/z5BQ7zB4
Notice the banner comes in right below the navigation and the message bar goes away.
Here is the site I am working on: http://dev.frugalreality.com
Thanks for your help!!
Having a screen CSS and Media/Phone CSS page should help in managing the two different screens.
To make the message bar "float" underneath the logo, you need to set the containing div css (#header-callout) to have position:relative; and set the z-index to something negative (z-index: -1 should do). This creates a layering in the divs and puts the message bar below all other divs (unless you set something else to a lower z-index).
For displaying things differently on the iPhone screen size I would suggest using a media-query. If you don't know how to use those, I suggest browsing through this article to get a better idea of what I mean: http://css-tricks.com/css-media-queries/
In order to NOT display the message bar, you will have to put display:none for the #header-callout in the css of the appropriate media-query.
Go to the following Foundation CSS framework documentation url:
http://foundation.zurb.com/docs/navigation.php
In the section named Nav Bar you will see an example for horizontal navigation bar. Now try to gradually minimize the browser's window, when the window is minimized enough (to be like mobile devices resolution) you will notice that horizontal navigation bar is turned into vertical navigation bar. I need to know the technical definition for this behavior occurred to the menu.
I believe you are looking for responsive web design; which is design that adapts based on the user agent's viewport.
Twitter's bootstrap framework for example, has responsive design built-in.
I've reproduced that effect using width: auto; float:left for each menu item, and on resize event I'm checking if all the items are aligned at their top. If the items are not aligned, I'm modifying to width:100%
here is an example of what I got: www.gabitzish.com (see menu)
I'm working on a Flex 4 application and I started customizing the interface with skins to give a whole new look.
So, I've created two scrollbar skins in Flash Catalyst (one horizontal, one vertical).
Its working great when I test the application through Catalyst so I took it and imported it on Flash Builder, copied the components and defined the new skins in my css file for the HScrollbar and VScrollbar.
The skin is working, all the buttons are ok. But, the scrollbar isnt resizing for some reason. It remains in the same height I've designed it to be regardless of the content it is bound to.
It scrolls the content in all the ways it should be but it doesnt resize and the thumb isnt getting all the way down.
Also I've noticed the following.
I have a custom component acting as a list. It extends Group and contains a Scroller. So at one place of the application the Scrollthumb is getting lower than on another place where the same custom list is used.
I also have to mention that this scroller works perfectly without a custom skin.
Anyone else having similar problems?
Okay, I know you posted this a while ago but I have been scouring the internet for days looking for why the scrollbar's thumb wasn't scaling like the default scrollbar.
There are a couple things to check, first is there a set height on your thumb's skin?
If not, and this is what I was overlooking, go to your scroller skin and at the point where you add the vertical and horizontal scrollbar set the "fixedThumbSize" property to false.
I suppose that your graphic elements are defined as every single part of the scrollbar (top arrow, bottom arrow, track, etc...): in this case you should check that the elements dimensions are not fixed... they should be in % to be able to change the dimensions based on the container.