I have a durandal dialog box, i want user to be able to increase or decrease the size of the box . Please note that i am not asking for adjusting the width automatically depending on the contents inside the box. I am actually asking how i can allow user to hover the mouse over any size of the dialog and increase / decrease the size.
Is it possible ?
You can use the resize CSS property
resize: none
resize: both
resize: horizontal
resize: vertical
resize: inherit
for example:
.modal{
resize: none; /* disables resizability */
}
Related
I am using CKEditor 4 and trying to customize a toolbar to show to non-Admin users of our software. I know how to remove the "Image" button from the toolbar to prevent non-Admins from inserting image elements into our templates. However, I still want them to be able to edit an existing image within a template by double-clicking on it. With the Image insert button removed, I can still perform this action and the resulting dialog displays the source, alt text, and image preview portions. But, the Width, Height, and Ratio Lock controls are hidden. Upon inspecting the markup, it looks as though the table of class cke_dialog_ui_hbox that resides several nodes up from the txtWidth container has an inline display style set to none.
Is there a way to hide / not show the Insert Image toolbar button while still displaying the width, height, and ratio lock controls in the Image dialog box?
I have tried using config.removeButtons as well as config.toolbar and specifying the buttons that I want displayed in the insert group but the presence of the button or not appears to impact the plugin functionality by arbitrarily hiding certain controls.
I learned through Fiddling that the styles attribute on an img definition in the allowedContent object determines whether or not the width and height fields display in the image dialog box.
CKEDITOR.editorConfig = function( config ) {
allowedContent = {
img: {
attributes: true,
classes: true,
styles: 'width,height'
}
}
};
Either I missed that in the documentation somewhere or it just wasn't readily apparent to me.
Fiddle:
https://jsfiddle.net/a913q0mz/
Sounds like the best solution will be to hide the button with CSS.
In your theme (e.g. ckeditor/skins/moona-lisa) open editor.css and add this at the bottom:
a.cke_button.cke_button__image { display: none; }
Save and do a force refresh (Ctrl-Shift-[click refresh]) and you should be good.
I'm having trouble with an issue on a site -
http://www.Afrifacti.com
I checked for an answer and someone mentioned turning off #footer-container { height: 100%; }, but that leaves an empty box below. http://cl.ly/Tv2I
Basically, I want the image to fill the screen as it does now, but without the scroll bar or empty box below.
However, the scroll bar should reappear if the browser height is shrunk beyond the footer buttons 'about credits join'.
Thanks in advance.
Add at body element (base.css line 12) the style: position:fixed and you done.
I am using jqgrids editgridrow function to add/edit records.How do I position the submit and cancel button on the popup to center and how do i reduce the fontsize of the labels in the popup.I couldnot find a way to do this as there are no inbuilt properties for this and I donot intend to use custom dialog box. Does anyone know a workaround?
Thanks,
Anita
If you don't use direction: "rtl" option in jqGrid then usage of CSS
.ui-jqdialog-content td.EditButton { text-align: center }
should solve the problem. See the demo which displays
I don't understand why you should reduce the fontsize of the labels. The font used per default in jqGrid is already very small on my taste. Nevertheless the CSS style like
.ui-jqdialog .ui-jqdialog-content .CaptionTD { font-size: 8px }
could be used. See the next demo which displays
I have noticed for a while that Joomla´s build in modal popup "sbox" moves the background (the entire body of the site) ca. 10 pixels to the right when I open a popup window. When I close the popup window the page is shifted back 10 pixels to the left.
You can see the problem on this page:
http://www.traelastogbyggemarked.dk/vaerktoj/arbejdsbeklaedning/traesko/euro-dan-pu-finer-toffel-sort-detaljer
Just click on the product image and you can see the background moving.
I have noticed this on other sites aswell, for instance on this page page:
http://demo.joomlaxtc.com/free/index.php/modal-box-plugin
click on the demo link "Click Here"
The problem appears to be present in all browsers. As far as I know the sbox modal popup is a part of Joomla´s build-in mootools core. My site is running Joomla 2.5
Does anyone know how I can change this behavior and stop the modal popup from moving the background?
Check the modal.css and look for this:
/* Hides scrollbars */
.body-overlayed {
overflow: hidden;
}
Try without it.
This should resolve the apparent shift:
/* Hides scrollbars */
.body-overlayed {
overflow: hidden;
width: calc(100% - 16px);}
It subtracts the width of the scrollbar from the element when the class is applied.
I'm calling handleNotableTypeSelect method on the click of the check box, everything is working fine but the page jumps to the top.
this.$hideInactiveCheckbox.click(
this.handleNotableTypeSelect.createDelegate(this));
handleNotableTypeSelect: function(e) {
//e.preventDefault();
if (this.$hideInactiveCheckbox.attr('checked')) {
this.isActive = "^active$";
this.$connTable.fnFilter(this.isActive, 1,true);
}
else {
this.$connTable.fnFilter('', 1);
}
//return false;
}
My case was that the checkbox was hidden (due to CSS design). the original input checkbox had position set to 'absolute' so when the user clicked the checkbox the page "jumped" to the real checkbox position.
EDIT:
In some cases there are styled "fake" checkboxes. the real checkbox element is hidden in some bad practice way.
My case was that the real checkbox element had absolute positioning and hidden and that cause the page jump to top of the window.
Possible solution:
Check if the checkbox element has the following CSS rule
position: absolute;
if yes, removing this rule can fix this issue.
This may related to the following issue:
input checkbox in div jumps to top of page on firefox
I've actually been seeing errors about this in all kinds of frameworks, and for the most part, people post framework specific answers. If you're hiding the check box, try using display: none on it, it seemed to work for the post above. I'm still trying to hunt down a fix (since I'm not hiding my checkboxes, I'm trying figure out why checkboxes in a modal cause the screen to jump to the top of the modal on click).
Several frameworks and css tricks hide the checkbox using position: absolute.
That is correct because we need to hide the checkbox only from screen, while Screen Readers must have access to it in order to announce it correctly. But display:none hides it from them too and users with accessibility issues can't click it.
The most suitable solution is to add position:relative to checkbox container and adjust checkbox position using top: if needed.
If your check box has position: absolute, in most cases just wrapping it (input and label elements) with a div should be enough.
If the checkbox has been positioned absolute to hide it and the interaction occurs on the label (which is commonplace when styling checkboxes beyond the default UI), the page will scroll to wherever the checkbox input is positioned despite the click event occurring on the label. so if you've added top:-9999px; for example, the page will jump right up to where it's now positioned.
What you want instead, is to remove it from the rendered layout without moving it away from the label. to do this, add a container div to the label and input, and add position:relative; to it. Then add the following code to the input itself:
position:absolute;
top:0; left:0;
visibility: hidden;
opacity: 0;