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.
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>
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 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
I am working with the twentyfourteen WP theme - I removed the header by using "display: none" but now there is a large empty gap at the top of the site. I guess this is because there is still an empty div there, but I'm not sure why the rest of the content isn't being shifted up.
Site: http://theroadmap.co/generation/
Thanks!
This isn't even a proper question, but here you go.
<div id="main" class="site-main">
Has margin set to 48, set it to 0 using this:
#main { margin-top: 0px;}
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;
}