KENDO ui menU IE9 issue - c#

I am using KEndo UI in asp.net mvc website and menu is working fine in all the browsers except IE 9.0 . I am using float: right but when i open the page on IE 9 and move my mouse over the menu then it moves from right to left
But it should be like this
Mt CSS
.float-right-menu {
float: right;
}

You may need some kind of css reset for those kind issues

Welcome to IE :( If I remember correctly, IE9 has an odd rendering bug where if your floated element doesn't have a width specified in CSS, then it decides to make it 100% width (like a non-floated div would be).
I think to fix it you have to give it a width in CSS. Unfortunately, that is hard to do unless you know the actual width of the menu. But, try setting it to something like "width: 300px;" just to see if it fixes the issue.

You can use something like that
<script type="text/javascript">
function SetMenuWidth()
{
var menu = $('#MenuName');
menu.width(menu.width());
}
$(document).ready(function () {
SetMenuWidth();
});
</script>

Related

how can I make sure a dropdownlist's list is always dropped down rather than up

I want to show dropdownlist always to down. (Is it posible?)
If bottom space is less then the height of dropdown list it's show list to up.
I want to show list always to down.
Thanks in advance
This can be achieved by adding the following attribute to your CSS class of your dropdown list:
.drop-down {
top:100%;
}
The same can be used to force the list to go upwards: bottom: 100%;
Here is a jsfiddle demo.
EDIT:
The standard HTML form Select Option (<select><option> <option></select>) can not be manipulated to expand into a certain direction. You'll have to write your own custom dropdown menu with JavaScript to implement this functionality.
After a quick browse I've noticed that others have struggled with the problem you're having. And apparently the following CSS code seems to fix it in some cases.
select { vertical-align: top; }
What you can do is set the attr size using jQuery like so
jsFiddle : https://jsfiddle.net/ou5n9u3y/
jQuery
$(function () {
var dropdownOptions = $('.dropdown-selector').find('option').length;
$('.dropdown-selector').attr('size', dropdownOptions);
});

scrollTop() doesn't work with TextArea on IE

This question is quite common however I haven't seen a quite similar problem to mine. I have my .cshtml file where I've declared a TextArea using the Microsoft MVC HtmlHelpcer class. The code is the following:
#Html.TextArea("contentContainer", new Dictionary<string, object> { { "style", "width: 100%; height: 600px" } })
Then I have a function which is reading from a LogFile all the time and appending/adding the content of this file to this TextArea everytime there is an update. So I have my function in jQuery which appends the content to the TextArea and then I want it to Scroll the TextArea to the very bottom of the TextArea. The code is quite simple:
appendContent: function (content) {
var $textArea = $('#contentContainer');
var shouldBeScrolled = true;
$textArea.append(content);
var shouldBeScrolled = true;
if (shouldBeScrolled) {
$textArea.scrollTop(
$textArea[0].scrollHeight
);
}
}
Please ignore the shouldBeScrolled variable. I just have it cause later I plan to create some constraints on scrolling.
OK, basically this code works perfect on Chromium, the content gets appended and the TextArea is scrolled to the bottom. On Internet Explorer it simply doesn't scroll. Why is this happening?
This could very well be a bug in JQuery - I had the same issue before, and as a workaround I ended up scrolling to another item that contains my TextArea and has its top boundary coincident with the TextArea.
Something like this:
<div id="TextAreaContainer">
<textarea></textarea>
</div>
And then the Javascript would look like:
$("#TextAreaContainer").scrollTop();

Can't change position of buttons in C# ASP.net

I use VS 2010 . I add button to webfrom that created, but I can't change his position.
I read in previous questions that I need to change the layout to absolute , but it didn't work. when I drag the button to the center it's back automatically to left-center..
you can see that in the picture:
how can I fix that?
Thank you!!
solution:
Tools -> Options, and set HTML Designer -> CSS Styling to "Change positioning to absolute.."
Changing the position to absolute seems more like a workaround which would introduce further problems after "solving" this one. Unless you really know what you're doing for styling, don't do that.
Centering an element on a webpage is really a matter for the CSS styling. Take a look at the markup (HTML) view and find where that button is. You can add a class to that button for the CSS styling:
<asp:Button runat="server" ID="Button1" CssClass="centeredButton" ...
Then in your site's CSS file (Site.css might be the standard in the ASP.NET template? I don't remember) you can apply the styling you're looking for. There's a lot you can do at that point. Not knowing how the rest of the page is laid out, I can only offer very random suggestions. Something like this for example:
.centeredButton {
display: block;
margin: auto;
}
That's one way to center that particular element. There are definitely more, depending on how the rest of the markup/layout is structured.
First of all i recommend not to use this drag options. Because what happens behind this whenever you drag a button or anything, will make you more confused. You can do it using div or table.

bootstrap menu is hiding main text

I'm going crazy with this. I got the twitter-bootstrap menu running in my c# code and it looks and works great. However, the menu is overwriting my text of the site I've built. It seems no matter what I do the body of the site appears under the menu.... I'm thinking it's a CSS issue because if I resize the page to mobile size the body is then placed under the menu.
I'm not even sure what code I should cut and paste...?
I've tried various or row, ... etc...
How do I get my body text to show below the menu vs. underneath it?
Thanks
I had this problem too, I had to do a padding in my _layout.cshtml. This solved it for me.
<body style="padding-top: 40px;">

page scroll down automatically

Is there any jquery, or any feature in c#,
I have done a lot Google , but not able to find the solutions
I want the page to be scroll down slowly ( with some time interval) automatically
for example, there is a news webpage, some one is reading article, so slowly slowly page should be scroll down so user don't need to scroll it manually
Thanks in Advance,
First result I googled: http://www.mediacollege.com/internet/javascript/page/scroll.html
Here is the scroll function they suggest calling on page load:
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
I think it would be better to place an fixed position invisible div over say the bottom 20% of the page, and if the user moves a mouse there to start scrolling, because I find pages that try and do things automatically (e.g. playing music/video on sites that are not focused on those media) quite irritating personally.
webBrowser1.Navigate("javascript:var s = function() { window.scrollBy(0,10); setTimeout(s, 100); }; s();");
Try it...
<script type="text/javascript">
$(document).ready(function () {
$('html, body').animate({
scrollTop: 200
}, 4000);
});
</script>

Categories

Resources