Our application shows some select displaced in chrome
Options are displaced to left.
This happen when using multiple screen. Resizing screen fixe this issue.
We don't have custom css on options
Any idea how we can fix it.
UPDATED 1:
CSS select
When you want to use the padding property, your elements can go outside the div.
Force them to stay inside by using box-sizing: border-box;
This will maybe help you.
Related
So I'm working on a website where jcarousel was implemented.
I'm trying to convert the website to responsive and I have a problem with jcarousel plugin.
Problem is:
The jcarousel below 961px has a media queries both in CSS and in JS, where the width and height of the containers is set in order to fit the screen.
However, only the first slide shows, as the rest are blank.
Could you please tell me, whether it's a JavaScript/jQuery problem or purely CSS?
Thanks for any answers!
You have a width: 100% (and in media query width: 1030px;) set on #large-banners li. With these widths they can't float next to each other, instead they will line next under each other.
I managed to solve my own problem which was caused by both, CSS and JS.
I simply had to remove the width:100% form #large-banners li and set its width (with the use of jQuery) to match the width of the parent container.
Apparently, width in pixels allowed the content to be shown.
I'm writing in angularJS and I couldn't find a comfortable solution for this issue-
I have a div element with overflow: hidden property (since i'm using internal scrollbar) and inside that div I have a dropdown menu, triggered by a button click.
unfortunately, the dropdown in partially hidden (since it is exceeding the borders of its div parent.
The best solution i've found so far is to add the popover dynamically to the body and calculate its position for every button click, but it is a bit complicated since i'm also using a scroller...
Any help would be appreciated.
Thanks!
Tammy
Normally you shouldn't be able to do it without either removing overflow: hidden; property, or use absolute positions for your div and dropdown menu, which can be a bit tricky (make some search, there is a lot of topics on Stackoverflow).
But you can achieve it with position: fixed;, knowing that it will depend on the browser ; see a working example : http://jsfiddle.net/Nf7u4/
I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.
I am creating a shadowbox on my website that will pop up and allow users to pick from a number of options including some in submenus. The content within the shadowbox is going to be pretty extensive, so it needs to be able to scroll vertically and not scroll horizontally.
The problem I have is that the submenus are supposed to pop out to the right of the list and overflow to the outside of the shadowbox. This worked until I implemented overflow-y: scroll; in the CSS. Now, even if I use overflow-x: visible; it still acts as though the x-axis should scroll.
Has anyone encountered this problem before or have any tips on how to approach it?
try messing with a jsfiddle here
See http://www.w3.org/TR/css3-box/#collapse-scroll:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
I can't think of anything to solve this issue using CSS only, but it should be possible with JavaScript if dropdowns are outside the block with overflow: auto
I'm using rails3-jquery-autocomplete in my application. I've faced the following issue:
if you enter something in the input field so that autocomplete data gets displayed and scroll the page after that, the box with the autocomplete data isn't scrolled with the page. It stays at the same position.
You can look at what i'm facing here. Note that this example isn't created by me, so i'm not sure the same jquery plugin is used here. Nevertheless the issue is pretty the same.
add this to the css
.ui-autocomplete {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
Probably you are missing appendTo-attribute from options to Autocomplete. It defaults to body, but you probably want to have it your container div (hard to say exactly without seeing your code).
See documents.
But have you checked the scenario, after applying height and overflow for the result can't able to scroll through the list using keyboard down arrow, which can able to scroll using mouse. If we use keyboard to scroll it keeping the scroll bar ideal and making the highlight value to traverse throughout the list.
I know this is old but I just fixed this in my own project by adding a CSS property of "position: fixed" to ".ui-autocomplete" in my project. Check it out here if u want: 34.212.191.181:3000.
P/s the page is in Vietnamese, just play with the search box in the nav bar :)