w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
  Home » CSS » Page 1
Rails make checkbox more visible
I think your question was answered here: Size of checkbox bootstrap The answer was: It is possible in css, but not for all the browser. The effect on all browsers: http://www.456bereastreet.com/lab/form_controls/checkboxes/ A possibility is a custom checkbox with javascript: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Categories : CSS

How to separate css result from "editor windows" and "preview frame" of an website editor?
Why would you want to keep the two styles in the same file? If you ever have to rewrite your own styling, chances are that the changes made by the users will be lost? You could apply a certain class to the elements that are edible by the user and in that way split things up. for example: <form class="edit"></form> --> this will be changed <form></form> Then in your

Categories : CSS

Animation not working Chrome
Add this : @-webkit-keyframes spin { to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } Link : Doc

Categories : CSS

Using CSS to style a numbered list
Below is a sample on how the desired result can be achieved using <ol> (ordered lists) and CSS counters. It has a bit of a hack-ish feel about it because of the expectation that when a line is wrapped around, it should not start from under the numberings. Otherwise, I feel this method is much better than manually keying in the numbers (or) using tables. Consistent spacing between the number

Categories : CSS

wordpress absolute div does not stack in front of header
Your absolute-positioned div is "clipped" on the bounding rectangle of its parent (top:-100px). The solution is to specify overflow: visible on the container div. In your case: .content { /* ... */ overflow: visible; }

Categories : CSS

Zurb Foundation how to make image fill a cell in a grid row
The issue is your background-image div has no height or width or content. .medium-6 will afford width (as a percentage), but not height. If you want the background-image div to be of the same height as the "bunch of text" div, you should use the Zurb Block Grid, which is similar but uses display: inline-block; so each sibling inherits the greatest height. You could also use display: table-cell

Categories : CSS

