I use JqueryUI Accordion, and it works great.
I have a structure like this:
<div id="accordionHolder">
<div id="accordionOne"> </div>
<div id="accordionTwo"> </div>
<div id="accordionThree"> </div>
<div id="accordionFour"> </div>
<div id="accordionFive"> </div>
<div id="accordionSix"> </div>
</div>
This is displayed verticaly. Accordions are not big in size. How can I display maybe two or three accordions in line?
Thing is this project is really big, and I am inserting a functionality. I do not dare to touch CSS (not an expert in any case).
I have my page, a container in it. I can define my own rules there.
I have tried setting the main div to float-left and also display: inline... but without much success.
How can I accomplish this?
When I use: float-left on the accordions, they are not displayed anymore. Like they vanish. As soon as I remove the float-left, they show up again.
Image shows what I am trying to achieve:
I tried rendering accordion on separate divs, but when making it: Float-left, same things happens. It "enters" the previous one.
I tried moving them around with padding, but with lmited results. Probelm with this approach is when one accordion is expanded other move down, even if they are stacked horizontally.
I am runinng out of ideas :(
The accordion divs accordionOne -> accordionSix should have css display:inline-block;
This will make them line up horizontally.
Related
I have a little toggle button in the top right of a long form, that toggles whether the form is editable or not. It's sticky with reference to the top and bottom elements of the form. It works fine when I'm scrolled to the top of the page, but as soon as I get to the point where it becomes sticky, it loses the effect of the float-right class that's attached to it. Here's the code:
<div class="columns small-8"><!-- First item of the form --></div>
<div class="columns small-4" data-sticky-container>
<div class="switch round float-right" data-sticky data-top-anchor="userID:top"
data-btm-anchor="password:bottom" data-sticky-on="small">
<input class="switch-input" id="switchEdit" name="switchEdit" type="checkbox">
<p class="help-text align-center" id="editTitle">Edit</p>
</div>
</div>
Here's what it looks like before and after (the right edge of the picture is the right edge of the grid in both pictures):
Before:
After:
QUESTION: Why is this happening and how can I fix it?
P.S. I still haven't quite figured out how to make a jsfiddle or codepen thing cause I'm relatively new to web stuff (I usually work back-end, but my new job requires the front-end stuff), so sorry about that.
UPDATE:
I found this answer because I noticed that the .sticky.is-stuck classes set position: fixed in the css. I tried what they said, but that just put my little toggle all the way over to the right side of the window, not the right side of the column. So that's not an option. :/
I figured it out!
Instead of floating it to the right in a small-4 to take account for all the different sizes of devices, I set the width of the container to be 30px bigger than the actual element's size which was 64px (to account for the padding automatically there because of Foundation). My container code ended up looking like this:
<div class="columns" style="width: 94px;" data-sticky-container>
This way, the "column", so to speak, that the sticky thing was in was exactly the size of the element inside of it, and that itself was at the end of the row. Now it fits beautifully on all screen sizes, in the right spot!
I'm working on a mockup but keep running into issues with the navbar and main content layout. The page needs to look like the mockup image below on desktop.
I've tried everything I can think of and read up on the bootstrap site but continue running into problems.
First the navbar should be fixed so it scrolls with you. I've copied from one of their templates but it doesn't scroll like the demo unless I change it to pull-right. But if I use pull-right it removes the top spacing and first container spacing needed. I've tried the body tag padding-top but all it does is create more space between the nav and main container not above the nav.
The other issue is the row and column layout in desktop. The col-md-8 doesn't line up with the other col-md-4. It looks ok in mobile with 320 wide.
I'm pulling my hair and not sure what needs to fixed. If anyone can spare some time and have a look I'd really appreciate it.
Live links to the files are below.
link to image mockup
link to live webpage mockup
link to css override
On your CSS override you have the attribute .navbar (position:relative;) This overrides your navbar fixed top property.
As far as your col-md-4 goes..you have it wrapped in an html descriptor..which is this: <!-- -->. This just gives descriptions of what html attribute is listed. These descriptors are on a lot of your actual html and need to be removed in order for the code to work properly. Remember though some of them are actually descriptors...like <!--fixed navbar-->
hii just checked your live website all problems is the way you are using div tags .. so for first section of image and nav bar it should be in one div tag
<div class="col-md-12">
<div class="col-md-12">
<div class="col-md-4">IMAGE</div>
<div class="col-md-8">your nav bar </div>
</div>
<div class="col-md-12">
Banner
</div>
<div class="col-md-12">
<div class="col-md-4">
HR MARUTIS STUFF
</DIV>
<div class="col-md-8">
HI LOUREM THINGY
</div>
</div>
and soo on
HOPE THIS HELP IN YOUR FORMATTING OF PAGE
Everything seems to be fixed now. Perhaps the biggest issue I was having was getting the navbar in proper locations both desktop & mobile. Originally I was using an override for .nav to modify the margin in order to get the placement right in desktop, but in mobile view it would be in a different position, not to mention it kept sharing the margin ratios of 80px top and 120px right. This would force the toggled menu to be 80px further down rather default 0px. I couldn't figure a way around this so I figured why not try adding a div tag just for the margin spacing. Apparently this seemed to work after adding new info into the media queries. Also fixed a spacing issue when in tablet widths with nav and hero image.
As for the rest of the layout, I used col-md-3 and col-md-7 which pretty much lined everything up right away except for some padding needed. Everything else like h1 and h3 I used a simple class for mobile to adjust the margins again.
If there's an easier way or more efficient way of coding this I'm open to suggestions if anyone has some. Updated Live Link
I'm trying to implement a fixed nav bar, but after certain screen size (~width:989),
the nav bar moves down. It doesn't work on mobile either.
Image:
The navbar is completely stuck to the footer instead of staying on top of the page.
You can check the code at: http://www.lostsavings.co.il
You have a few other issues, but the major issue is that the nav-fixed-top content is at the bottom of the page right now... in other words, you have:
<div class="container"> content here </div>
<div class="navbar"></div>
<div class="footer"></div>
Move that navbar to the top of the natural document flow, as if you were using no bootstrap, jquery, etc...
<div class="navbar"></div>
<div class="container"> content here </div>
<div class="footer"></div>
You'll have to fine-tune quite a few margins, etc... and I see a few !importants that could be getting in the way, too, but I'm guessing some of that has been part of your attempt to troubleshoot this. Making the above change at least made the navbar appear at the top for me.
i am trying to realize a layout with bootstrap.css. It is especially a main view with a right sidebar. It looks great on the desktop, but i am trying to remove the sidebar when i have a mobile view.
Currently my layout looks like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
Main view goes here
</div>
<div class="span3 visible-desktop visible-tablet hidden-phone">
Sidebar goes here
</div>
</div>
</div>
So when i have a mobile view, the sidebar disappears. But the main view still has a span9 class, causing the whole view having some whitespace to the right. I am currently experiencing this on an iPhone 4 with mobile safari.
I am no css guru and i mainly work on the backend of webapps, but this time i just want to do it right, because it is for my personal blog. You can check out what i mean with this "whitespace" at my blog. I know that the navbar isn't pretty at all now, but this will be the next thing i'll fix.
Check it on www.responsinator.com
I guess there is no such white-spacing to the right. Moreover row-fluid class of bootstrap converts every child span class to full width when the site is opened on any other device except for desktop. So in any case, the width:100% is assigned to span9 when you open it on iPhone4.
There seems to be a little space on the right cuz of two reasons probably:
1. Text is not justified.
2. container-fluid adds a padding of 20px to the left as well as right.
Hope it helps. :)
Been playing with boostrap for a few days and amazed at the capabilities it has to offer.
Have been trying to have a "header" of some sorts, which is affixed to the top when the user scrolls down.
You can find my current work here: http://mp3dj.free.fr/affix/site/
However you will notice that, when scrolling down, the "POST 1" suddenlty jumps to the top of the page. i.e there is no smooth scroll behind like here: http://jsfiddle.net/namuol/Uaa3U/
Current code:
<div class="container">
<div class="row affix-top" data-spy="affix" data-offset-top="60">
<div class="span12">
<div class="row">
<div class="span3">
<img src="http://www.socialfork.net/public/images/default-profile-photo-female.jpg" class="img-polaroid">
</div>
<div class="span9"><h1>Samantha Sam</h1></div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="post1" class="box">
<h1>Post 1</h1>
<p> Scroll Down↓</p>
</div>
<div id="post2" class="box"><h1>Post 2</h1></div>
<div id="post3" class="box"><h1>Post 3</h1></div>
</div>
</div>
</div>
Any help appreciated!
What happens in your code is the row at the top changes its position to fixed when its offset to the top is smaller then 60px. The consequence is that it stops to consume any space above the next row.
In the jsfiddle you introduced there is a JS code you should understand and should help you.
This one is for you:
$('#nav-wrapper').height($("#nav").height());
It requires your header to be placed yet inside another div (class called nav-wrapper in fiddle). JQuery code above sets its height based on row height during initialization of the page. The height stays the same even if the top row disappears (of getting fixed).
Another part of the JS code:
$('#nav').affix({
offset: $('#nav').position()
});
makes you independent of the size of space above the top row, but in your case I think you do not need it (you can predict it always takes 60px).
when you use the solution from Marcin Skórzewski mind that if you're using a collapse in your navbar it effects the dropdown.
The height of the complete navbar is set using the small piece of JS code.
When your window gets smaller the navbar will be replaced with ||| (using default bootstrap)
When you're using a dropdown and press ||| to show the dropdown it will be placed behind the content below. It will not slide the content down. This is because the height of the navbar is set.
Possible solution 1: remove the height of the navbar when you click on ||| and place it back again when the dropdown slides back.
Possible solution 2: add a margin-top to the next element once the navbar sticks
update:
https://stackoverflow.com/a/15177077/1059884
an excellent solution using CSS