w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
how to position a background for a big image which is centered at the center of the page?
You can now set a background image to stretch to the edges of the container in various ways. If you don't mind the image distorting, you would do it like this: background-size: 100% 100%; Rather than this (which is broken) style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;" try this in your style sheet: body { background-image:url("img/bg.png"); background-size: 100% 100%; }

Categories : HTML

svg background image position is always centered in internet explorer, despite background-position: left center;
The problem is not with your CSS but with your SVG. The SVG will grow to fill the entire element box’s background (as expected). How your SVG scale then becomes the controlling factor: Set a viewBox="0 0 width height" (in pixels) attribute on your <svg> element and remove its width and height attributes. You also need to set preserveAspectRatio="xMinYMid" (x/vertically left-aligned, y/horizontally middle-aligned) on the svg element. This works with Internet Explorer 10 and 11, at least. <svg viewbox="0 0 64 64" preserveAspectRatio="xMinYMid"> … </svg> Learn more about the preserveAspectRatio and viewBox attributes. Source, “Getting started with SVG” in the IEblog.

Categories : HTML

Twitter Bootstrap 3.0 - centered search box
So, using Bootstrap will automatically make the spans break to show full widths at a certain breakpoint... it does that for responsiveness! I usually have to create my own styles when i would like something to act as I want it. Which is totally ok! So, using inline styles just for a quick example, (you can turn them into proper styles for your stylesheet) you can do something like this with your search area... also updated the jsfiddle here <!-- Global Search --> <div class="row search"> <div class="col-md-8 col-md-offset-2"> <form class="form-inline" role="form"> <div class="form-group"> <div style="width:75%; float: left;"> <label class="sr-

Categories : HTML

Twitter Bootstrap Typeahead only populating letter "a"
Looks like there is a problem with the array, I made the array smaller and it works now, you can see it here: UPDATE You forgot some commas in the array the the updated array from js fiddle, at 'Bangladesh' there it is the problem http://jsfiddle.net/dT5vJ/2/ Please recheck your array var location = ["Afghanistan", "Akrotiri", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Aruba", "Ashmore and Cartier Islands", "Australia", "Austria", "Azerbaijan", "Bahamas, The" ];

Categories : Twitter

How to center a span with Twitter Bootstrap
try something like this <div class="row"> <div class="span6" > <div class="span2 offset2" style="border:2px solid;">some text</div> </div> <div class="span6"> <div class="span2 offset2" style="border:2px solid;">some text</div> </div> </div>

Categories : Twitter

Center a column using Twitter Bootstrap 3
Bootstrap 3 now has a built-in class for this .center-block .center-block { display: block; margin-left: auto; margin-right: auto; } If you are still using 2.X then just add this to your CSS.

Categories : CSS

Center align a column in twitter bootstrap
Unless I'm misunderstanding your question, it should certainly be something like that... <div class="content"> <div class="span5 float-left">5 columns left</div> <div class="span1 float-left">1 column middle</div> <div class="span5 float-left">5 columns right</div> </div>

Categories : Twitter

How can I center Twitter-Bootstrap 3 navbar buttons?
Add the style .nav{ text-align: center; } This will center the text in li. Check Fiddle These styles should be sufficient. You were trying to apply styles to to the wrong element. // This is being applied by the bootstrap // Set it to 25px instead of the default 15px .navbar{ padding : 0 25px; } // Gave a width of 110px for each li // as the container is following a fixed width format li{ width:110px; }

Categories : CSS

How do I center these Twitter bootstrap 3 navbar links?
The .nav-justifed class is to be used with nav-tabs / nav-pills (see bootstrap docs) and not nav-bar. The two concepts are very different and should not be confused. However, you can achieve the effect you are looking for by adding the following css: .navbar-nav.nav-justified > li{ float:none; } nav-justifiednow plays nice with navbar-nav: <ul class="nav navbar-nav nav-justified"> See updated jsFiddle.

Categories : HTML

Twitter Bootstrap - Center Modal Dialog
This is just matter of applying some CSS to the pleaseWaitDialog ID. You have to set position:absolute and the margin-top and margin-left need to be half of the height and width. So your CSS should look something like this: #pleaseWaitDialog { width: 400px; height: 50px; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -200px; padding: 20px; } You will need to play with the numbers in order to achieve the box size that fits what you want but that should get you started.

Categories : Twitter

