I have a record set that is quite wide (about 25-30 cols)...does MVC3 WebGrid support horizontal scrollbars (or can I house the grid in a html tag/control)?
Never realised about the WebGrid, so had to play with it to help on this one.
Basically, if you put the webgrid inside a div with an overflow set, then it seems to work fine.
I tested it on mine with the following code (I just shrank the test div to simulate small screen/many rows (was to lazy to create loads of col/properties, lol.
<div class="test" style="overflow: scroll; width: 150px">
<div style="width: 1000px">
#grid.GetHtml()
</div>
</div>
Related
I have a table cell that includes an image that should be 50% of the cell's width.
The code works in Chrome, Firefox, and Edge, but in IE11 instead of taking on 50% of the cell's width, large images just take on 50% of their native size.
Here is a fiddle using a 800px wide image. Works fine except in IE11, where the image displays as 400px wide instead of responsive:
https://jsfiddle.net/43Tesseracts/9knqerj7/4/
Here is the relevant html with bootstrap:
<td>
<img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg"
style="max-width:50%;"
>
The image beside me should appear 50% of the cell, not 50% of it's native size. WOorks in Chrome, FF, Edge, but NOT IE 11
</td>
There appear to be many similar issues on SE, but they are all much older, or use an older version of Bootstrap. I'm using Bootstrap 3.3.7
there is no need for extra div's. you can set the following css property on the table element:
table{
table-layout: fixed;
}
i updated your fiddle with a working example:
https://jsfiddle.net/9knqerj7/10/
(in addition, i changed the img to be a block element and float left, but that is not required for the responsiveness - just looks better IMHO)
You could solve this issue using divs like i did here:
<td>
<div style="display: flex;">
<div style="width: 50%">
<img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg" style="width: 100%">
</div>
<div style="width: 50%">
THe image beside me should appear 50% of the cell, not 50% of it's native size. WOorks in Chrome, FF, Edge, but NOT IE 11
</div>
</div>
</td>
Working solution: https://jsfiddle.net/9knqerj7/8/
According to the fullpages.js documentation, it should be possible to vertically center the contents of .sections with the parameter verticallyCentered (which defaults to true).
However, I can't get this feature to work with the following HTML structure:
<div id="content">
<div class="section container">
<div class="row">
<div class="col-xs-12">
<h1 class="title">Title</h1>
</div>
</div>
</div>
</div>
The content of the .col-xs-12 div (i.e. the heading) remains at the top of the window.
I am using Bootstrap for scaffolding (if that is of any relevance). Also, the basic functionality of fullpage.js (i.e. the single-page scrolling) is working without any problems.
You are probably using some absolute positioned element and that's the reason why fullpage.js can not deal with it.
You can easily see in the examples that fullpage.js centers the content correctly when using verticalCentered:true, which is the default value.
I had the same issue.
I fixed it by styling the default class, added by fullpage.js:
.fp-tableCell {
display: flex;
align-items: center;
justify-content: center;
}
Since I couldn't get the vertical centering functionality to work, I ended up disabling it by setting verticalCentered to false. As a replacement I am now using jQuery-Flex-Vertical-Center which works out of the box.
Sorry to resurrect this question but the problem is that you didn't include the css file of FullPage.js
I'm working on my new portfolio and although it's far from finished, i'm getting close to finishing the design. There's just one problem atm that I don't know how to get rid of. If you go to http://minimalito.be/index.html you'll go to the homepage, then when you click on 'about' you'll notice that the footer very briefly jumps to the top of my page...
When you go from the homepage to the about section, not only the footer moves, but the whole content briefly moves up. Would anyone know why?
The content is loaded with ajax, so that's probably got something to do with it, maybe i'm positioning some divs wrong? I don't really see it.
This is rough layout of my code, for more detailed code + example, you can check the website itself of course.
Thnx!
<div id="content" class="block">
<div id="header">
<nav class="centered">
<h2>minimalito.</h2>
<ul>
<li>about.</li>
<li>work.</li>
<li>contact.</li>
</ul>
</nav>
<h1 id="contact" class="ninja">minimalito#info.be</h1>
</div>
<div id="load">Loading</div>
<div id="page">
</div>
<div id="footer">
</div>
</div>
Your #header has a fixed position so it is not part of the document flow.
#content has a top margin that pushes both #content and #footer down so that they are positioned below #header#.
Now when you click on one of the menu links at the top fadeOut is called on #content which sets display: none; on it. With nothing left to push elements that are part of the document flow down anymore #footer is moved all the way to the top of the page until the new content is asynchronously loaded.
Instead of having fadeOut set display to none consider just changing the opacity and replace the content when the element is invisible.
first of all here is the link to jsfiddle: http://jsfiddle.net/HotFrost/RnNX3/6/
you can see that in chrome the graph layout inside the svg element, panned and zoomed ok. Whereas for IE (v9.0) it totally disregards the borders.
basically for this simple layout:
<div id="wrapper">
<div id="content-col"> graph
<div id="graphwidget_graphContainer" style="border: 4px solid purple;" ></div>
</div>
<div id="right-col"> menu </div>
</div>
IE and Chrome render graph differently.
I have tried to use different settings for width/height/remove them. I have tried to replace the divs with table cells.. Still same problem - in IE graph nodes are rendered above the svg element and then (when panned/zoomed) also go over the svg element borders.
Anyone can give some ideas how to fix it?
Thanks in advance!
HF
I have tried all the suggestions on here I just can't seem to get mine to pop-up in front of my stylesheet in IE. Works in firefox and chrome. Here is a very basic example of my layout.
the website is gulfstreamdata dot com . If you add anything to the cart and then in the top-right click on "expand" it drops down whats in your cart, but in IE it pops-under the template. :(
<div class="vmCartModule" style="position:relative; z-index:900; ">
<div id="dropdown" style="position:absolute; z-index:901;">
</div>
</div>
I tried making both z-index values the same and i tried making the outer div higher. Tried about everything I could think of in IE developer tools to no avail.
Anyway since it is positioned in a position you know, maybe you could detach it from the parent div, and move it after its actual parent div, so it will be drawn on front (also removing the z-index values).
<div class="vmCartModule">
</div>
<div id="dropdown" style="position:absolute; z-index:1;">
</div>
you shouldn't have problems in positioning it relative to the body, since it's on top right of the site.
EDIT
If it pops under your template, move that div to the bottom of your website, maybe right before </body>. I had the same issue with many menu and sub menus and it always worked perfectly.
Do this:
<div id="dropdown" style="position:absolute; z-index:901;">
//your content
</div>
<div class="vmCartModule" style="position:relative; z-index:900; ">
//your content
</div>
See demo in IE8 : http://jsfiddle.net/WtWqX/8/