I have bootstrap accordion at the website, which is positioned horizontally (inline-block panels)
Bootply - code
The problem occurs when I try to open text panel below the image, because all three other panels scroll to the bottom of accordion panel group. Example - screenshot1 screenshot2...
Can you please help me how to fixed all panels to top when open any of panels body text?
When I change .panel-default style to position: absolute; All four panels appear over each other
Live example here - http://www.twodotsmedia.com/u-izradi/uram-system/usluge.php
Just add following css:
.panel-default {
vertical-align: top;
}
Its better to always use vertical-align property with display: inline-block explicitly.
Related
We have a CSS table - made by CSS & DIVS.
The right-side menu is fixed at 20%, & this appears to be working properly...
in the middle of the screen, we have a table of 4-5 rows of information. The top line of the table is a link on each column, for sorting.
it only has a few lines of data (we will add 'pages' in later, when we get more data)
The problem, is that when the page refreshes when we select a link, (the SAME sort, or another sort - or just refresh the screen),the middle table "jumps" left or right.. it doesn't stay in the same position on the screen & is very annoying..
The CONTENT of the table itself is the same width - the table size doesnt change. but the table itself shifts position...
http://animals.kwister.com/directory/region
(try the links on the top of the table).
Is there a way so the table is "fixed" to the 'center' of the available space - reduced by the right menu / right side bar.
Of course, as i add more data / text - The width of the table will increase to cope, but it will remain 'centered'.
We may add a left menu / div in future, we're just developing this site & its not much to show as yet. This is the 1st time ive seen a css table 'shift' like this.
Its caused by the table-layout fixed, and the fact that you are adding the side panel with js.
You should probably look into using a CSS grid like bootstrap's for a more consistent layouts. or make your own with display: block, float: left, and widh: x%;
.column-left, .column-right {
display: block;
width: 20%;
float: left;
}
.column-center {
display: block;
width: 60%;
float: left;
}
or you could do a quick and dirty css fix on the right hand column and position it absolute:
display: block;
width: 20%;
float: left;
I noticed that the "messages" area is loaded at runtime using JavaScript.
Initially there is no content in the div:
<div id="messages" style="float:right; display: inline; width:20%;"></div>
Perhaps you can try to add nbsp; inside the div like this.
This might make the "20%" width to work.
<div id="messages" style="float:right; display: inline; width:20%;"> </div>
What I saw is that after the first page load the table is centered to the whole window, as if the "messages" div was not there (which is correct, because its content is loaded afterwards).
Then, when the content of the "messages" is present, the table centers to the remaining width.
I'm trying to create a fixed navigation bar on the left of a site using Bootstrap. This is the site: link
The scrollspy seems to work but the nav div seems to be underneath the Bootstrap containers (visible when scrolling the page, the white line separating the sections seems to be on top of the navigation bar). Also the navigation items aren't clickable.
How can I fix my navigation bar? Is it's placement outside the Bootstrap grid the problem (sadly I don't know a different solution as I use containers and rows for the separated sections of the site)?
Thanks in advance for the help and I hope the CSS isn't too bad O:-)
Add this style to scrollspy menu:
.scrollspy {
width: 50px;
position: relative;
z-index: 999;
}
I know I have gotten past this this before a long time ago but I can't seem to recall what I did. The text in the the buttons for the vertical spry menu bar can be aligned horizontally with text-align but I've tried to vertically align and have gotten nothing using the vertical align. I'm wondering if there is a property I need to define first or if I'm just being an idiot and missing it entirely. It is an update for www.eauclairetowing.com using a vertical spry menu bar not unlike the one currently on there.
I see your answers. I am currently at work but will try them on my lunch break. This site is going to be my new found love :D
If your menu items are in single lines only (no line breaks), give them a line-height that is equal to the height of the menu item.
Example:
.menu li a {
height: 100px;
line-height: 100px;
}
If it has more then one line per menu item, give it the display of table-cell and give it a vertical-align: middle
.menu li a {
display: table-cell;
vertical-align: middle;
}
Use padding-top like you've done in the current site:
ul.MenuBarHorizontal a {
padding-top:0.5em
}
I have a problem with Bootstrap 3. The setup is a simple 2-column page (sidebar and main content). Because I have dropdown menus which can overlay out of the main container, I cannot use the visibility:hidden or auto trick.
I use another technique which is applying a padding-left to the main container to ignore the floated element.
.sidebar {
float: left;
width: 200px;
}
.main {
padding-left: 210px;
}
Unfortunately, bootstrap navs use a clearfix internally which causes the navbar inside main to become as big as the sidebar.
http://jsfiddle.net/9ejqa/1/
Is there a way to make the clear only clear elements inside main and not including the sidebar?
instead of manually trying to make the columns yourself you can use the built-in bootstrap classes that do everything for you and are responsive.
First wrap everything with a div that has class="container"and in that you have a div with class="row" then add to the sidebar and to the main div the appropriate col class'
Use the bootstrap Grid page as a reference to see all the examples they have.
I have updated your FIDDLE with the basic markup to do what you need, hope that is what you are looking for.
I'm implementing a menu based on this one:
http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
(Demo)
The menu uses a UL / LI structure and CSS for appropriate rendering.
The trouble is, if the browser is not wide enough, the main menu items wrap.
I have surrounded the menu in a DIV.
When I apply
overflow-x: auto;
to that DIV, mousing over a menu item causes scroll bars to appear around the DIV (presumably to accommodate the drop down menus).
How can I prevent the DIV from wrapping while retaining the drop-down menus?
You could simply add a fixed width to the div tag, like such width: 700px;
The best solution I can think of is the one suggested in the comments in The Jonas Persson's answer. It's using white-space: nowrap. For this to work though, you'd have to be using display: inline-block instead of float:left/right to horizontally align the menu's elements.
I played around with your demo using chrome's web developer and made it work.
Just replace every float: left with display: inline-block Add font-size: 0 to ul#menu and override it on ul#menu li with font-size:12px - that's the size your using. (Using display: inline-block adds some whitespace between the blocks. That font-size stuff takes care of it.).
Next ensure the inline blocks are vertically aligned with the top of the container - add vertical-align: top to the li's.
Finally, add the whitespace: no-wrap to the div wrapping ul#menu. That's it.