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.
Related
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.
currently working on programming my own website for my music. Everything has been going smoothly, but this one thing is just not working for me. one of my divs is not being hidden by the overflow rule.
The element has a position value of absolute and is almost an exact replica of another div that is behaving normally. The only difference is that one is translated off the screen to right and the other to the left. The left one is the one that refuses to be hidden.
I haven't been able to see why. I've changed various things around and still no luck. The only time I got close was when I changed the direct parent of the element from static to relative, but it moved all my items down and cut them at a certain point. I messed around with the CSS but could not bring them up at all.
I uploaded the entire code here as I don't know what all you need to look at:
https://github.com/OfficialXammaX/Official-LOVE-Website#official-love-website
Have hit a problem I've never encounted before.
I have a element, its a panel that is fixed to the right side of the screen, and the css for the positioning is:
.myPanel{
position:absolute;
left:0;
}
This works fine, the mark up for the panel is generated by vaadin.
Now everything works fine, however every now and then when I refresh the page the css position:absolute
is being ignored.
Naturally I open my devtools and see that according to the styles tab position:absolute IS being applied, it just doesnt look like it.
Now the odd bit
When I uncheck the tick box to remove the position:absolute styling nothing changes (as I'd expect) but when I re-check it, and the position:absolute is reapplied, the panel then shows correctly.
So even though there is no new css, removing then re-adding position:absolute fixes it.
I've always been under the impression that dynamically added elements will still take css styles that have been loaded pior. Is that incorrect?
I have ONLY had this in chrome, currently version 39
Any ideas?
UPDATE:
if at some point the css was being overridden I'd expect dev tools to flag that (style with a strikethrough etc) but its not. I have tried adding !important to it but get the exact same result (see is applied in devtool, disable and reenable fixes it).
I've noticed in the dom that vaadin is loading my custom javascript in the head, then the css, then its own inbuilt javascript.
This seems to be working according to the spec. If width and height
for a replaced element (which input is one) is auto, it's supposed to
use the elements intrinsic width and height, which might cause
absolute positioning to be overconstrained.
One fix is to wrap your inputs in a div, absolutely position that, and
use width/height 100% on the inputs. Note that Firefox also has this
behavior, and it is indeed in the spec, so it's better to fix the
website than to change Chromium.
~#9 chromo...#gmail.com
As per you saying:
I've noticed in the dom that vaadin is loading my custom javascript in
the head, then the css, then its own inbuilt javascript.
I would say this would be the case for all browsers. For more info, see a previous answer of mine in relation to this
Its a known bug which looks te be solved and the appears again, see also https://code.google.com/p/chromium/issues/detail?id=313221
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
My page, it keeps on getting different menu width when i zoom in and out. It is fine in IE, and no one else. I did not spot any fixed positioning, this seems to be using relative position.
have tried playing and disabling all CSS property to my menu bar through google chrome inspect element.
turn this from none to auto: " -webkit-text-size-adjust: auto "
Tried to use em ex px for my font-szie and padding. I am juiced out of ideas, save me internet!!!
www.magentek.com
Try zooming out, you will find press room gets pushed down. I got this SimplyBiz theme from wpcrunchy. It seems even the paid version have this problem too. The CSS and html is way too large to post, too much bloated codes, i think is sufficient to just use chrome inspect element.
I took a look at the site, and my opinion is that the css and js that make up the menu functionality are creating a 6th menu element. That would explain why an extra little tab is hanging off the end there. Since it doesn't have any content, the browsers are all handling the whitespace a little differently.
Did you by any chance modify the menu to take it from 6 elements to 5?