How do i shift the text in twitter bootstrap navbar to center?
Depending on where you want the Brand link to appear, here are two possiblities http://jsfiddle.net/panchroma/cW9sA/ or http://jsfiddle.net/panchroma/GWMnF/ EDIT: A third variation where the iPolice brand link is always centered, even at narrow viewports http://jsfiddle.net/panchroma/F5x5Z/ Note that in the second example I've added a copy of the brand link into the main menu, and used the utility classes of .hidden-desktop and .visible-desktop to fine tune how this is displayed at different viewports Important CSS is #twitterbootstrap .navbar .nav, #twitterbootstrap .navbar .nav > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ *zoom:1; /* hasLayout ie7 trigger */ vertical-align: top; } #twitterbootstrap .navbar-inner { text-align:center; } Some of thi

Categories : CSS

How to center an image with fluid layout in Twitter Bootstrap 2.3.2?
try this <header> <div class="row-fluid"> <div class="span5 offset2"> <center><img src="img/yup.jpg" title="Hello" alt="World"></center> </div> </div> <div class="row-fluid"> <div class="title span12"> <h1>Hello Kitty</h1> </div> </div> </header> UPDATE : based on comment When you use row-fluid, it will create row which can be manageable by 12 parts named as span1,span2...span12. Where offset is applying as margin-left. You can apply it as per your requirement. it is also divided into 12 parts. Here, I have used tag because you want your image in center as by default it is left align.

Categories : Twitter

Wrong pop-up position when using twitter-bootstrap
80% width, centered, responsive using only CSS: #modal { width: 80%; margin-left: -40%; left: 50%; } https://github.com/twitter/bootstrap/issues/675

Categories : Twitter

Bootstrap 3 modal vertical position center
Try something like this: .popup__overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; text-align: center } .popup { display: inline-block; vertical-align: middle }

Categories : Twitter

Twitter Bootstrap and jQuery Validation Plugin - position or error text
Your code: // validate the form when it is submitted $("#additional").validate(); errorClass: "validateError"; You have a serious syntax error in your code above. There is nothing wrong with $("#additional").validate();, it simply initializes the plugin. However, errorClass: "validateError"; cannot be floating around in your JavaScript all by itself like that. If you want to employ the errorClass option, you must use it as per documentation, and list it inside .validate() along with any other rules and/or options... // .validate() initializes the plugin $("#additional").validate({ // the rules and/or options for Validate() get listed here, // and they are separated by commas, not semicolons. errorClass: "validateError" });

Categories : Twitter

Twitter Bootstrap overlapping nested li elements
Hello and thanks for the fiddle, The problem here is that your inner li's are the same height as the outer li's. The list item Point2 (65px height) contains two li's that are each 65px in height (total of 130px), causing the overlap. The fix is to make sure that the outer-most list item has a height that is greater than the sum of all of it's child li's. You can set this as a pixel/em value if you want a defined height for the parent elements, or you can just remove the height of the parent li's if you want it to shrink to the size of the sum of it's children's heights. Here's a fiddle example with no height on the parent li's: http://jsfiddle.net/HdZ7S/5/ li { position: relative; margin: 0 0 5px 0; padding: 0; background-color: #f9f9f9; border: 1px solid #DED8D8

Categories : CSS

How to get Twitter Bootstrap nav dropdown to push down other elements
While it's not incredibly clear what you mean by "push down" in this context, based on the use of navbar-fixed I'm going to guess that you mean it's covering up your content. That's an easy fix--just add some padding to your body element. 60px usually works. Unless that's not your problem, in which case, A link to a JSFiddle or even to what exactly you're talking about on "the Github example" would be nice.

Categories : HTML

How does Twitter Bootstrap manage

elements in ?

I think you might be mixing up the concepts of HTML <span> elements and Bootstrap's grid classes .span4, .span8, ... . HTML paragraphs (<p></p>) are block elements and must not be placed inside inline elements like <span></span>. Hence the validation warning is thrown. Bootstrap's span-classes are to be used in combination with <div> elements. It's fine to place paragraphs in there: <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> Have a look at the examples at http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

Categories : CSS

Having trouble with centering elements using Twitter Bootstrap
The divs are floats and are causing it to not center as they float to the left. Here's one way to do it: HTML: <div class="span10 clearfix"> CSS: .span10 {margin:auto; width:500px; float:none;} JSFiddle: http://jsfiddle.net/xRE83/7/

Categories : CSS

Twitter bootstrap responsive elements order
I don't get the down votes for this question, it seems like a reasonable problem to me, and something that is actually quite easy to solve within Bootstrap. Check this out: http://jsfiddle.net/panchroma/MzaTV/ The important bit is that I added the nav div before the main content div and added float right. That's basically it. I've used this before and what I really like is that it's such a clean solution to the problem of changing the order of the divs because at viewports < 768px, the Bootstrap grid collapses to a single column and the float right basically has no effect, so the nav div is then displayed befor the main content (in this case) CSS #nav.span2{ float:right; } HTML <div class="container"> <div class="row"> <div class="header">

