I am not sure why there is a spacing (margin/padding) to the left in the second and third tabs. The test site location is: http://new.vonsazkin.com/index.aspx
Click on Residents in top menu and then click on the Events tab or the Records tab. You'll notice that the grid is pushed down. If I set the width of the grid to auto, then it moves up where I want it, but it shrinks. The max width I can set is 66.67% but it is shifted to the right. I want the grid to be 100% width and not have the spacing on top. You can right click in the browser and click the Inspect Element option to view the page code and CSS for the site.
Any clue?
Thanks in advance!
Interesting :) I found where the problem is: style.css
.residents_block .tab-pane {
display: block;
...
This display: block is messing with showing/hiding tabs. With this CSS other tabs are there but have opacity: 0. I believe this is some custom css (which breaks bootstrap functionality) and you should remove it...
All you need to do is absolute position the table when its parent is relatively positioned.
.resident_workspace_form .table-wrapper {
position: relative;
}
.resident_workspace_form table.alt {
position: absolute;
}
The padding between tabs
I didn't really understand what's your problem, but if you have in mind the space between the tabs - you have padding. Also tabs have height at media (max-width: 1199px) and (min-width: 992px) The height of tabs.
Related
It's a bit hard to explain, but consider a flex header with a menu and then something else on the right which is fixed width. As the window size shrinks in width, there is less room for the menu. Eventually, the menu pushes the other thing out of the container.
Working example here.
Bad
Note how the "other thing" falls out to the right.
Adding overflow: hidden to the menu container element makes it so the "other thing" doesn't get pushed. However, this also prevents the drop-down menu from showing, of course. I tried to work around it by setting overflow-x: hidden; overflow-y: visible but this is apparently not a valid setting.
Better, but no drop-down menu
(Ignore that "Item 1" has been hidden. In the real code "Item 5" would have been moved to an overflow menu -- not included in the demo here.)
Question
How can I make it work like the bottom example, but without adding overflow: hidden to the menu? That is, how can I stop flex-box from pushing the "other thing" out to the right?
TL;DR. See the CodePen example linked at the bottom.
Limited spaces + multiple elements = unavoidably overflowing content
Your .logo takes up 50px and the .other-thing takes up 200px. Because you didn't set flex-wrap to the .menu, its width won't go smaller than the content. That means, as the viewport width shrinks, your .header will inevitably overflow.
Setting your .menu with overflow: hidden; wouldn't work in your favor either. Once your Item 1 and Item 5 are cropped out, your users won't be able to scroll to them because overflow: hidden; prohibits it.
flex-wrap: wrap; and #media for better responsiveness
Adding flex-wrap to the .menu would be a good start. That way, in small viewports, the .menu will flexibly wrap as needed. Also, to accommodate a wrapping behavior, I'd suggested you remove explicit height from .header and use padding for consistency.
Using #media for responsive layout will be a better long-term solution for you. Here I suggested resizing the .logo and .other-thing on smaller viewport as an example. In real life, you'd probably want to introduce a mobile-only menu UI (e.g. hamburger button) rather than keeping all menu items visible. Say, in a smaller screen (< 640px), showing 50px logo and 200px other thing with all those individual menu items simply won't work elegantly.
See this CodePen example here
Use example 2 and remove the overflow-hidden class. Add min-width: 0; to menu to fix overflow issues. Then set dropdown-menu to display: none;. I added a class called item-4 to your first child of menu. Then you can use the following CSS to show dropdown-menu.
.dropdown-menu {
display: none;
}
.dropdown > div.item-4:hover ~ .dropdown-menu {
display: block;
}
Fiddle
I have 2 boxes (About Us and Contact Us) that don't change (stack) when you resize the browser. I've checked the forums and it looks like I need either a clear:both or overflow:hidden. My problem is, I've tried both of those anywhere I can think of and nothing happens.
So far, I've tried overflow in the wrapper, box1 and box2. As well as paragraphs 1-3. I've also tried clear in pretty much every spot around/in/under the wrapper div in my HTML.
When the browser reaches the 768px breakpoint, you need to change the div's display mode to block so that it doesn't allow any other item in its horizontal space.
#media (max-width: 768px) {
#box1 {
display: block;
width: 60%; /* Set according to your requirement */
}
}
Output:
JSbin
I have a layout that breaks at 500px using floats and inline-blocks to shift elements. But chrome(40) does not render them correctly after breaking from smaller to larger size.
Here's the initial mobile layout
Expected layout on resize
Incorrect result
The div containing edit/delete buttons is displayed inline-block and floated right, but does not stack along the 'tags'.
div.link-div div.edit-delete {
display: inline-block;
float: right;
background-color: #3498db;
}
Complete CSS JSFiddle.
My break point is between mobile rotations so the browser will resize. This works fine for FF, IE. Is something wrong in CSS? Please give some workaround.
Well, a way to solve the problem would be adding a "float: left;" to the anchor Tags, to make sure it doesn't occur. You can wrap them in a div and 'float' that div left in opposition to the "edit-delete" div.
Here is your JSFiddle edited. I created a class to the div called "tags-div", which, on MediaQuery is set to "float:left;" on screen sizes bigger than 500px.
#media screen and (min-width: 501px) {
.tags-div {
float: left;
}
I have a problem with a menu on the following media query:
#media all and (min-device-width: 481px) {
.flexnav-show {
margin-top: 0px !important; } }
on line 633 in my style sheet.
When the menu folds down, the div #sidebar (line 426)is still visible under the menu. The #sidebar div should be behind the menu as is the #article div, both #article and #sidebar are contained in the #content div. But the #sidebar div is only one of those two whose position is set to fixed.
What should I alter to set the #sidebar div be beyond the menu and still have its position to be fixed? Could this be a z-index issue? This is the website link.
Thanks
-Sohail
Elements having position:fixed has a higher stacking context than static elements, which is why the sidebar is displayed over the menu. reducing the z-index of the fixed element's container seems to fix the issue
What No One Told You About Z-Index will be worth a read.
The z-index problem is further up the hierarchy, you need to put a high z-index on the #headerWrapper element.
Not too high as I imagine you'll want modal windows to still sit above the header but probably not much else.
Here's the situation. I'm building a webpage where i position an image on the right side of the page. When I make the browser window smaller, i want horizontal scroll bars to appear, so i include overflow: visible property. I also want the image to be positioned fixed so that when the page is scrolled down the content in the middle along with the background scrolls but the image stays as it is. But I am not able to bring both features to my page.The two properties seem to conflict each other. Is there a way around it?
Your code is too little.The problem of the front with the example of code.
try img fixed:
img.fixed{
position: fixed;
right: 10px;
top: 10px;
width: 100px;
z-index: 55;
}
I think you need to use css concept called media types....
you can not achieve this using only position:fixed
add this css to your page
#media all and (max-width: 699px), (max-height: 500px){
.overflowDiv{
position:fixed;top:100px;height:100px;width:100px;
overflow:scroll;
}
change max-width and max-height according to your need
here is jsfiddle demo
Hope it'll help you.
Thank you