I have a very simple ui-select component in my application like in the following examples :
http://angular-ui.github.io/ui-select/demo-basic.html
After migrating from Bootstrap 3 to Bootstrap 4. The component is still here but the results are not displayed.
What I've tried so far :
I used the console to check that they were in the code and they are.
I tried to add dropdown-item class into the results but it didn't work
I had the same issue and adding following css classes to Style.css resolved it.
/**
* ui-select.bootstrap4.shim.css
*
* Adapt `bootstrap` (v3) theme from AngularJS `ui-select`
* component to Bootstrap v4.x look and feel.
* Bootstrap v4.x look and feel
*
* Feel free to test and open issues and pull requests.
*
* #see https://angular-ui.github.io/ui-select/
*
* #project ui-select.bootstrap4.shim.css
* #version 1-20180706
* #author Francis Vagner dos Anjos Fontoura
* #copyright 2018 by the author
* #cssdoc version 1.0-pre
* #license MIT
*/
.pull-left {
float: left !important;
}
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
margin-left: 0;
vertical-align: middle;
width: 0;
}
.pull-right {
float: right !important;
}
.ui-select-toggle.btn {
border: 1px solid #ced4da;
}
.ui-select-choices.dropdown-menu {
display: block;
}
.ui-select-match-text {
max-height: 24px;
}
.ui-select-match.btn-default-focus {
border-radius: .25rem;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
outline: 0;
}
.ui-select-match.btn-default-focus > .ui-select-toggle {
border-color: #80bdff;
}
Reference : https://github.com/francisfontoura/angularjs.ui-select.bootstrap4.shim.css/blob/master/ui-select.bootstrap4.shim.css
Turns out in BS4, the menu is displayed only when the show class is present along with the dropdown-menu class and not displayed otherwise :
.dropdown-menu.show {
display: block;
}
To fix my issue I had to take this part from BS3 and copy it into my own app style :
.open > .dropdown-menu {
display: block;
}
I'm well aware that this is not the proper way to do it but it will do the trick until angular-ui receive a BS4 ready update.
I had the same problem and after seeing that ui-select needs a lot of work to be fixed for bootstrap 4, I wrote a small directive to replace it.
The goal was also to keep it simple and looking native in bootstrap 4.
It's available on npm.
Related
I have an iFrame generated by ThingLink that I need to drop into an existing web page and behave responsively.
I would have thought that the usual CSS used to make YouTube or Vimeo iFrames would do the job. Which it does on most browsers, but for whatever reason this does not seem to be the case for Safari on IOS (Safari desktop appears to work). Why is this? Is there something in the Iframe's HTML that is causing an issue?
Here's a Fiddle showing the iFrame in question misbehaving (top) and a sample YouTube iFrame behaving (bottom).
And of course the actual code I am using
HTML:
CSS:
div.iwrap {
width: 100% ;
position: relative;
padding-bottom: 60%;
height: 0;
-webkit-overflow-scrolling:touch;
overflow: hidden;
}
.iwrap object,
.iwrap iframe,
.iwrap embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
border: none;
}
iframe,
object,
embed {
max-width: 100%;
}
You can see I've tried trying out the absolutely positioning each corner of the iframe, but with no joy.
I should stress that it is only Safari on IOS that it breaks. Safari for desktop and Android for mobile look good.
Any pointers to get that working would be much appreciated, but more importantly, why isn't it.
Using responsive iframe code I devised for myself, and using your src= url, I created and tested this Pen on CodePen.
Using CodePen's CrossBrowser Testing, the Pen displays and functions correctly on Android mobile devices. (With one exception: the embedded Youtube video has no audio in CrossBrowser Testing although in normal view it does.) But on iOS devices it displays only a black square where the content should be.
I'm not certain from your post whether this is the failure you are talking about.
I have other Pens, e.g., Responsive Iframe - Base Code, which function correctly on iOS devices. Just the one using your src= url does not.
This leads me to wonder whether, even though using known responsive HTML and CSS, there is something about the source that's not playing nicely with iOS.
I'm not sufficiently versed in the technology to be able to suggest what that might be, however, I hope I've demonstrated that even with code known to be responsive the source document doesn't display in iOS. Thus, the problem appears not to be with the code but rather some conflict inherent between the source and iOS.
Sorry I couldn't be of more help, but maybe this will help you to rephrase the question and question title more narrowly and specifically so that it will grab another user's attention.
The editor insists that, with a link to CodePen, I must include some code. So, merely to satisfy that requirement, here is my responsive HTML and CSS code.
HTML:
<div id="Iframe-Thinglink"
class="set-margin set-padding set-border set-box-shadow
center-block-horiz">
<div class="responsive-wrapper
responsive-wrapper-wxh-600x480"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="//www.thinglink.com/channelcard/632903487365054466">
<p>Error Message Here</p>
</iframe>
</div>
</div>
CSS:
/* CSS for responsive iframe */
/* ========================= */
/* outer wrapper: set the iframe's width and height by setting
max-width & max-height here; max-height greater than
padding-bottom % will truncate to padding-bottom % of max-width */
#Iframe-Thinglink {
max-width: 600px;
max-height: 100%;
overflow: hidden;
}
/* inner wrapper: make responsive */
.responsive-wrapper {
position: relative;
height: 0; /* gets height from padding-bottom */
/* put following styles (necessary for overflow and scrolling
handling on mobile devices) inline in .responsive-wrapper around
iframe because potentially unstable in CSS:
-webkit-overflow-scrolling: touch; overflow: auto; */
}
.responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-650x315 {
padding-bottom: 56.25%;
}
.responsive-wrapper-wxh-600x480 {
padding-bottom: 80%;
}
/* general styles */
/* ============== */
.set-border {
border: 5px inset #4f4f4f;
}
.set-box-shadow {
-webkit-box-shadow: 4px 4px 14px #4f4f4f;
-moz-box-shadow: 4px 4px 14px #4f4f4f;
box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
padding: 40px;
}
.set-margin {
margin: 30px;
}
.center-block-horiz {
margin-left: auto !important;
margin-right: auto !important;
}
Got an issue on pages like this where the left border of my checkboxes appear cut off. Looks really unprofessional. Only seems to happen on iOS. I thought I could just add some padding to the div (or margin) but not the case. Is this common?
Try this.
input[type="checkbox"], input[type="radio"] {
-webkit-transform: translate(0px); /*Earlier than iOS 9.0*/
transform: translate(0px);
}
I think the problem is your framework (WooCommerce?) or plugin/theme for it. It has strange CSS code like this:
.single-product div.product .images {
width: 41.1764705882%;
float: left;
margin-right: 5.8823529412%;
margin-bottom: 3.631em
}
.single-product div.product .summary {
width: 52.9411764706%;
float: right;
margin-right: 0;
margin-bottom: 3.631em
}
I don't know why these numbers so fractional, but in this case your checkbox looks OK:
.single-product div.product .summary {
width: 52%;
...
}
I advice you to figure out why your framework/plugin/theme has so fractional numbers, but if you don't want/can't, you could use workaround with margin-left: 1px for your checkbox.
Can anyone tell me how to make ng-input-tag(Angular) scrollable in X-direction.
Currently if I insert the tags then the height of the div increases.
What I want is that If I go on inserting the tags then it should scroll in X-direction
I have tried:
width: auto;height: 34px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;
But it didn't work as expected
So let me know where I am wrong.
I know this is late, but I have seen similar questions go unanswered recently and this one is at the top of a google search for this problem. This can be done using only CSS. If you would like an added visual effect, try customizing the scrollbar.
For the X direction:
This can get a bit ugly if you decide to set a min-width or width on your tags.
The only way I've found to do it in the X direction is using flexbox:
tags-input .tags .tag-list {
display: flex;
flex-direction: row;
overflow-x: auto;
}
tags-input .tags .tag-item {
/* Applying this display class */
display: inline-table;
/* OR set the tag width to ensure that the text is visible */
min-width: 150px; /* Could also use width: 123px */
}
This Github issue is also directly related to the problem.
For the Y direction:
Applying a fixed height to the .tags class and setting the overflow-y to scroll will give you the desired result:
.tags {
height: 34px;
overflow-y: scroll;
}
Try This
simple css to add on tags-input class for scroll on x and y axis
.tags-input {
max-width: 100%;
line-height: 22px;
overflow-y: scroll;
overflow-x: scroll;
height: 65px;
cursor: text;
}
Alright, I'm launching this website (beta) in an hour but I've just noticed an ugly bug. I've added a new counter (1, 2, 3, etc..) was previously using <ol>.
Look at this picture the before:
everything was even, the vote up button, the text all the way down.
Now the live version after adding new counter: www.leapfm.com is un even. (when it becomes double digits)
Please use FireBug or Chrome Developer Tools, if you need any further code I will provide it ASAP.
original code:
.subtext1 {
font-family: Verdana;
font-size: 7pt;
color: #828282;
}
.song {
height: 42px;
}
.counter {
float: left;
margin-right: 2px;
font-size: 14px;
}
.subtext {
font-family: Verdana;
font-size: 7pt;
color: #828282;
}
.title {
font-family: Verdana;
font-size: 10.3pt;
color: #828282;
}
(I'm adding an answer because I can't preview my code with a comment and they're not giving me enough space.)
Yes, an ol (or table) would've worked. But a quick-fix solution would be to give the counter a fixed width (say 30px). The only problem with this would be if you started having a lot more digits.
If you wanted to fix this using JavaScript (which would work forever), use code like this (jQuery).
<script type="text/javascript">
var counters = $(".counter");
var counterLen = counters.length; //one based
//convert to zero based
var largestWidth = counters[counterLen - 1].offsetWidth + "px";
//WAY ONE: DO IT WITH A STYLESHEET (I recommend this)
var stylesheetDiv = $("<div>");
stylesheetDiv.html("<style type=\"text/css\">.counter{width: " + largestWidth + "}</style>");
$("head").append(stylesheetDiv);
//WAY TWO: DO IT WITH A JQUERY LOOP
counters.css({width: largestWidth});
</script>
I used way one before. I'm pretty sure I have to do the div with a stylesheet inside for IE8.
For .subtext1, give it a margin-left: 15px.
For .counter, give it a height of 100% or 22px.
And delete the multiple between .title and .subtext1.
I'm trying to come up with my own star image that's slightly smaller and different style than the one provided in the gem/plugin, but Ajaxful_rating doesn't have an easy way to do this. Here's what I've figured out so far:
The stars.png in the public folder is three 25x25 pixel tiles stacked vertically, ordered empty star, normal star, and hover star.
I'm assuming as long as you keep the above constraints, you should be fine without modifying any other files.
But what if you want to change the image size of the stars to larger or smaller?
I've found where you can change the height in the stylesheets/ajaxful_rating.css
.ajaxful-rating{
position: relative;
/*width: 125px; this is setted dynamically */
height: 25px;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
background-position: left top;
}
.ajaxful-rating li{ display: inline; }
.ajaxful-rating a,
.ajaxful-rating span,
.ajaxful-rating .show-value{
position: absolute;
top: 0;
left: 0;
text-indent: -1000em;
height: 25px;
line-height: 25px;
outline: none;
overflow: hidden;
border: none;
}
You just need to change every place that says "25px" above to whatever height your new star image is. This works fine but doesn't display the horizontal part correctly. Anyone know where I would look to set the horizontal part as well? (I'm assuming it's in an .rb file somewhere based upon how many stars you specified in your ajaxful_rating setup)
Nevermind, I'm stupid.
In the lib/axr/stars_builder.rb, find the following:
def ratings_tag
......
#css_builder.rule('.ajaxful-rating', :width => (rateable.class.max_stars * 25))
....
end
Change the 25 to your new width.