I'm using bootstrap-select it looks normal on chrome but on safari its stretched . heres an image attached:
not sure what could be causing it. I use bootstrap across my work and its only the boostrap-select / bootstrap-selectpicker thats doing this
Resolved:
After inspecting the page I realised that it was being affected by the height being set at 100%.
I updated
.bootstrap-select .dropdown-toggle .filter-option {
height:100%;
}
to
.bootstrap-select .dropdown-toggle .filter-option {
height:auto!important;
}
this did not affect the dropdown on chrome at all but resolved the issue on safari
Related
Oracle ADF 12.1.2 - 12.2.1 has an issue that table scrolling moves only a few pixels down at a time whe you move the scroll wheel while the mouse is over a table.
If you use the table scroll bars, it works as expected.
It also works as expected when using Google Chrome to view the page.
I found the answer here:
[https://community.oracle.com/thread/3527303]
add "!important" to the CSS property af|table::data-body like this:
af|table::data-body {
position: static !important;
}
I'm using <div ng-bind-html="data.html"></div> to display a html content, but I found that the text in this div cannot be selected.
How can I make text selectable?
I cannot select in chrome and ios device
I had Come across, similar situation. where one of our application need to work on desktop browser chrome etc. since it was Ionic app text select was disabled by default. here what i did.
body {
-webkit-user-select: auto !important;
.scroll {
-webkit-user-select: inherit;
}
}
May be helpful for someone.
There is an issue with text overflowing ui-bootstrap's popover on the Safari browser. The problem was initially seen on an iPhone with its narrow screen but also occurs on Windows7 running Safari 5.1.7. When a popover occurs outside the window, the horizontal scroll bar is enabled to view the element, however the text overruns the popover box. This issue does not occur either Chrome or Firefox. See Plunker
<button popover-placement="right" popover="On the Right blah blah blah blah blah blah" class="btn btn-default">button</button>
Ordinarily I wouldn't put a right popover on an element to the right, but again, this accurately depicts the problem I'm seeing on the iPhone with its narrow screen. It doesn't seem to be addressed in later releases of angular and ui-bootstrap either. Wondering if there is any work around short of rearranging my ui.
something like this?
plunker
.popover.right {
width: 100%;
}
I tested it on chrome and safari... looks fine to me.. just needed a small css tweak
I'm having an IE7 issue with a website i'm working on - www.mini-meals.co.uk
Basically, the background image is not showing on behind the form on the 'Free Trial'
panel, and is disappearing when I scroll down on the others.
I've tried adding position:relative; on a bunch of elements but it doesn't seem to
make a difference.
Any ideas anyone? thanks.
Add this style to your page to see if you are experiencing an issue with hasLayout:
.panel .panel-wrapper { zoom: 1; }
If this does correct your issue than a more "standard" way of correcting the background rendering would be to set an explicit width to those same ".panel-wrapper" items.
I am discovering css and I found a problem I can't fix.
My logo has a different position in IE7 than in other browsers like IE8, FF and chrome.
This is IE7:
http://www.prestashop.com/?ACT=29&fid=9&aid=16515_Awto8qE0tmhdhVFv8yWF&board_id=1
While IE8 and others show it correct, between the black and grey borders.
The css code:
#logo {
float:left;
margin-top:-45px;
margin-left:20px;
How can I fix this?
Different browsers have different default values for page elements. You should set all the elements to a base value. the best way to do this is using a CSS reset.
"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on."
Check this tutorial out:
http://meyerweb.com/eric/tools/css/reset/
All the best.