I noticed a weird issue:
The bootstrap3-grid fails with my fixed header having a class="row".
Any idea how to fix this?
Here is a basic example:
http://jsfiddle.net/EPQqx/5/
Thanks in advance
Found the solution after playing around a little (if anyone has the same problem):
#header{
position:fixed;
width: 100%;
}
The trick is to add bootstrap-container insíde your fixed div like this:
<div id="header">
<div class="container">
[content goes here]
</div>
</div>
Related
Using Framework7, I created a toolbar. It worked great for the iOS theme. However, when I tested it on the material theme, it was on the top. I found some Framework7 documentation that pointed me to the "toolbar-bottom" class. However, the page-content acted as if the toolbar was still on the top, and the padding-top property was incorrect. I would not like to hard code overrides on the Framework7 css.
Here is my structure:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="page-content">...</div>
<div class="toolbar toolbar-bottom">...</div>
</div>
TL;DR read the docs you dumb OP
See this documentation page. In order for the CSS to work correctly, the toolbar must be before the page-content. Your format should look like this:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="toolbar toolbar-bottom">...</div>
<div class="page-content">...</div>
</div>
I'm trying to understand the difference between the two alignment properties start and none. In the demo, both the result looks the same, but what's the difference?
For example for this code:
<div layout="row" layout-align="none center">
<div>one</div>
<div>two</div>
<div>three</div>
</div>
And
<div layout="row" layout-align="start center">
<div>one</div>
<div>two</div>
<div>three</div>
</div>
When we should use start instead of none and vice versa? Here is the link for demos.
Thanks in advance and sorry for my english.
The attribute layout-align set the CSS property justify-content, and since none reverts to default, which is flex-start, and so does start, both render the same result.
So if you want to be sure it is flex-start, choose start.
I´m working in a Windows App but when I want to add a toolTip I get this exception: HierarchyRequestError. I´ve checked if all my tags are properly typed and it seems that there is no problem with them. Any ideas?
<div id="wrapper" data-win-control="WinJS.UI.Tooltip" data-win-options="{contentElement:'info'}">
<img src="images/news.jpg" alt="Donald Trump">
</div>
<section class="info-wrapper">
<div id="info">
<video controls src="videos/info.wmv"></video>
</div>
</section>
Nevermind, I can´t use a dash. I changed it for an underscore and it worked.
I have a problem with a standard Twitter Bootstrap progress bar with some text if it is within <div class="hero-unit">, also standard Twitter Bootstrap class:
<div class="hero-unit">
<div class="container">
<div class="progress progress-striped active">
<div class="bar" style="width: 80%;">80%</div>
</div>
</div>
</div>
Here is a jsFiddle code, that shows the text is not aligned properly.
Why this is happening and how to fix? I've tried to fix it but had no luck.
Thank you.
It is the line-height: 30px on hero-unit which causes the problem.
I've change the code like this:
<div class="hero-unit" style="line-height: inherit">
Of course it is better to assign a class to it, instead of using the style attribute.
Has anyone seen this type of IE display problem?
Example http://xs133.xs.to/xs133/08465/ie_problem910.jpg.xs.jpg
Note that it is doing some sort of word-wrap/duplication when it renders.
The code for the brown box and the text that should be in it is:
<div class='span-23'>
<div class='span-7'>
<div class='info_box' style='height: 30px; padding-top: 10px'>
<div class='span-4'><b>Vehicle Full Term Premium:</b></div>
<div class='span-2' id='veh_ft_prem' style='text-align: right;'></div>
<div class='span-4'><b>Vehicle Written Premium:</b></div>
<div class='span-2' id='veh_writ_prem' style='text-align: right;'></div>
</div>
</div>
</div>
I'm using BlueprintCSS and the info_box CSS class is:
.info_box {
background: #fbe6a0;
color: #222222;
border-color: #222222;
padding:.8em;
padding-right: 0;
margin-bottom:1em;
border:2px solid #222222;}
Hmm.. sorry but I didn't see your problem.. even in IE6.
Well, there are several websites that are very good in CSS issues and etc.
Try http://www.positioniseverything.net is a very good one =D
Sorry if I couldn't help..
Nothing there looks like it even could cause that under the strangest of IE render bugs.
After a bunch of fiddling, it turns out that if you have a hidden object ABOVE the box I showed, that is the cause of the problem.
Sorry I didn't give you more information, but at the time, it did seem exactly as Patrick said and there shouldn't have been a IE render bug.
I hope that helps someone else out there!
Thanks!