Ng-bootstrap when trying to add new line in tool-tip text. Its not displaying new line.
Tried <br/>, <p></p>,
,
, ... etc.
Can anybody please suggest
Please find below sample code link
Sample code link
Hi what ever you did is correct, you can use both
and
on top of that you need to write one css to it for class .tooltip-inner in style.css
.tooltip-inner {
white-space: pre-wrap;
}
i have tried in you stack blitz example its working for me.
Related
I am using this:
https://ng-bootstrap.github.io/#/components/timepicker/examples
Copy pasted the following code:
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
The result should be like this:
But it is different in a sense that annoying texts appear:
How to remove them? The api documentation doesn't mention anything about this.
those elements have class sr-only. It is a bootstrap class. According to docs:
Use screenreader utilities to hide elements on all devices except screen readers
Looks like the styles you use in the project. You might miss some css from bootstrap or some nasty things overrides the .sr-only styles.
In my case, the bootstrap css wasn't properly applied in my Angular project.
I had to add following line in the global styles.css.
#import url("https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css");
Just add ng-version = "1.5" to the ngb-timepicker to remove the annoying texts. Like this:
<ngb-timepicker ng-version = "1.5" [(ngModel)]="time"></ngb-timepicker>
That worked for me, but I have no idea why.
The solution is the next:
<ngb-timepicker [(ngModel)]="time" [spinners]="false"></ngb-timepicker>
Those are called "spinners" and are set as "true" by default.
Hope it works for you!
fast resolve
styles: [`
.visually-hidden{
display: none !important;
}
.visually-hidden{
display: none;
}
Add this to your style.scss or a seperatly design for the component and it will work
I just had to add
::ng-deep .visually-hidden{
display: none;
}
On the homepage of my developing ecommerce store just below the carousel, there is an image under the H1 "I Wish I Were Knitting..." that has a paragraph sort of wrapped to it.
I have applied a float class to the img tag which is located within the p tag. I have one line of text floating correctly by removing the bootstrap img-responsive class from the img tag.
Why won't the full paragraph wrap? I would put markup and CSS in this text here but because this code in question is part of a huge .asp system, I wonder if folks would please check out the markup and CSS with the Inspect Element on the page itself where you can see the other code and CSS around it.
I see you added class="floatleft" but you need to add the css float: left;. Tested using Chrome Dev Tools and it works :).
You can always add the class to your css using the following :
.floatleft {
float: left;
}
Then you will only need to change the CSS and not your HTML. Good luck!
I found my main error. It's an understandable error given the state of my development. Turns out I was editing the wrong css file. When I put my css in the correct file, everything worked. I'll examine your kind ideas and observations with appreciation. Yes, padding will help.
I have a snippet that does not fire on the tab trigger. Here's my code...
<snippet>
<content><![CDATA[
.contentBox ul{list-style: none; padding: 0;}
.contentBox ul li{padding-left: 2.5em; text-indent: -0.7em; margin-bottom: 4px;}
.contentBox ul li:before{content: "${1:•} "; color: #${2:Bullet color};}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>xcv</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.css</scope> -->
</snippet>
If I'm on an HTML file, the tab trigger (xcv) works. However, on a CSS file, it doesn't work. BUT if I select the snippet through CTRL+SHIFT+P, it will output the code. Also on CSS files, if I try the tab trigger within a selector, it will work.
I've tried setting the scope to source.css and text.css (as well as guiding it out), and none make a difference. I've also restarted Sublime.
Any ideas?
I have same issue with you and I had found a resolution to solve it.
I had read it at: Unknown CSS Tab Completion in Sublime Text
To fixed it:
Your code: <tabTrigger>sep</tabTrigger>
Exact code to it work: <tabTrigger>sep/</tabTrigger>
Hope it helpful for you
I had this problem for some time, and couldn't find any solution anywhere, and sure it works by putting a / behind the trigger, but what makes it not working in the first place ?
I think the answer here is emmet, and i fixed this by simply writing my trigger and instead of pressing the tab button, i press ctrl+space, and that somehow works for me, but i don't know why.
Hope this helps someone out there :)
To solve this problem, use the following tags and then restart Sublime.
<tabTrigger>css3</tabTrigger><br>
<scope>source.css</scope>
I've been working on implementing Parsley.js into a Rails app that is using Bootstrap for CSS and JS classes. I have everything working, except some CSS that is giving me a headache. For some reason, if there are any validation error the addon's height gets resized to occupy the whole space. I tried using the max-height property without any luck, and I think is something that can be fixed with a clearfix. Can someone please help me? An example of my error can be found here: http://plnkr.co/edit/6i6yqSvNXQLCDNvvK5el?p=preview . Thanks is advanced.
Edit: Here is a mockup of my desired output:
I have try to solve this with js but unfortunately not getting the js so I have added position: absolute to the error messages.
I have added following styles
#new_user{
position:relative;
}
.help-block{
position:absolute;
}
.has-error{
margin-bottom:32px;
}
here is the updated code
http://plnkr.co/edit/YzsdnGEPZmkMOLm7G1TS?p=preview
hope this will hep you.
I am trying to implement a js accordion I found and I'm having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It's not smooth at all. I don't know much about js so please explain your answers carefully. Thanks so much!
http://imip.rvadv.com/accordion.html
EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it
http://jsfiddle.net/imakeitpretty/ruwjn/
Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/
The problem wasn't the .js, and you don't have to write it all on jsfiddle, since it's JQuery UI, you can simple check it to include it, if it's another external .js, use it as a resource, check fiddle's documentation for that.
Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.
The main problem with the jumping was the:
.st-accordion ul li.st-open > a{
margin-top: 70px;
}
I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.
Hope it helps you!
UPDATE
Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:
body {
height: 2000px;
}
After looking at your code, you appear to be using this plugin:
http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
If you go to that page, it has the javascript options you need to control the animation speeds, as well as a working example which is more smooth than yours.