I'm using bootstrap for design web for and have created controls inside div with class thumbnail but that controls going out of that div. Here is link to code
You can set the thumbnail height to Auto, also you can set the min-height for empty thumbnail divs, like this:
.thumbnail {
height:auto !important;
min-height: 100px;
}
Edit #1:
Try removing col-xs-6 col-md-6 classes and float your button to right ( also if you want add another button you can flaot it to left ), like this:
#btnsubmit{
float:right;
}
Updated Fiddle #2
Updated Fiddle #3 (using overflow:hidden;)
Related
I Want to make my form items responsive when re-size application window like the websites but i can't do it.
I want to make it always in the center of the application window i was used "anchor" property but it doesn't do it.
there is any way to do this ??
You can centre a control on the form by using CSS. For example:
div.deskTop
{
width: 60%;
margin: 0 auto;
}
Then use the HTML:
<div class="deskTop">
... Define controls to be centred ...
</div>
The DIV containing the control will always be 60% the width of the current form size, and will be automatically centred when the form resizes.
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.
Here is the fiddle. I've put a Select box as sample. It seems that it can't be shown inside modal. How can be it solved?
...................................................Update.....................................
To solve this, I've added this CSS:
.bootstrap-select.btn-group .dropdown-menu.inner {
position: static;
}
Now, the Select-Option are showing, but it seems that the dropdown taking the real space which increasing the height of popup. But, I expect dropdown will cross the popup window if the height of dropdown is much. How can I make it?
Updated Fiddle
See the updated jsFiddle: http://jsfiddle.net/mijopabe/gj9axc18/5/ You need to add this to your CSS:
.modal { overflow: visible; }
.modal-body { overflow-y: visible !important; }
I also took the liberty of including the plugins corresponding CSS file from a CDN:
//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css
In jQuery, we can use innerHeight to get the height of one element (including padding but not border.).
$("selector").innerHeight();
How can I get the same value by dojo?
What my solution is using
dojo.contentBox() //get the height of content box
dojo.style(node, "borderTopWidth") //get width of border-top
dojo.style(node, "borderBottomWidth"). //get width of border-left
Is there any easy way to do it?
Unfortunately, I don't think there is an easier way to do it.
You basically have three choices:
dojo.contentBox(node) // excludes border, padding and margin
dojo.position(node) // includes border and padding; excludes margin
dojo.marginBox(node) // includes border, padding and margin
So, you need to do what you suggested. Use dojo.contentBox(), then separately calculate the top and bottom border widths.
Alternatively you might want to place a <div> inside a <div>, so that you can set the border on the outer div and keep the padding on the inner div. You would then be able to get the required height from calling dojo.position() for the inner div.
<div id="outer" style="border: solid #000 1px;">
<div id="inner" style="height: 20px; padding: 2px;">.</div>
</div>
<script>
alert(dojo.position("inner").h) // 24
</script>
I have a simple question. I want to style the header bar in jQuery mobile. Specifically I want to set the height of the bar and add a background image to it. How can I do that?
Thank you in advance
This is how I handled it. Instead of actually putting an H1 inside the data-role="header", just directly insert a
<div class="ui-title"></div>
and then add something like this to your custom CSS.
.ui-header .ui-title{
margin: 0.3em 70px 0.7em 10px;
background-image:url(../images/logo-page.png);
background-repeat:no-repeat;
background-position:0 0px;
width:178px;
height:40px;
}