Categories : CSS

How can I get a loop to ignore non-letter elements in a list?
For one, there are some faster/simpler ways of doing the shifting you want. But to answer your question, you could simply add: if not letter.isalpha(): continue str.isalpha() returns True if the string is composed only of alphabetic letters.

Categories : Python

Creating very large form elements with twitter bootstrap
Bootstrap's inputs have a fixed height, I suggest you set the property to auto to let them scale properly with the font-size you set. Here's a simple demo with a custom class form-large: http://jsfiddle.net/fpC4r/3/show/ .form-large{ font-size: 60px; } .form-large .control-label{ padding-top: 20px; padding-bottom: 20px; line-height: normal; } .form-large input, .form-large button{ font-size: 60px; padding: 20px; height: auto; line-height: normal; }

Categories : HTML

Adding different Twitter Bootstrap popovers to dynamically created elements
What you need is when you add a new control add the popover at the same time: function AddNewElement() { var yourElement = '<div id="yourElementId"> The element you want </div>'; $('divToAppend').append(youElement); var yourPopoverContent = 'Your Personalized popover'; $('#yourElementId').popover({ html : true; content : yourPopoverContent }); } This should work with your actual code for the popover.

Categories : Jquery

What CSS controls the right and left margins between these form elements in Twitter Bootstrap?
Here are the CSS selectors you will need.. Margin the inputs/fields: .form-inline .form-group { margin: 0px 10px; /* Add something like this */ } Margin for the checkbox/radio button: .form-inline .radio, .form-inline .checkbox { margin: 0px 10px; /* Add something like this */ } Margin for the submit button: .bs-example > .btn, .bs-example > .btn-group { margin: 0px 10px; /* Add something like this */ } Margin for the entire inline form .bs-example { margin: 0px 30px; /* Add something like this */ } And to answer your question, there are currently margins between elements, because that is the default. If you wish to remove them, I would suggest doing this manually by adding negative margins to the CSS controls I specified above. For instance, if you wish

Categories : CSS

How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?
I presume you're speaking about the blue glow on focus? Try this: textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus { border-color: rgba(229, 103, 23, 0.8); box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6); outline: 0 none; }

Categories : CSS

how to prevent jquery animation horizontal position jump when animating a fixed position centered div in firefox
You might want to modify the HTML as I've updated the tinker at http://tinker.io/e8bb6/9 <div id="holder"> <div id="bar"> <div id="header"></div> </div> </div>

Categories : Jquery

How to align inline radios / checkboxes and help-block elements in horizontal form with Twitter's Bootstrap 3
Your markup seems to be valid on first sight. About your question 1. You have set your input with: <div class="col-lg-1"> <input type="text" name="weight" class="form-control" value="20"> </div> So to width is set with the col-lg-1 prefix, see also: http://stackoverflow.com/a/17920693/1596547. "col-lg-1" stack below 992 pixels. When you're screen width is > 992 px. The div got a width of 8.333% (100/12). The form-control class set the width of the input tag to 100%. Below the 992px there is no definition for "col-lg-1" cause the 100% width of the input, the input is displayed with 100% width. Try to use the col-* prefixes which never stacks (or use other CSS to set the width) I did not found different behavior for Chrome at all. Above the 992px i will find this

Categories : Forms

center unordered list navbar - bootstrap 3
Here is the code I did yesterday, works fine with Bootstrap 3 RC1. Hope this will help you. <nav class="navbar navbar-fixed-top"> <div class="container"> <a href="#" class="navbar-brand">Title</a> <ul class="nav navbar-nav"> <li class="active"><a href="#" >Home</a></li> <li><a href="#" >Services</a></li> </ul> </div> </nav> Le

Categories : Twitter

Apply twitter bootstrap collapse plugin on a plain ul list
I presume you already included all needed bootstrap files. Better way to apply bootstrap classes is on menu load (through menu module override). But, you still can make it the other way, like: $('.deeper').addClass('accordion-toggle'); And if you need to add new attribute (for example, data-toggle attribute) to the element: $('.deeper').attr('data-toggle', 'collapse');

Categories : Twitter

