I have a couple long drop downs, so I set a height so I would get scroll bars. I am using the jquery selectmenu dropdowns. All the dropdowns are ignoring the height, even though I can see it in the 'developer' window (f12) and is not overwritten. I have tried to apply it a couple ways:
CSS:
.ddl
{
width: 310px;
height: 200px;
}
or
.ddl
{
width: 310px;
max-height: 200px;
}
or
.ddl
{
width: 310px;
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
I am sure I have all the scripts I need and in the correct order, because all the other jquery ui stuff is working find, even on the dropdowns. It is just the height is being ignored.
All the dropdowns have the class of "ddl", and this is in the included footer for all pages:
$(".ddl").selectmenu();
Here is the list (in order) of the included scripts:
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/custom.css" rel="stylesheet"/>
<link href="/Content/h-menu.css" rel="stylesheet"/>
<link href="/Content/themes/skps/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/themes/skps/jquery-ui.structure.css" rel="stylesheet"/>
<link href="/Content/themes/skps/jquery-ui.theme.css" rel="stylesheet"/>
<link href="/Content/themes/grid/ui.jqgrid.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.11.1.js"></script>
<script src="/Scripts/jquery-ui-1.11.1.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.jqGrid.src.js"></script>
<script src="/Scripts/grid.locale-en.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>
If it matters, this is an ASP MVC4 app. Here is the JSFiddle. This is my first fiddle, so not sure if I did it right. http://jsfiddle.net/battlfrog/jmhwxgom/
I am attempting to get it to work like this: http://api.jqueryui.com/selectmenu/#method-menuWidget
I know this is a bit old but I've found out how to do this using CSS. You can either edit the jquery-ui.structure.css file directly or apply this in the .css file for your page. The following is used when editing the jquery-ui.structure.css file. (There is a lot more you can do with this, but this is the basic change required to get the effect you want.)
.ui-selectmenu-menu .ui-menu {
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 1px;
padding-right: 10px;
width: auto !important;
max-height: 8.8em;}
Note that the overflow property has been deleted and overflow-y: auto has
been added instead.
Width must be added with !important.
You can use height instead of max-height and then set it to whatever
height you wish, but doing so will cause all select menus to
have the same height, even if it has one or two options (and thus
creating empty space at the bottom of the option list. Using max-height will ensure that the scrollbar is only used when the list length exceeds the height instead.
The above max-height will give you 5 options shown in your list when your font-size is set to 0.9em. I leave it up to you to do the appropriate calculations to get your preferred number of options shown.
The padding-right property is required for browsers other than MSIE. While I've found that MSIE adjusts the width of the list properly to accommodate the text for the option, Firefox, for example, does not. Adding the padding pushes the right of the edge away from the text. Unfortunately it has the unpleasant effect of doing it with MSIE as well, causing a large empty area to the right of the option text. A bit of MSIE CSS hacking here would clear up the problem, but I just want to address the core issue.
If you wish this to be global edit the jquery-ui.structure.css file. I find this a better solution because I can then fine tune the height per page by applying a different max-height property for each affected page (I convert the css file into Sass myself, makes things a lot easier).
Related
I have a JQuery UI progressbar and so far I have gotten it to work if the screen size is large. However, I am stuck on how to make both the progressbar and the progress showing inside to shrink and adjust to different screen sizes.
Below is my simplified code for the JQuery UI progressbar to show. In my real code, my value does change, but, even if I set it to a fixed value, it doesn't work anyways.
HTML
<div id="progressbar"></div>
CSS
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
JS
$('#progressbar').progressbar({
value: 37
});
As you can see, I have a value of 37. However, when I try to shrink the browser width, the progress bar just fills it up such that the value changes to 100.
The progress in the progress bar not responding to each other
I have tried searching solutions up but none works. I tried setting width: 100% and/or wrapping the progress bar in another div, etc, but none to do not work.
I really expected that it keeps it filled up at only 37% of the entire progress bar even when I shrink the size of the window, just like how it is on the JQuery's link: https://jqueryui.com/progressbar/.
Practice with the following.
$(function() {
$('#progressbar').progressbar({
value: 37
});
$("#setWidth").change(function() {
$(".progress-wrapper").css("width", $(this).val());
});
});
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div><label>Set Width</label><input type="text" id="setWidth" /></div>
<div class="progress-wrapper" style="width: 100%;">
<div id="progressbar"></div>
</div>
The jQuery UI Progressbar is designed to be responsive. Change the window here and you should see that both the border and the inner element shrink responsively.
You can also change the width of the parent, by typing in a value in the field above, like 40% or 240px and it will do the same.
I have:
<x-dialog><p>Whatever</p></x-dialog>
The <p>Whatever</p> stuff is of course passed into the x-dialog element's <content></content> tags:
<polymer-element name="x-dialog">
<template>
<link rel="stylesheet" href="dialog.css">
<core-overlay id="overlay" layered backdrop opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}" transition="core-transition-center">
<content></content>
</core-overlay>
</template>
<script type="application/dart" src="dialog.dart"></script>
</polymer-element>
How and where do I style my <p>, i.e. the content passed to my element? Note that this content is itself in a child element, core-overlay in this case, but I don't think that made a difference (it was the same result when I moved it out of core-overlay).
The style guide at http://www.polymer-project.org/articles/styling-elements.html didn't get me to a solution (I'm assuming Dart is up to par w/ this JS guide).
If you want to add the style rules to your x-dialog element the related section in the styling guide are Styling distributed nodes
add this to your dialog.css
content::content p {
background-color: blue;
}
Otherwise you can style it like any child element of normal DOM elements
x-dialog p {
background-color: blue;
}
I have the following "layout.cshtml" file in an MVC 5 project:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
<body style="background-image: url('/Content/images/background.png')">
<div id="master" style="padding: 20px; width: 100%; position: fixed; height: 75px; z-index: 9999;">
bunch of stuff removed for clarity
</div>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
The "master" div contains a toolbar that is populated via JS and positioned at the top of the page, where it remains on top of everything and ignores scrolling of the page so that it's always visible. That part seems to work fine.
The problem is that the rest of my page (that which is filled in via the #RenderBody() call) will scroll underneath the toolbar. I would like to keep the top of that section from going any higher than the bottom of the toolbar. I tried putting the #RenderBody() within its own div, and trying various "positions" (fixed, relative, absolute). I even tried a div around that div, with various combinations of "positions" for both. I either get a body that won't scroll at all, or one that scrolls underneath the toolbar.
Is there any way to do what I'm looking to do?
Thanks,
Andrew
Because the div with id='master' has the position style set to fixed, it will be displayed in a fixed position relative to the browser window. In order to move the content that it displayed "below" it, you should set
style="margin-top:75px"
to the element/container that follows this div. This will push it down from behind the master div so that it is not overlapped.
Example:
<div style="margin-top:75px">
#RenderBody()
#RenderSection("scripts", required: false)
</div>
SECOND OPTION: You may also want to consider setting
position:relative
instead of
position:absolute
UPDATE (see comment below):
Try setting the position of the sub-header (script section) div to fixed, just like the main header section, then set the 'top' property to 75px. This will lock it to the base of the main header:
<div style="position:fixed; top:75px;">
#RenderBody()
#RenderSection("scripts", required: false)
</div>
UPDATE 2:
Set this style on both the header and the body. First this will hide content that would normally be visible behind the header buttons. Second, this will lock the backgrounds of both containers together so scrolling won't cause a seam to appear between them. This gives the effect of the central content disappearing when it reaches the lower edge of the header.
background: url("/Content/images/background.png") repeat fixed 0% 0% transparent;
I have started to use the PrimeFaces p:editor for text input and for the most part I am fairly pleased with how it works. However the documentation notes that the CKEditor on which it is based does not plug into the ThemeRoller framework so the components dimensions do not adjust automatically.
So for example:
<h:panelGrid columns="2">
(stuff)
<h:outputLabel value="Content:" />
<p:editor id="editDoc" widgetVar="editorDoc"
value="#{editDocument.text}"
style="width: 700px"
/>
(more stuff)
</h:panelGrid>
I would like the p:editor to expand to the width of the table that h:panelGrid renders. Yet nothing I have tried works. Any suggestions?
UPDATE:
I should note that the p:editor tag pays no attention to the style attribute. Instead it has a width attribute and a height attribute and they don't work the same way the CSS parameters would work. For example width="100%" is an error.
The actual width of the p:editor depends on the size of its inner <div>. You can simply overwrite that default value:
<style type="text/css">
#editDoc > div {
width: 99.5% !important;
}
</style>
also remove the style="width: 700px" of the p:editor and attach it to the h:panelGrid instead.
A more general solution which applies to all p:editor components is to overwrite the default width attribute of the .ui-editor class:
<style type="text/css">
.ui-editor {
width: 99.5% !important;
}
</style>
For Primefaces 4, we have to set the width of the inner iframe:
<style type="text/css">
.ui-editor iframe {
width:100% !important;
}
</style>
I'm using jQueryUI Tabs inside a jQueryUI Dialog box. The content in each of the tab panels can be quite large -- for example there can be a table with hundreds of rows inside each individual tab panel. So scrollbars are required to navigate the content.
By default, the dialog panel displays its own scrollbar -- which is not exactly what I want. This scrollbar causes the navigation tabs themselves to move up and out of view. What I'd prefer is for each tab panel to display its own scrollbar if necessary but to leave the navigation tabs visible. I've tried setting "overflow:hidden" for the dialog panel, and then "overflow:auto" for the individual tab panels (see below). But then the tab panels are not getting scrollbars even when the content requires it.
Below is a (reduced) test case that shows the problem -- including my attempt to use overflow styles to solve the problem. Replace "Big content..." with something that causes scrollbars to be required and you'll see it.
Hope that's clear enough. Any ideas on how to solve this problem? Many thanks...
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({height:300});
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="dialog" style="overflow:hidden;">
<div id="tabs">
<ul>
<li>tab-1</li>
<li>tab-2</li>
</ul>
<div id="tab-1" style="overflow:auto;">Big content...</div>
<div id="tab-2" style="overflow:auto;">Big content...</div>
</div>
</div>
</body>
</html>
You could limit the height of each div which contains your 'content' ie:
height:100px;
overflow:auto;
Demo: http://jsfiddle.net/AeXNP/
Which makes everything very simple.
Edit: The harder part comes when (as you requested below) that the content resizes based on the user resizing the dialog. In involves a lot more css... To use overflow in your case, you require a height of the div. As the height is changing all the time, you don't know what height it will be. Therefore you need to manually set a margins and padding so you can set the height to 'auto'. So the css for the self-expanding tab contents is:
.fixedSizedTab {
overflow:auto;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:50px;
margin-bottom:10px;
margin-right:0px;
margin-left:0px;
}
Demo: http://jsfiddle.net/AeXNP/2/