guys. I'm a total noob when it comes to web design. I know that I'm kind of over using flex. But!! It's so easy with them.
Anyway, my issue is that one of my component (using TailwindCSS and React) is a Infinite Loading List, but the thing is that the element in the list are growing the container even do it has overflow: auto. I have been tearing my head apart.
I have set the container's background in a dark color so the problem could be understood faster. If you want to see the code itself it's on https://pastebin.com/Vhuxii6j
I really don't know what else to do. I have tried to put flex-shrink in the container so it would not grow, but it does nothing. I have tried putting the child elements as inline-flex, nothing.
Thanks in advance :)
Figured out the Issue
Here is what you need to do, on the scroll list you will need to change overflow-auto to
overflow-y-scroll and also add max-h-# where # is any of the preset number from the tailwind here is the link for the doc i refered to
I have attached link to the solution for the output where i set the max-h-80
This show that the issue is with the auto height inheritance. for which you may have to retink your base layout
NOTE - You may have to change the view on the codepen.io link and bring the result at bottom incase if it doesnt open it in that layout.
After a good night sleep and a work day. I managed to fix it with two simple class flex-1 and min-h-0 from TailwindCSS. This were added to the list's parent
Thanks to #Nishant Sham Vispute for trying :)
Maybe you can use this in the future.
Related
I'm creating a website (http://mat3.us/ba/) and as you can see If you access it there is some kind of border, I don't know, It's like the content width is not 100%, only the menu. I tried to find what It is but I couldn't.
It looks like you're using Bootstrap. That issue happens when you don't have containers or rows nested correctly.
In your case, the issue is in section#contact. The first div inside #mapa is a .container, but its sibling is a .row. That messes up the Bootstrap grid system, and causes your layout issue.
I figured this out by going into the browser's Inspect Element, and deleting elements (in the Source Tree, you can select and element and hit Delete/Backspace to remove it) until the issue cleared up. I then Undo the delete, and delete stuff inside it. Repeat until the issue has been identified.
This link does a great job of explaining the grid system in more detail.
I'm working on a couple of aspects of someone's website and I'm having a bit of an issue with getting the tabbed navigation to display properly without absolute positioning, and as it's set to absolute the text on the Details tab overruns the "footer" sometimes. (They use a random Testimonials block which pulls varied length quotes, the short quotes cause the overrunning. If it doesn't go over please just refresh)
http://goo.gl/5Iwc1r
Normally I would put this into a jsfiddle but to get the issue to display I would practically have to copy the entire css and html of the page, which wouldn't be very efficient and certainly not very clear to look through.
So, does anyone have any suggestions on the best way to approach this problem? All advice would be much appreciated.
I'm not 100% sure what you're trying to accomplish here. But I'll give it a shot...
Try adding a div underneath the tabbed navigation to act as a spacer, because of the way positioning acts upon screen real estate, this "spacer" div can keep things underneath it nice and tidy. Just set a height value to it to force the content to display where you would like it to.
Hope this helps :)
Because of the way you've structured your pages, it's not going to be easy. The content is places with a position: absolute;. This causes the content to not push down the footer, since the height isn't registered.
I think the fastest way to solve this, without having to rebuild half your website, is by using javascript. Since I see jQuery is loaded, I shall write this using jQuery.
jQuery(document).ready(function(){
setHeight();
jQuery('input[type="radio"]').on('click', function(){
setHeight();
});
});
function setHeight(){
jQuery('#wrapper').height('#wrapper > div > div').is(':visible').height());
}
This piece of code should set the div with id wrapper to the height of the currently visible div.
I haven't tested this, and it is no pretty solution, but it should work.
Good luck!
I'm creating my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.
I was trying to customize a theme for a CMS(ocPortal/vanilla) where I wanted the sidebar to be fixed along with the header. Making it fixed it not a tough job, but the problem is that the end user can add widgets to the sidebar which can run out of screen height. And then the fixed attribute would become useless.
Is there a solution to this problem as I have not been able to come around with anything.
There are multiple solutions to this problem, seeing you have not given an example, I will assume these widgets can be added and removed dynamically (meaning at anytime after page load). Assuming this, I have two possible solutions that you can try.
Solution 1 :
Try making each widget inside a tabbed/spoiler type container, so they become small when the end user does not need them at that point in time
Solution 2 :
As Rick Calder mentioned, you can also use the CSS rule overflow-y: scroll; so when the contents of your sidebar becomes larger than the height, a scroll-bar appears allowing the user to scroll through your widgets.
You may also combine these solutions together, to enable a LOT of widgets, dependent on what your personal preference is.
I hope this helps!
NOTE :
A simple search for html javascript spoilers will give you MANY examples of spoilers.
I've designed a website with an elaborate transparent header that has to pass over part of the main section of the page. I'm trying to keep the number of images used in the website down to a minimum, partly for size and partly for cleaner markup.
I want to start putting clickable items in a blank area under the transparency. I managed to get the image to overlap the div in question by playing with the z-index. Now of course, it's unclickable.
Does anyone have a clever solution to this problem? I can think of several different ways "around" the problem that are less ideal, but I'm hoping to avoid those and find a solution that doesn't use JS or an imagemap. I've tried to use a nested div with a higher z-order (outer div is -1, inner div is 1), but it doesn't work.
It turns out that it wasn't necessary at all to change the z-index. All I had to do was use the negative margin and I could click the content in the transparent area under the image. My mistake was making the initial assumption that I would need to change the z-index for some reason. If I had attempted it without touching the z-index, It wouldn't have been an issue at all.
you can $.Event to make an event and then trigger it when ever needed :)
prefectly cross browser and easy