How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown
First i found the buttons load slow sometimes so you could open the drop-down before your buttons loads. I couldn't test on IE. I found a solution for firefox. The linkedin api (js) loads a div in a iframe in a iframe in a span in a span (or something like) that. I found the button iframes load but got a width of only 2px. The 2 px width seems to be caused by the display:none of the ul.dropdown-menu. My solution replace the display with visibility so the div got space: ul.dropdown-menu { display: block; visibility: hidden; } .open > .dropdown-menu { visibility: visible; } See: http://jsfiddle.net/bassjobsen/dsasu/1/ Instead of the visibilty you also could load the content elsewhere with space and copy it to the dropdown on first click.

Categories : Jquery

Add search box in Twitter's Bootstrap Button dropdown list to select the items
Bootstrap 3 Typeahead is removed in Bootstrap 3 so instead use http://github.com/twitter/typeahead.js. Example on: http://bootply.com/69994 Javascript: var items = new Array(); $( ".dropdown-menu li a.hc" ).each(function( index ) { items.push( $(this).text() ); }); $('.dropdown-menu input').click(function(){return false;}); //prevent menu hide $('.typeahead').typeahead( { name: 'items', local: items } ).on('typeahead:selected', function(obj, datum) { if($('a.hc').filter(function(index) { return $(this).text() === datum.value; })) { //alert('redirect to: ' + $('a.hc').filter(function(index) { return $(this).text() === datum.value; }).attr('h

Categories : Twitter

Populate country list with respective two letter and three letter code in c#
If you really must retrieve this information using C#, this is how I'd do it: var regions = CultureInfo.GetCultures(CultureTypes.AllCultures) .Where(c => !c.IsNeutralCulture && c.LCID != 0x7f) .Select(c => new RegionInfo(c.LCID)) .GroupBy(r => r.TwoLetterISORegionName) // This is an alternative to using Distinct .Select(g => g.First()) // It's probably not very efficient, but the list is so small anyway. .OrderBy(r => r.TwoLetterISORegionName) .ToList(); (The culture with the LCID 0x7f is the InvariantCulture, which doesn't have an associated RegionInfo.) This gives only 127 countries on my computer. Your method gives a lot more results because there are many instances of multiple CultureInfos that share the same RegionInfo

Categories : C#

jquery ui dialog not showing in center of window after setting position to center
You're specifying the position value wrong. It should be like this: position: { my: "center", at: "center", of: window } In any case, the default value for position is center aligned, so just remove it. http://api.jqueryui.com/dialog/#option-position

Categories : Asp Net Mvc

Making Twitter Bootstrap slider load long list of pictures from MySQL efficiently
"Anyway is there a better way to do this?" If you feel there is a better way to do something - do it. I would look at putting the image src strings into an array, then referencing them by their index.

Categories : Mysql

How to sum list elements starting from a specific position
Use list slicing: mylist = [['name','party','city','0','0','1'],['name','party','city','1','1','1']] print sum([sum(map(int, item[3:])) for item in mylist]) # prints 4

Categories : Python

List the maximum or minimum of the elements at each position of two arrays
You can construct arrays of the elements at common positions (that is, transpose a row-wise 2D array into a column-wise 2D array), then map the min or max (or whatever else) values out of each column: [a1, a2].transpose.map &:min # => [5, 30] [a1, a2].transpose.map &:max # => [10, 35]

Categories : Ruby

Position panel in center of page with minimum left position using CSS/HTML
You could use a media query, f.e. @media (max-width: 800px) { /* this has to be the same width as the div */ div { margin-left:0; left:0; } } http://jsfiddle.net/y3zpm/

Categories : HTML

Absolute Position Element Within Centered Div
First set up your centered div with position relative #centered-div{position: relative; width: 900px; margin: auto;} Then set up your login button with position absolute #login{position: absolute; left: 0; top: 50px;}

Categories : CSS

Horizontally center zurb foundation top bar menu, with multiline items vertically centered
I cannot resolve your issue, but I can explain why it is difficult to do with Zurb Foundation. The way that buttons are implemented (and reused in the top-bar) in Zurb Foundation have the css display:inline-block set. This means that you cannot vertically align the text using vertical-align:middle This makes it impossible to automatically align buttons with multiline text. The top-bar is not designed to have evenly spaced elements. You can use a ul.button-group.event-6 to get closer to your desired layout, but it will not work with all of your constraints. It is designed to have a Logo, a left menu and a right menu. Setting the height is easy and can be done in css by applying height:80px for example to each of the buttons. However, the multiline text alignment will be to the top. Submen

Categories : CSS

Cursor position centered and in the middle for javaFX TextArea
-fx-alignment: center Read this documentation http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#textarea

Categories : CSS



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.