I am still learning React and working on Next JS banner for work. I can't figure out why is this addBanner component not showing on the server and not showing any text too. What do you think I should do? Thank you!
Link to the issue on codesandbox: https://codesandbox.io/s/gifted-clarke-z5855?file=/pages/addBanner.js
I found the solution, I had forgotten to give Capital letter to the first letter of my component and give width and height to Image.:)
Related
I want to create a navbar like here: http://www.devoncrawford.io/
I couldn't figure it out how to interact with css elements through my ts code.
Maybe you can give me a tip, where I could research a bit more.
I would also love to get this autoscrollbutoon and just be able to interact with my css stuff.
I found a lot of jQuery stuff, but I am not familiar with it. Is that working in angular and should I learn it?
Thanks for your time. Sorry, it is a little bit general question, but I hope you can give me some advice
Check the below article which explain how to create sticky navbar using angular with good explanation and example
Ref:https://netbasal.com/reactive-sticky-header-in-angular-12dbffb3f1d3
Example:https://stackblitz.com/github/zetsnotdead/ng-reactive-sticky-header
I would use an windows eventListener to look at the scroll movement.
window.addEventListener('scroll', this.scroll);
After the scroll hits a number of vertical pixels, you could change the navbar background-color from 'transparent' to the color you want. (in the examples case '#fff'. You could make two different classes with the different background-colors and append or remove the css class.
Hope this helps.
I'm creating an RGB slider using angularJS and rzslider but I have a little problem in here and need some help. I want the value box or the span.bubble in css to be fixed on the right side. Please see screenshot below:
Here's what I have now.
Plunker
I prefer css solution but if it's not possible, any solutions will do. :)
I figured It out after posting the question, I read the docs again. Here's the updated code.
Plunker
Instead of using the span.bubble css as the result output, I hid it and created
<span class="color-slider-result">{{color}}</span>
and changed the name of span.bubble to span.color-slider-result.
How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...
I am in the process of using Foundation to create a website, and I have come across a problem that I can't seem to find the solution too. I have noticed that when expanded, some of my drop-downs get cut off in the Mobile Version of the Top Bar, and I was wondering if anyone had come across this issue, or had a fix for it. Did I do something in the CSS that made the JS no longer count all of the elements correctly?
You can see what I am saying here.
http://www2.100foldstudio.org
Just try this by adding in css.
.jScrollPaneDrag {
height:0px!important;
}
I think the link is break in theme
Update the link from
http://www2.100foldstudio.org/wp-content/themes/100foldstudio/_/js/functions.js
to
http://www2.100foldstudio.org/wp-content/themes/100foldstudio/js/functions.js
Figured out that if I add a List Item at the end of the main top bar section in "mobile" mode, and added a clearfix class to it, the js kicked in and started calculating the height correctly.
Thanks guys,
Hi
I have this really strange error....
I have two elements: paragraph and a link with an image inside of it.
Paragraph overlaps the link this results in that the link becomes ineffective...
How fix this?
Thanks in advance ;)
EDIT: Instead I will give you a link to mi site : http://e-skaitykla.lt/ . Try the posts images are the links and I can press them only in Opera.
FIX: There was misunderstanding in positioning types. P was set to have relative positioning. When I added the same thing to A tag all fixed
Thanks everybody who tried to help ;)
Absent actual code, I'd guess that you're either positioning the paragraph and the link absolutely or you're floating stuff inside the paragraph and the browser isn't correctly calculating the dimensions of the elements. Strip off any CSS and add declarations back one at a time to debug.