Ran into this 'funny' issue today. I have an asp.net mvc application, with a twitter bootstrap design template, which up until now has been working fine. However, when I added some #Scripts.Render("...") statements to the top of my view (Not shared layout file, but view) it seems to alter my layout!
View:
#Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")
#Scripts.Render("~/signalr/hubs")
#Scripts.Render("~/Scripts/Stimline/connector.js")
<div class="span12">
<legend>Fleet List</legend>
<div class="row-fluid">
...
</div>
</div>
Whenever the three script statements at the top is added to my .cshtml file, it seems to move the entire div-part over to the right, so that it aligns with the edge of my browser. Removing the statements again causes it to go back to normal, adding the margin supposed to be there by default from bootstrap.
I have not done any changes to the bootstrap css.
Has anybody seen this, or at least something similar, before?
Here's how it looks with the #Render.Scripts statement:
And here's without it:
If you use the fixed header bar as a reference for right edge, you'll see that the table is aligned all the way to the right in one image, and correctly "spaced" from the edge in the other.
I recently ran into a similar issue where I was float li elements for a menu. I had each element on it's own line in the html, so a space was rendered between each item.
<ul>
<li style="float:left">Item 1</li>
<li style="float:left">Item 2</li>
<li style="float:left">Item 3</li>
</ul>
changed to
<ul>
<li style="float:left">Item 1</li><li style="float:left">Item 2</li><li style="float:left">Item 3</li>
</ul>
In your situation moving the script to the bottom of the page would be best to follow other best practices, but you could also remove the whitespace to get the same result.
Related
I am trying to create a page with a search bar and filters underneath. I really like the way the search-toolbar looks, but it's creating space that I don't need. Is there a way to modify i to get rid of the space?
Thanks!
Here's an image of what I have:
Search bar with toolbar underneath
Edit: That grey space is what I'm trying to get rid of.
Here's my asp code:
<div class="search-toolbar" style="background-color:white">
<ul class="list-unstyled nav nav-pills">
<li>
Everything
</li>
<li>
Other Content
</li>
</ul>
</div>
<div class="tab-content">
Content
</div>
Figured it out, I found the css file and edited it.
I'm still new to web development, and I wasn't aware that I could do that.
Using JQuery Mobile 1.4.5, it appears that my external panel cannot hold a style!
Conventional wisdom states that .enhanceWithin(); should be called to update the contents of an element, but this does not appear to give good results with the current version of JQM.
Fiddle to demonstrate.
Has this been updated? Every answer I have found on the topic of dynamic elements losing their style is using an older version of JQM.
By default jQM 1.4.x only has 'A' and 'B' themes. You have set theme to 'C' which does not exist unless you add it to the CSS. For the fiddle, change it to:
<div data-role="panel" id="menuPanel" data-theme="b">
<ul data-role="listview" data-theme="c" data-dividertheme="b">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
Updated FIDDLE
I'm new to umbraco, and I've encountered the following problem.
I have a design with a fixed navigation box on the left. The right side is for content. This content needs to be filled with the new grid-layout from umbraco.
But the grid-container keeps getting the full width of the site. So together with the navigation-box, it pushes outside my site.
Like this:
http://i.imgur.com/iEo4Os6.jpg
I've tried the following html:
<div class="row">
<div class="col-lg-2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="col-lg-10">
#CurrentPage.GetGridHtml("ArticleContent")
</div>
</div>
But the GetGridHtml places a complete full width container inside my column. Setting the container to 10 columns (and the row configs too) within umbraco doesn't help either.
Anybody know a solution? Thanks in advance.
I think the solution could be to make your grid row configuration only span ten rows? I don't have enough rep in here (yet) to just comment, sorry.
Here's the jQueryTools demo page on how to use their tooltips: http://flowplayer.org/tools/demos/tooltip/any-html.html
Basically, if you want to have a tooltip that contains HTML, you have to put that HTML in a div and place it directly after the trigger element like so:
<a href="http://www.stackoverflow.com" id="link1">
<div class="tooltip">
<img src="img/SOicon.png">stack<span style="font-weight:bold">overflow</span>
</div>
But my trigger element isn't <a href="http://www.stackoverflow.com" id="link1">. It's an <li>, and my guess is that I can't put anything other than an <li> in the parent <ul>. In other words, I can't place the after the trigger element like I'm supposed to.
I've come up with a way to fix this (scrapping the unordered list with floated <li>s and switching over to floated divs) but figured I should probably consult the experts (you guys, of course!) before I got started on fixing the problem.
How would you guys fix this?
It's no problem to use another element outside your structure as tooltip target !
<ul id="mylist">
<li title="List Point 1">List Point 1</li>
<li title="List Point 2">List Point 2</li>
<li title="List Point 3">List Point 3</li>
</ul>
<!-- many other HTML ELements -->
<div id="mylist_tooltip"></div>
At the end put in your jQuery's ready() :
jQuery("#mylist li").tooltip({
// target div
tip: '#mylist_tooltip'
});
Read more in the docu ;-)
I'm following this tutorial here http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery on adding a menu with jquery.
I've created my menu, but I'm having trouble adding it to wordpress. I opened up the header.php file since I want it to appear below the banner, and I paste it in it's own div, but it always "pushes" everything below it to the right.
How do I stop it from doing this?
Here's the code:
<ul id="nav">
<li>1 HTML</li>
<li>2 CSS</li>
<li>3 Javascript
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
<li>3.2 Mootools</li>
<li>3.3 Prototype</li>
</ul>
</li>
Hard to say without looking at the whole, but based on knowing very little of your problem, the only thing I can recommend you to try is this CSS property:
ul#nav {
position: absolute;
}
This way, it will not push other elements away. It might have other consequences tough, depending on other elements you might have.
Looks like you're missing a closing </ul>? You can also use The W3C Markup Validation Service to tack down errant tags.