I have created a simple Layout control using the Dojo Content Pane Border Container and Border Pane.
<xe:djContentPane id="djContentPane1" style="width:auto; height:500px;">
<xe:djBorderContainer id="djBorderContainer1">
<xe:djBorderPane id="djBorderPane1" region="top">Header
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane2" region="center">Main
Body
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane3" region="bottom">Footer
</xe:djBorderPane>
<xe:djBorderPane id="djBorderPane4" region="left"
style="width:auto">main Navigator
</xe:djBorderPane>
</xe:djBorderContainer>
</xe:djContentPane>
It does pretty much what I want (obviously no styling on it at this point) except for two things:
1. I can't figure out how to make the djContentPane fill the full space available on the screen. The width:auto works but there does not appear to be a corresponding height specification.
2. I added a repeat control view into the region="center" and it displays fine except when the content exceeds the height available there is no scrollbar. I think as I read some of the help this should be the default for the "center" djBorderPane. Do I have to define the scrollbar?
ad 1.: use height:100% instead of "auto"; works fine for me, at least using Firefox (haven't tried other browsers)
ad 2.: I put a panel around the repeat as recommended in my above comment. Then I added overflow:auto; as a style property to the panel. Instead of using an extra panel you also could add that to the repeat itself, but I usually prefer styling an outer div because sometimes you want to set the removeRepeat property and then lose its own styling possibilities. Here's my portion of the border panel's code:
<xe:djBorderPane id="djBorderPane2" region="center">Main Body
<xp:panel id="outerDiv" style="width:100%;height:100%;overflow:auto;">
<xp:repeat id="repeat1" rows="30" var="rowData">
<xp:this.value>
<![CDATA[#{javascript:["row1", "row2", "row3", "row4"]}]]>
</xp:this.value>
<xp:panel id="innerDiv">
<xp:text escape="true" id="computedField1" value="#{javascript:rowData}">
</xp:text>
</xp:panel>
</xp:repeat>
</xp:panel>
</xe:djBorderPane>
again, works fine for me
Related
In elementUI the default background-color is white ; when choosing the them:dark , it is black, but how can I customise the bg-color by myself?
I have tried to add the style property at the el-menu tag , but it didn't work
<el-menu style="{background-color: rgb(36,36,36)!important}"
I try to find the source code of the css file of el-menu tag and I try to change some setting relating to background-color, don't work either
the menu component just like
somebody told me I can code like this
<el-menu style="{backgroundColor: yello}.." but it didn't work
The class for that particular element is not modifiable, have a look:
:class="{
'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark',
'el-menu--collapse': collapse
}"
So your choices are:
Wrap it in a custom <div class="my-specific-selector and target it with .my-specific-selector .el-menu
Override the CSS for the dark theme
Copy + paste contents of component into your own file, adjust accordingly, use that instead.
you can try put background color directly like this
<el-menu
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
style="height: 61px;"
></el-menu>
How can I remove or minimize the gap in between progress bar and string:
<div class='progress'><div class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 80%;'></div></div>
<!--Here will be a huge whitespace, and needs to be removed-->
remove white space above this line
Here is a fiddle: http://jsfiddle.net/1ts9b5m4/
Thanks in advance!
Use style="margin-bottom:0px;"
<div class='progress' style="margin-bottom:0px;"><div class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: 80%;'></div></div>
<!--Here will be a huge whitespace, and needs to be removed-->
remove white space above this line
Margin alone didn't work for me. I had to override both margin-bottom and height CSS attributes for the progress bar. I placed this into a small blade file and used #include to place it in the content section of forms that used progress bar.
In a file views/splitpieces/overridecss.blade.php:
<style>
.progress-bar{
margin-bottom:0px;
height:1%;
}
</style>
In the form using progress bar:
#include('splitpieces.cssoverride')
For me this had to be inside the #section('content') to work, otherwise the bootstrap CDN trumped the style modifier.
Hope this helps.
I have a container in the center of window. And my logo goes out from container to the left. I split my logo in 2 pieces. Right piece i added in my container with no-repeat. And left piece i have to add in my body background and somehow stick it to containers div.
i have drawn my issue:
how to manage that issue ?
I would do it somehow different. You can always set background of #logoimage div to your logo with gradient, or simply put an image inside. One image is enough with full logo object.
style:
#container{
display:block;
width:400px;
height:800px;
margin:auto;
background:#abc;
position:relative;
}
#logoimage{
display:block;
width:170px;
height:80px;
margin:auto;
background:#aaa;
position:absolute;
left:-70px;
top:30px;
}
html:
<div id="container"><div id="logoimage"></div></div>
live example here
What's the most important of this is:
position:relative style of container element
position:absolute style of logo element
The idea generally is that in position absolute, you can set x,y relatively to element with position relative.
I'm adding semantic zoom to my application and I'm having issues with the data binding in the zoomed out listview.
In the normal (zoomed in) listview I'm binding grouped data and it renders fine.
For the zoomed out listview I would like to render the same grouped data (same itemDataSource and groupDataSource) , but with different itemTemplate and groupTemplate (the same as the normal view but smaller).
The problem I'm having is that when I zoom out I get an error at ui.js line 2117 saying "0x800a138f - JavaScript runtime error: Object.defineProperty: argument is not an Object".
I've tryed binding the zoomed out listview itemDataSource property to the groups.dataSource collection and not set the groupDataSource property (like all the examples I found on the web) and I works fine.
Why is the zoomed out view not rendering grouped items like the normal view?
EDIT:
Seems like the zoomed out view behaves in a different way than the normal (zoomed in) listview. While the zoomed in view accepts both itemDataSource and groupDataSource, the zoomed out view only accepts itemDataSource.
I edited the Microsoft Official Semantic Zoom Sample (scenario2.html) and changed the zoomedOutListView to use myGroupedList.dataSource as itemDataSource and the same issue arises.
Code before:
<div id="zoomedOutListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: myGroupedList.groups.dataSource,
itemTemplate: semanticZoomTemplate,
selectionMode: 'none',
tapBehavior: 'invoke',
swipeBehavior: 'none'
}"
></div>
Code after (which reproduces the issue):
<div id="zoomedOutListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: myGroupedList.dataSource, //originally was myGroupedList.groups.dataSource
itemTemplate: semanticZoomTemplate,
selectionMode: 'none',
tapBehavior: 'invoke',
swipeBehavior: 'none'
}"
></div>
Thanks.
Diego
If you are using a custom IListDataSource, make sure that you implement itemFromKey method.
does anyone know how to create a loading mask over a XUL panel with JQuery or normal Javascript?
i am developing a firefox extension and i need the loading mask over some of the panels to avoid the user from making any further input while information is being submitted.
First of, i don't really know if mozilla supports loading masks over XUL panels because all the JQuery scripts i tried so far make the panel disappear instead of masking it.
thanks for reading
XUL uses box layout which makes typical techniques from HTML like absolutely positioned divs malfunction. You should use a XUL <stack> tag (see https://developer.mozilla.org/en/XUL/stack) and put both your content and your half-transparent layer as its children. When you make the half-transparent layer visible it will appear on top of the content. For example:
<stack flex="1">
<hbox id="content" align="center" pack="center">
<button label="Click here" oncommand="document.getElementById('busy').hidden = false;"/>
</hbox>
<hbox id="busy" hidden="true"/>
</stack>
And some CSS code:
#busy {
background-color: black;
opacity: 0.5;
}