Changing CSS classes within Ember and SortMixin
Your <th> now has state (whether it's sorted, and whether it's ascending or descending), so you should wrap it up in a component. Something like this <table> <thead> <tr> {{#sortable-th property='name' action='sortBy'}} Campaign Name {{/#sortable-th}} </tr> </thead> </table> The component's template // templates/componen

Categories : CSS

bootstrap grid in widescreen mode has incorrect div offset
This is a simple issue most people don't think of. Your columns should start a new line on a new row if the content is variable. Because the length of the left column is longer than the right, the next line can't go all the way to the left. Alternatively, you could have a height defined or use jQuery to match height. Here's the markup solution with Bootstrap: <div class="row"> <div c

Categories : CSS

CSS Hidden elements with :odd pseudo - selector
You could make use of the CSS flexbox model to layout a tabular structure. The key here is the flex-basis property on the items. Making it equal to the width i.e. 50% in this case, forces a two-column layout. Also required here is the flex-wrap: wrap property. See this snippet: ul { list-style: none; margin:0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; width:

Categories : CSS

How can I style the extension Sidebar?
There are several ways to do achieve this but my preferred method is to inject the relevant CSS rules into the page using the appropriate selector. So, for example, to change the border color to red: var inlineCss = '.crossrider-sidebar-'+appAPI.appInfo.id+'-container {' + 'border-color:red !important;' + '}'; appAPI.dom.addInlineCSS({css:inlineCss}); [Disclosure: I am a Crossrider employee]

Categories : CSS

CSS transforms not pixel perfect
Instead of giving width: 100% and height: 100% to the .wrapper class, I added position absolute and stretched it to its parent container which is body element. and when the side bar is viewed, I gave the top and bottom properties as 20px which overrides the already provided 0px value. .wrapper { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } .wrapper.showS

Categories : CSS

Need to test website on my desktop like iPhone 4 on pc
Testing a web application on every browser and platform is not feasible. See if BrowserStack might solve your web application testing problem. The maturation of web standards like CSS and HTML makes it easier to build robust applications, but support and implementation of those standards is not uniform, so thorough testing is necessary to ensure applications perform as expected. The vast number o

Categories : CSS

woocommerce theme nline styles are not working in IE 9 browser
Try to look for "if gt IE" or "if lt IE" lines in the source code of the page. They might be attached to the inline css. If so check the theme header.php and find where it generates the inline css. Also the theme might use a specific IE css file that overrides the inline styles by using "!important" declarations. Hope this helped!

Categories : CSS

bootstrap form styling with elements left and right
Is this what you need, now you have add some your styles for button, and background <div class="panel-footer modal_custom"> <div class="container"> <h2>Talk to us</h2> <h4>What's on your mind?</h4> <form action="" role="form"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group">

Categories : CSS

What path do I use to call a background image in codeigniter
background-image: url() in CSS works relatively. Try this: body { background-image: url('../img/bg-admin.jpg'); } This is assuming that your css file is in assets/css and not a sub folder of it. Hope this helps!

Categories : CSS

Content shrinks in Chrome, Opera but FireFox renders it correctly
This is because the browser automatically renders the website to the default zoom unless you state otherwise. You should use a meta tag to declare the zoom for the webpage. Check out https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag. If you need more help or this isn't what your looking for please comment back. Sent from mobile.

Categories : CSS

CSS multiple selection with square brackets
You need to go with sass as Suresh told. A solution with sass would be: %temp { margin-top: 20px; position: relative; z-index: 1; } @for $i from 1 through 5 { #stage-#{$i}-picture { @extend %temp; } } An example: http://sassmeister.com/gist/904fb5c267e5ddfe0c8a

Categories : CSS

apply css to table column with certain caption
This is not tested, but you'll get the point: var index = $(".v-table-header-wrap .v-table-header-cell .v-table-caption-container:contains('Value')").index() + 1; // get the index of the header first $(".v-table-body .v-table-table").addClass("wordwrap-table"); // add "wordwrap-table" class to the table $(".v-table-body .v-table-table tr td:nth-child(" + index + ")").addClass("v-table-cell-wrapp

Categories : CSS

Font-size not same in firefox and safari
Set the base font size for the body, for example: body { font-size: 63%; } Then, for the font sizes for the rest of the elements, use relative units such as em. For example: #navigation { font-size: 1.2em; }

Categories : CSS

Set div style to avoid control displacement
How about using the css property visibility? The visibility attribute allows the element to be hidden, but leaves the space where it would have been. For more information about it, read here. DEMO: http://jsfiddle.net/Lppme028/22/ CSS #txt { visibility: hidden; } JavaScript $(document).ready(function () { $("#btn").click(function (){ $("#txt").visibilityToggle(); })

Categories : CSS

3d Navbar That Rotates
Fiddle with a flipping box This is vastly different from where you started, but let me post my CSS and show you the fiddle, and then I'll edit in a longer explanation of how and why this works:   HTML <section class="container"> <nav id="nav-box" class="show-front"> <div class="front"> <a href="#">Show Bottom</a> </div>

Categories : CSS

responsive design: align div containing image text at the middle center
Here is the updated code. HTML: <div id="maincontainer"> <div id="contentcontainer"> <img src="http://placehold.it/150x150" style="float: left;"> <div style="text-align:left;"> <div>This is the title</div> <div>This is the body</div> </div> </div> </div>

Categories : CSS

Play multiple CSS animations at the same time
you can try something like this set the parent to rotate and the image to scale so that the rotate and scale time can be different div { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; -webkit-animation: spin 2s linear infinite; } .image { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin: -60px

Categories : CSS

How to add a CSS arrow to an absolutely positioned element
It will work just fine for your absolutely positioned element. Next time, try it before asking! All the arrow trick requires is for your element to be positioned in the first place in order for the arrow position to be relative to it. It works with relative, absolute and fixed positioning alike.

Categories : CSS

Word-wrap not working in jumbotron bootstrap
Try the following on the text that you want to wrap on to the next line. h1 { word-wrap:break-word; } This will break up the long word at any character though. See the links below for more information. mdn doc for word-break css-tricks

Categories : CSS

Chrome CSS Width Issue
Chrome width is not what you get with javascript or CSS. Try resizing with this code while Dev Tools open. Needs jquery for ease $(window).resize(function () { console.log(" -jqwidth:", $(window).width(), " -inner:", window.innerWidth, " -outer:", window.outerHeight ); }); It outputs like: -jqwidth: 973 -inner: 992 -outer: 1100 While Chrome shows 892 Chrome is worst than Explor

Categories : CSS

Bootstrap 3.0 labels don't go inline
Need to add float: left or bootstrap pull-left (I think that is name) attribute Attribute option (pull-left): <a href="#"><span class="label label-default pull-left">Tag name 1</span></a> OR CSS option div.well { width: 300px, // or whatever width; // add rest of well CSS } a { float: left; // rest of your a CSS }

Categories : CSS

Bootstrap 3 Glyphicons Not Showing
You need to correct your spelling from glyhpicon to glyphicon: <!-- From: --> <span class="glyphicon glyhpicon-pencil" aria-hidden="true"></span> <!-- To: --> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>

Categories : CSS

matching ending CSS curly brace when it ends without a semicolon
Assuming JavaScript. This adds the missing semicolons: s.replace(/([^{};s])(s*})/g, "$1;$2") I include {} in the first character class, since there could be empty rules: .foo {} The pattern captures the last non-whitespace character before the brace, since JavaScript does not support look-behinds. Since I was already capturing characters, I captured the closing brace as well, instead of usin

Categories : CSS

Bootstrap 3 - Carousel - Right and left arrows and gradient don't align with image
Got something working, but I think it higlights a problem with trying to do this. FIDDLE jQuery: var width = $('div.item.active > img').width(); $('#myCarousel').width(width); $('#myCarousel').on('slide.bs.carousel', function () { var width = $('div.item.active > img').width(); $('#myCarousel').width(width); }); I've only included the jQuery here because the HTML is the same a

Categories : CSS

Issue on Adding Style To Bootstrap 3 Popovers
You using popovers as data toggle in your HTML. Use tooltip. Also, bootstrap generates 3 levels of html code for a tooltip, you want to stylize the div.tooltip.inner (3rd level). Styling tooltip root won't work. Here is tooltip that I know works in my code. I'm using LESS: <li class="my-toolbar-item" data-placement="top" data-toggle="tooltip" title="Object 300w x 200h"</li> div.toolt

Categories : CSS

PHPStorm not finding images on build, how to configure?
Why not just add in ProjectName to the path? background-image: url( ProjectName/CSS/Img/separator.png); Alternatively, you can walk up and down the directory. Sometimes confusing as it is natural next step on your HD, but the web server (locahost) is using relative path so it doesn't know how to get from where it is to where the png file is so you need to be explicit or walk it down or up from

Categories : CSS

why does changing the `background-color` of a button change other styles too?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid. Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot

Categories : CSS

CSS issue aligning vertical and horizontal
You need to: Wrap div.inlineWrapper into a div.container. Add width: 630px, height: 210px, transform: translate(-50%, -50%), left: 50% and top: 50% to .container. Add a width: 588px and position: relative to #backgruond And this will center all your buttons vertically and horizontally. Demo on dabblet HTML: <div id="background"> <div class="container"> <div class=

Categories : CSS

li elements are getting double margin, ul element cant be properly sized
Pretty straightforward: CSS Changes ul{ width: 100%; margin: 0 0; /* Changed */ padding: 0; background-color: tomato; }   div{ width: 100%; height: 100px; margin: 5px 0; /* Changed */ background-color: cornflowerblue; } Fiddle illustrating the change   What's going on here is that your margins were all over the place. No need to set negative marg

Categories : CSS

wrap div around text (to create a button) CSS
Add padding to your .button class, and set display: to inline-block, like so: .button { padding: 5px 10px; display: inline-block; } Hope this helps.

Categories : CSS

:after and :before not working on mobile browsers
This issue was not concerning pseudo elements. It's about CSS3 relative sizing with vw. Your pseudo elements had rather width or border width of the styled parts given in vw. That's why the mobile browsers stucked. Android (like on your Galaxies) just supports this from 4.4 upwards.

Categories : CSS

Bootrap 3 with Less: How to costume media query
As can be seen in the code below, i think your code works as expected. You should import your custom.less into the bootstrap.less file: @import "custom.less"; And compile the bootstrap.less file. When you only compile the custom.less file, you should import Bootstrap's variables.less file. Notice that when your are testing with IE8 for some reason, you should first read IE8 issue with Twitter

Categories : CSS

Transform scaleX relative to other elements
Remember to set both an initial and a destination value for your transitions, like so: input{ display: inline-block; vertical-align: top; transition: width 1s ease; transform-origin:left; width: 100px; } input:focus{ width: 200px } JSBin illustrating this here

Categories : CSS




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