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!
Related
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 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.
Ok, so I'm working on a prototype of my UI before I start coding the webapp. I got the design mostly done while working in Firefox and (of course) when I tested it in IE, there were a lot of rendering issues. One of those issues is that if I have a div that contains some text and another div that's set to float:right, that nested div shows up on the next line, below its parent div. This is the problem markup in its simplest form...
<div style="background-color:red;">
Text
<div style="background-color:yellow; float:right;">Right</div>
</div>
I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the floating div at the beginning of its parent like this...
<div style="background-color:red;">
<div style="background-color:yellow; float:right;">Right</div>
Text
</div>
In reality, the nested div has a class and my CSS is floating that class. But what happens if I eventually make another stylesheet to target mobile devices and I no longer want that inner div to be floated? Then the content itself would be out of order in HTML, just for the sake of accommodating a CSS issue in IE. Is there a better way to solve this?
A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:
<div style="background-color:red; position:relative;">
Text
<div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>
I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.
Set a width value on your inner div and make it display: inline-block. Div's are block elements that take 100% width of the parent, that's why IE puts it on the next line.
I am not sure if it is a possibility for you, but putting the text within the outer div in a div of its own seems to solve the problem
<div style="background-color:red;">
<div style="float: left;">Text</div>
<div style="background-color:yellow; float:right;">Right</div>
</div>
I just hit this problem in IE7 - in my case, the item that was going to clear the float was going to be full width anyway. I just set that to "float: none;clear: left" and it seems to work.
I am trying to identify this bug. Is this a known issue already or is it totaly new? Is there a workaround (like a zoom:1 or position:relative that I can add to fix it?), idealy without modifying the html here but just adding to it.
If you display the below html in IE8 you will see the text from the select (combo box), is displayed twice. One outside of the combo box. This is messing up the flow of my document (not to mention looking weird).
<html><body>
<div style="width: 800px;">
<div style="float: right" >
</div>
<div style="display: none">
ijklmno
</div>
<div style="float:left">
<select>
<option>abcdef</option>
</select>
<div style="float: right">
</div>
</div>
</div>
</body></html>
This is definitely a bug, since you are pretty explicit in the layout style rules. But it's also a really weird arrangement to begin with. If you unhide the hidden div, add text OR hide the div below the select, the problem goes away. My best guess is that since you have overlapping block level elements with one hidden and one empty, IE is ignoring the float and trying to fit them on top of each other, which is forcing the option down, but since the select stays in place, its showing the option within the select as well.
Very strange and a very cool catch. Your options as I see them is to either add some content to the the last div (non-breaking space, probably) or hide the div (display: none), or both.
In Firefox, that last div is also not floating right and is overlapping with the select (you can tell by outlining block-level elements with the Developer Toolbar) which makes me think that Firefox is just better about handling overlapping block level elements.
If you set the last div to have a border, you'll see that it's not floating to the right of the main div.
http://dev.dealercontrol.net/dealercontrol/index_comp1.html
on this page I am trying to float a flag to the left of the subtitle
<div>
<div class="flag certified">Certified</div>
<div class="subtitle left">Deal On 09 Black Lamborghini LP560</div>
</div>
I can't seem to get the flag to layout properly what would be the best method to do so? also how can I set the height of the flag to wrap tight on the text inside of it?
Good lord man.
You have soooooo much CSS going on on that page it's no wonder you're tying yourself in knots. Just look at the huge stack of inherited and overridden styles on any element with firebug.
First off a simple float:left will do the trick but it will only work if the two elements have a combined width narrower than their parent container - otherwise what else can happen but it wraps?
Secondly, your code above isn't actually what's on the page. Too many container divs getting in the way - simplify and move the two required elements as sibling nodes of the same parent and give both float:left.
Thirdly, reduce your bloat! .clear classes are pure bloat (see here). You really don't need more than 2 CSS files (a global base and a page extension) so condense and merge your files. Cut out as much of the tag selector styles as you can (this is what creates all the inherited/ignored stacks which are getting you into an unmaintainable hard to decipher position). Hopefully at that point you have a working design and a lighter more responsive page you can debug more easily in future.
Put the flag inside the div and float it to the left
<div>
<div class="subtitle left">
<div class="flag certified" style="float: right">Certified</div>
Deal On 09 Black Lamborghini LP560
</div>
</div>