I'm using PrimeFaces 5.2 and I have a p:selectOneMenu inside a p:panel. If the selectOneMenu is outside of the panel the issue does not persist, but when inside the panel it looks like this:
You can see the distortion on the right side of the selectOneMenu.
I tried some CSS editing but it doesn't seem to help:
.ui-selectonemenu-panel{
width: 150px;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper{
overflow-x: hidden;
}
Setting width to 150px in .ui-selectonemenu-panel only helped restore the dropdown menu's size, not the distorted part itself.
Changing selectOneMenu width from the xhtml file doesn't fix the issue. The theme I used is a PrimeFaces theme called "bootstrap" but resizing the theme doesn't work as well. I didn't try different themes because I'd like to keep using this theme.
This is the way the selectOneMenu should look:
I couldn't find anything on the web similar to this issue. Any help is appreciated.
I figured it out thanks to Geinmachi's comment. Changing ui-selectonemenu-label seems to work.
Originally my selectOneMenu has a 150px width and I edited ui-selectonemenu-label like this in my CSS file at first:
.ui-selectonemenu-label{
width: 80px !important;
}
And every my selectOneMenus started to look like this:
You can see the gray area on the right side caused by the shrinked label. And when I make the width 200px it looks like this:
But when I set the label width to 150px I observe the same extra space as pictured in my question. So I tried to set it to 120px and it looks fixed. I think the gray dropdown button on the right side has around 30px width thus setting the label width without respecting that 30px difference causes extra space by overflowing beyond the selectOneMenu.
However, I still don't know why the extra space only occurred when selectOneMenu was nested in a panel.
Related
I'm new to this forum so hello to all.
I'm working on a WordPress website theme called tesseract. I am new to WordPress so have limited experience working with it.
The problem I'm experience is with the menu at the top of the page. If you visit www.avoinvents.co.uk and take a look you'll see that the categories don't sit on the same line. If I remove one of the categories the page looks much nicer and neater. All categories are necessary so I could not delete any.
Could anyone on here suggest how I make the necessary changes to fix the menu.
Many thanks
Here's the CSS that I changed in my browser to make the menu appear in all one line:
#masthead {
padding-top: 10px;
padding-bottom: 10px;
}
#site-banner-left {
width: 100%;
}
The main problem was that the site-banner-left CSS definition had a width of 60%, causing the text to wrap around its border, so I changed its width to 100% and added the padding to make the navigation area a little bigger. If this messes with other parts of the theme, try making the text size of the site-banner-left definition smaller instead of changing its width. Hope this helps.
You have limited the available width because an ancestor element, #site-banner-left, has a width of 60%. Increase this value or remove this rule to allow the entire menu to fit naturally.
Additionally, since the menu items are inline-block elements, you can force them to be on one line by setting the parent element's white-space to nowrap:
.nav-menu {
white-space: nowrap;
}
http://primoburgers.herokuapp.com/
I am working on this website. It looks fine on my laptop, but when I load it onto a bigger desktop monitor, it has a red bar under the html tag at the bottom of the page. This red bar shows under all of the pages. Does anyone know how to remove this?
Thank you for taking the time to look at this!
You need to set your html and body elements to height: 100% first.
After that set top-pic-wrapper to height: 85% or so. % height wont take effect till the other parent elements also have a height set for them.
No need to define a height for your menu pic class.
Just change your class below
.heightMenuPic {
height: auto;
}
I'm developing a website template and just spotted an issue with the gallery lightbox plugin. http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html
When the gallery has more than 1 image the lightbox renders just fine but when it has only 1 image the large image wrapper gets smaller than the image.
I kind of spotted what's causing the issue - this template uses foundation 3.0 framework so on foundation.min.css file the very first selector is causing the problem:
" * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
I tried to remove this and it fixed the problem however the whole website gets broken.
I'm not sure what code shall I paste here. If necessary I can post a link to download all the template files.
Thank you!
Don't change this code, modify the css for your wrapper instead. That snippet of code you posted is telling all elements to include any borders, and paddings in the calculation for width. So a box with 10px of padding and 5px of border space and is 200px wide is actually 200px wide. Without this code the box would actually be 230px wide.
You could do this...
Add to the class lightbox-outer - overflow: hidden.
.lightbox-outer {
overflow: hidden;
}
This works but it hides part of the image, it's like your box doesnt want to scale to the size of the image.
Do you have a setting in the lightbox stuff anywhere that is setting the a specific proportion?
EDIT2: Something else I found, if I remove "width" from the class .lightbox-skin then it starts behaving again. Problem is this width is applied to the element inline dynamically?
I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/
When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.
In landscape view, this scrolling isn't there and it renders as I'd like it.
I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?
Just adding a border to some divs can cause the layout to change.
Add this to the bottom of your css to find the rogue element:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.
I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.
Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.
One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.
A different approach would be to run this JS code in the console to find them:
Array.prototype.filter.call(document.querySelectorAll('*'), function (node) {
return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth
});
This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.
You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.
Interestingly enough, this was only seen on iPhones, not on Androids.
I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.
http://sorgalla.com/projects/jcarousel/
Above is the carousel application i'm using (one of the more popular open source ones at the moment) and I can't figure out how to change the default image width as I have a dozen or so pictures that all have a pixel width of 170px and yet the current setting seems to be set at around 80px which makes all of the images overlap, how do i change this? Is there a way to add some margin in as well? I tried changing the css in jcarousel/skins/tango/skin.css but apparently, even when I delete everything in that css file, nothing gets affected on the carousel page - when I remove the link the carousel stops functioning and turns into a wide div with static images, which is very odd to me.
That carousel uses <img> tags which means you'd either have to specify each width in the markup like this:
<img src="..." height="..." width="170" />
or use the img selector in the CSS file, something like this:
.jcarousel-skin-tango .jcarousel-item-horizontal img {
width: 170px;
}
Either way, you'd also have to make the carousel container wide enough to accommodate its contents. You can give the containing ul some large width (the excess would be hidden anyway), like:
ul#carousel {
width: 99999px;
}
The carousel would stop at the last image anyway, but at least you'd know you have more than enough room to accommodate however many pictures you have and prevent the overlapping.