using dijit/Toolbar always renders horizontal toolbars. I need it to be vertical.
<div id="toolbar1" data-dojo-type="dijit/Toolbar"
><div data-dojo-type="dijit/form/Button" id="toolbar1.cut"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut', showLabel:false">Cut</div
><div data-dojo-type="dijit/form/Button" id="toolbar1.copy"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy', showLabel:false">Copy</div
><div data-dojo-type="dijit/form/Button" id="toolbar1.paste"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel:false">Paste</div
><!-- The following adds a line between toolbar sections
--><span data-dojo-type="dijit/ToolbarSeparator"></span
><div data-dojo-type="dijit/form/ToggleButton" id="toolbar1.bold"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconBold', showLabel:false">Bold</div>
thanks
Dojo's toolbar can't really be made vertical but what you can do is create a dijit/Menu and not setting it to be hidden by default.
Something like this should work:
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut'">Cut</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy'">Copy</div>
</div>
If you want to do this programmatically, it also works. Just don't specify a targetNodeId and give the widget a node (or id) when creating it.
Also, you can modify the MenuItem css to look like a standard button (border radius, box shadows, etc) if you would like but most vertical menus I've seen with buttons end up using a more flattened style button.
Related
I am creating a user interface that is to be responsive.
I have three buttons that I would like to move into a drop down when the users screen size dictates.
My issue is that the "show-on-med-and-down" helper I am using to display the drop down menu is always showing regardless of the screen size.
The materialize helper "hide-on-med-and-down" is working and the content is being hidden correctly, but I cannot get the drop down to display only when the screen is medium and down.
<div class="entry">
<div class="icon> icon for user </div>
<div class="name"> user name </div>
<ul class="hide-on-med-and-down">
<div class="button>yes</div>
<div class="button>no</div>
<div class="button>maybe</div>
</ul>
<ul class="show-on-med-and-down">
<div class="dropdown"> dropdown menu</div>
</ul>
</div>
I expect this code to show exclusivity the drop down button or the three buttons in any case. But as you can see from my attached screenshot the dropdown menu place holder always is shown.
large view
small view
Thank you for your time in advance.
"show-on-med-and-down" css class just set the display property when the screen width is > 600px.
You need to set the style of the item to be style="display: none;"
OR change the class to "hide-on-large-only" (suggested).
I have something like this:
<div class="panel">
<div class="panel-body">
<div class="image-overlay">
<img class="img-responsive"> src="..."/>
</div>
</div>
</div>
and if I set manually height of "panel-body" to 400px. Its working as it should.
However once opening on small display height stays 400px but image is resized to smaller and half of panel is empty. How can I have responsive image in panel with also panel responsive?
can you try not to put any dimension? try to check this one
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I'm not sure I understand your question, but I think you're probably looking for this:
<img src="/mysrc.jpg" style="width:100%;max-height:400px;" />
Is it possible to draw line between the container and a draggable element during dragging using 'dragula' lib? When the element is dropped, the line should disappear.
<div [dragula]='"my-bag"'>
<div class="draggable-item">
<div class="my-drag-indicator">
// style your line here
</div>
<div class="my-drag-content">
// your content here
</div>
</div>
</div>
while dragging, you will have a clone image of your item, dragula will add 'gu-transit' class to it.
As the structure above, you can style your .draggable-item.gu-transit to hide the '.my-drag-content' and show the 'my-drag-indicator'
I am trying to have a menu bar to get stick to top when user scrolls up. It sticks fine at the top. But, it floats to left.
code: http://www.bootply.com/y801SV4HAu
How to fix menu so that if sticks to top and center (margin-left is currently set to auto to make it center)?
<div class="container" style="padding:0">
<div id="menu-header" class="affix">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
</div>
</div>
</div>
</div>
The above does what you want it to do. Cassie was correct in suggesting a container div, but with the added style padding:0 for the way you want it to look. so that it aligns with page title.
When position: fixed is applied to the header upon scrolling down, the margin: auto no longer affects it, so it moves back over to the side. You'll have to find another way to center that div. There are probably a ton of ways to do this; the simplest offhand might be to put it inside a .container div.
I have expandoPane which consists of some buttons.
When I perform other operations in the project and then expand this expandoPane, its contents goes hidden and those are visble after resizing it using splitter only.
I want to solve this.
Do you have any idea why the content goes invisible?
You need to call .startup and .resize() on the content pane when it's shown.
Something like:
expandoPane.connect(this, "onClick", function() {
that.createContent();
that.startup();
that.container.resize()
});
Post your code and I'll probably be able to give you something more specific.
Adding sample code:
<div id="expandableConsole" dojoType="dojox.layout.ExpandoPane" region="bottom" showTitle='true' maxHeight="250px" maxWidth="280px" style="height:200px; width:100%;" doLayout='true' startExpanded='false' splitter="true">
<div>
<input type="button" id="btnSubmit" style="width:88px;height:20px" onclick="update()">
</div>
<div dojoType="dijit.layout.ContentPane" id="infoBar" style="height:150px">
</div>
</div>
When I expand the expandopane after few operations,button and contentpane go invisible.