So I'm pretty new to CSS. I know there is some inheritance, but besides font, I'm not always sure where it applies. So what I'm trying to do, is modify the twitter bootstrap modal class. There is a backbone view that is being shown currently with these classes:
modal hide fade
What I want to do is extend the width and height of the modal view but keep all of the other modal CSS properties in tact. Is there a way to do this? In my own local.less file for my project, I first tried doing what I googled which was How can I change the default width of a Twitter Bootstrap modal box?
But my view wasn't modal anymore. It wasn't centered and didn't have a darkened backdrop. So I then thought I could just copy the .modal class from twitter bootstrap into my local.less file, and then change the width/height. So I tried that with this:
.modal-width-half (#modalWidth: 50%) {
top: 50%;
left: 50%;
z-index: 1050;
overflow: auto;
width: #modalWidth;
margin: -250px 0 0 -#modalWidth / 2;
background-color: white;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
And again, the style isn't modal. Is there something I'm missing or doing incorrectly? Thanks.
I just did this and can share the line you're missing.
In my commit to change the width of the modal I had to change the width property and also the margin-left property. By changing both of these you will keep the form centered.
.modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
of course this will apply to all modals on your site, if you want to apply it to just one modal then you can customise the class name e.g.
.my-modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
You can then refer to this in your html like:
<div class="modal fade open my-modal">...</div>
Just make sure the definition for .my-modal comes after .modal in your less/css file or the definition will be overridden by the bootstrap style.
Related
I have created a HTML table with a fixed header and scrollable body. I want to style the scrollbar to look like the attached image.table design
Using webkit, I have changed to colour of the scrollbar but i don't know how add the circle.
::-webkit-scrollbar {
width: 15px;
background-color: #00467f; }
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb {
background-color: #00bce4;
outline: 1px solid slategrey;
z-index: 10; }
Can this be achieved using only HTML, CSS and Pure Javascript?
With a width: 30px; and height: 30px;, border-radius: 30px; gives you a circle, maybe that helps in getting creative.
So Im using Bootstrap 3, JQuery and Jquery-UIs autocomplete. So on the my project, the result looks like this,
But according to the documentation page, it is supposed to look like this
with the clickable items on mouse over and everything. My search box HTML is as follows:
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input id="titles" type="text" placeholder="Search" class="form-control">
</div>
<button type="submit" class="btn btn-default">GO</button>
</form>
The documentation page for jquery-ui autocomplete widget is here
Any pointers? Thanks in advance. PS:The photos were taken by a potato :-)
#dmlittle gave me the idea
You need to also style the autocomplete widget the Boostrap way
.ui-autocomplete {
position: absolute;
z-index: 1000;
cursor: default;
padding: 0;
margin-top: 2px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
background-color: #DDD;
}
.ui-helper-hidden-accessible {
display: none;
}
I used
// make main container visible
$( window ).load(function() {
$( "#video-container" ).css( "visibility", "visible" );
});
but no luck. I figured the css would have already been applied to the div on load, but maybe I'm missing something.
CSS is as follows:
#video-container {
background-color: #191919;
border: 3px solid #999;
box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
left: 50%;
margin-left: -13%;
margin-top: -13%;
opacity: 1;
padding: 0;
position: absolute;
top: 50%;
vertical-align: middle;
visibility: hidden;
width: 26%;
z-index: 2;
}
There is no border-radius declaration in your CSS so it's likely that this is set somehwere else,
I suggest that you check your other CSs/JS/JQ functions to ensure that this is added at the appropriate time.
Try using this...
$( "#video-container" ).show();
Can CSS be used to make a left and right edges of a content container look like this image? I have been trying to figure out a way to do this without using an image, if that is possible.
Here is jsFiddle that I have been working on. The CSS for the "top" class never gets applied. The CSS for the "bottom" class seems to work ok though.
http://jsfiddle.net/kXuQY/
HTML:
<div class="drop-shadow top bottom">
Content here.
</div>
CSS:
.drop-shadow {
/** Create container. Box-shadow here is to color the inside of the container **/
position:relative;
width:50%;
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding:3em;
margin: 2em 20px 4em;
text-align:center
}
.top:before,
.top:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-1;
top:20px;
left:0;
width:40%;
height:1em;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
}
.top:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
transform:rotate(-70deg);
}
.bottom:before,
.bottom:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-2;
top:90px;
left:0;
width:10%;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(99deg);
-moz-transform:rotate(99deg);
-o-transform:rotate(99deg);
transform:rotate(99deg);
}
.bottom:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-99deg);
-moz-transform:rotate(-99deg);
-o-transform:rotate(-99deg);
transform:rotate(-99deg);
}
You can use ::before and ::after pseudo elements to achieve the effect, see here.
Example: (Demo)
HTML:
<div id="box">
<h1>css-3-box-shadow</h1>
<p>some text</p>
</div>
CSS:
#box:before, #box:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
content: "";
left: 10px;
max-width: 300px;
position: absolute;
top: 80%;
transform: rotate(-3deg);
width: 50%;
z-index: -1;
}
#box:after {
left: auto;
right: 10px;
transform: rotate(3deg);
}
#box {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 4px 4px 4px 4px;
color: rgba(0, 0, 0, 0.8);
line-height: 1.5;
margin: 60px auto;
padding: 2em 1.5em;
position: relative;
text-shadow: 0 1px 0 #FFFFFF;
width: 60%;
}
I have a "maincontent" div that contains, well, my content. There's some javascript (Fancybox) in it to show images. I'm trying to have the height of the div automatically change to accompany whatever's in it so that the div itself doesn't scroll, but the entire webpage does.
Here's a page I'd like to fix: http://willryan.us/content/photo.html
I've tried messing with min-heights, height:auto, overflow:auto, etc, with no result. Height:auto acts as thought the text is the only thing in the div, like its completely ignoring the javascript images.
Here's my css as it is now:
div#content {
overflow:auto;
width:958px;
height: 800px;
position:absolute;
top:50px;
left:0px;
background-color:#C0CACE;
border:1px solid;
border-color:#616161;
-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
z-index:1;
}
The problem has to do with photobox div, if you turn off position absolute, it works to its height, turn off height and it fits.
This problem could be avoided if you didn't use absolute positioning when you don't need it.
You should rebuild your page using relative positioning. It should be quite easy considering you just need to center the div's you are using with text-align:center; on their parents.
Your problem lies with using absolute positioning. Use static positioning (default) for regular document flow and you won't have this problem.
UPDATE
You don't use relative positioning either.
Regular document flow (without explicitly specifying it) is position: static; you use absolute. Absolute positioning basically takes the element out of the regular flow of the document and places it based it's nearest relatively positioned parent.
What you should be doing...
If you need your wrapper positioned in the "center". Set "wrapper" to positon:relative with margin: 0px auto; and remove absolute positon from all inner elements. If you need to indent elements inside wrapper use padding/margin.
I'll suggest you to use position: relative to not use position:absolute in your maincontent children. You don't really need absolute here.
Remove #content height (or use min-height)
Remove #photobox height (or use min-height)
Remove #content overflow
Set all #content children position to relative (use margins if necessary)
.
div#header {
background-image:url(content/assets/elements/header.png);backround-repeat:none;
width:960px;
height:50px;
z-index:2;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
}
div#footer {
background-image:url(content/assets/elements/footer.png);
backround-repeat:none;
width:960px;
height:50px;
z-index:2;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
}
div#content {
width:958px;
background-color:#C0CACE;
border:1px solid;
border-color:#616161;
-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
z-index:1;
overflow: visible;
}
div#photobox {
width: 769px;
margin-left: 95.5px;
}