I created date component in my angular project. flatpickr is working correctly. Even if I set position as below in the config, when test responsivity of the screen, flatpickr is aligned automatically top of the screen. How can I fix it? How can I align it's position to below of input?
check the dom if the inside flatpikr tag the 2 div are showing or not if not then set alignmemnt to the html element
Related
I have navbar
and I wrote the navbar in src/app.component.html
I am using router-link for the page to swap components
for every component I have a different background
if I am using background-image for a component it will not display in the whole page
only in the router-link that is under the navbar
what is the best method to do it?
I thought maybe I should an empty div and set it to display absolute and make the background-image width and height for fullscreen
Basic Solution:
Create an app.service
Create a BehaviourSubject in the service with the default bg image path as initial.
Subscribe to that BehaviorSubject value in the app.component and set the background-image path from this value, you can use the ngStyle directive for this.
ngOnInit of every single navigation component, fire its own bg image path via BehaviorSubject from the app.service.
Working stackblitz example
I am implementing sorting in an angular 8 app using ng-bootstrap table following the sample here https://ng-bootstrap.github.io/#/components/table/examples#sortable In the sample once I point my cursor on the header of the table, it changes to hand pointer with the class applied highlighted on the right in image below
Once I click on the header, an arrow appears on the left of the header value and the class which is responsible for it is highlighted on right in the image below
If we check the code in the table-sortable.ts file, these styles are coming from the 'host' property of directive as shown in the image
I am using the same directive in my angular app but the styles are not being applied to the header element. The sorting works but once I point cursor to header, the pointer cursor is not shown and after clicking on the header, the arrow is not shown although class="asc" is added to the header element as shown in the below image. The classes which are highlighted on the right in the above images are not there on the right here.
I can't figure out why the styles are not applied. I also set 'ViewEncapsulation' to 'None' in the parent component but the styles still don't apply. Please help me out with this.
I found the issue. I added the required th[sortable].desc:before, th[sortable].asc:before and other necessary CSS classes in global style.scss file and it works now.
I want to use the webchat plugin together with Bootstrap 4. As soon as I put the webchat into a site with Bootstrap the chat box gets clipped on both sides.
If I inspect the element I can see that overflow is hidden. If I toggle that off then the chat bubble is entirely visible, but the user input is broken.
As an example, on the attached picture the left chat is being clipped. The text should say "Just now" but actually reads "st now".
If I use the webchat script in a plain HTML site with no bootstrap then it works as expected.
How would I go about resetting the styling so that it works within Bootstrap 4?
It looks like the row class in Bootstrap is conflicting with the row class in WebChat.
Add this to your CSS to keep Bootstrap from adding a margin to the rows in Webchat:
#webchat .row {
margin: 0;
}
Hope this helps!
I have a search suggestion component that is displayed under a TextField. whenever text is entered into the TextField the search suggestion component displays a list of possible matches based on the current entered text... I have more content under the TextField that gets pushed to the bottom whenever the Search suggestion gets populated with results. Is there any way to overlay the search suggestions over the content underneath it instead of pushing the content down? in HTML/css I would apply the position absolute and z-index css properties to the search suggestion component but this doesn't seem to be the case in Nativescript. I see that Nativescript does support the z-index css property but just applying that doesn't seem to do anything. It doesn't look like Nativescript supports the position property... Any idea how I can make this work/what i'm missing?
You have a couple quick options. One is to use a grid as mentioned in the comments. Set the views on the same row/col. This is the same as stacking views on the z axis. Or an absolute layout and use the same positioning of the views within that layout.
I'm using Minton Template (http://coderthemes.com/minton_2.1/blue_hori/index.html)
As you can see from the image above, the top of datepicker being blocked by the fixed header menu. It seems the datepicker not automatically being placed at the bottom of the input field.
This is the JS code that I used.
jQuery('#date-range').datepicker({
toggleActive: true
});
This happen on smaller screen. Bigger screen display correctly with the datepicker placed at the bottom of the input field as image below.
I dont want the menu blocks the datepicker. Please help.
check the z-index of datepicker. the z-index in the css should be greater for the datepicker class than for the menubar.
check this link for more information about z-index