I designed recaptcha for Bootstrap 3. now i need to show recaptcha image in 100% for responsive theme.
HTML :
<div class="form-group">
<div class="captcha">
<div id="recaptcha_image"></div>
</div>
</div>
<div class="form-group">
<div class="recaptcha_only_if_image">Enter the words above</div>
<div class="recaptcha_only_if_audio">Enter the numbers you hear</div>
<div class="input-group">
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="form-control input-lg" /> <a class="btn btn-default input-group-addon" href="javascript:Recaptcha.reload()"><span class="icon-refresh"></span></a>
<a class="btn btn-default input-group-addon recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')"><span class="icon-volume-up"></span></a>
<a class="btn btn-default input-group-addon recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"><span class="icon-picture"></span></a>
</div>
<script>
var RecaptchaOptions = {
theme: 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR" height="300" width="500" frameborder="0"></iframe>
<br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge" />
</noscript>
</div>
CSS:
#recaptcha_image img {
width:100%
}
how do resize images recaptcha for responsive design?!
demo : FIDDLE
Try setting captcha container to 100% as well
.captcha, #recaptcha_image, #recaptcha_image img {
width:100% !important;
}
Fiddle: Here
Try this, It works Fine, Here is your UPDATED FIDDLE
Just add this code
CSS
#recaptcha_image {
width: 100% !important;
}
Now it will work as responsive for the Recaptcha.
Use this code in the header section.
<meta name="viewport" content="width=device-width, initial-scale=1">
Without we can't responsive of the design.
And use this code also:
#recaptcha_image img {
width:100% !important;
}
You should add a max-width aswell, otherwise it will stretch the entire image and will make it unreadable if the screen is big.
css:
#recaptcha_image img {
width:100%
}
#recaptcha_image {
width: 100% ! important;
max-width:400px;
}
DEMO
Related
As per question title, I am using bootstrap-slider.js and I don't seem to be able to get away from the default of a fixed width. However I want it to expand with the screen width. Here is my code so far:
<div class="well">
<span>Least likely </span>
<div class="slider slider-horizontal">
<input id="ex1" type="text" data-provide="slider" />
</div>
<span> Most likely</span>
</div>
This looks like:
I have tried putting style="width:100%" on the input and again on the slider div, both with horrific results.
You can use Flexbox. Also not required &nsbp; and added margin.
// Without JQuery
var slider = new Slider('#ex1', {
formatter: function(value) {
return 'Current value: ' + value;
}
});
#ex1Slider .slider-selection {
background: #BABABA;
}
.dad {
display: flex;
}
.child {
margin: auto 10px;
}
.bigchild {
flex: 1;
}
div#ex1Slider.slider.slider-horizontal {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.js"></script>
<div class="well dad">
<span class="child">Least likely</span>
<div class="slider slider-horizontal bigchild">
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</div>
<span class="child">Most likely</span>
</div>
I'm trying to make a simple CSS file to make my app look decently, but I have a problem with it
<div class='container-fluid'>
<div id="nav">
<div class='col-sm-6' align="center">
<h2>Utwórz nową sesje</h2>
<br><br>
<input class="form-control mr-sm-2" type="text" aria-label="Search"><br>
<a class="btn btn-primary btn-md" href="#" role="button">Stwórz</a>
</div>
<div class='col-sm-6' align="center">
<h2>Dołącz do istniejącej sesji</h2>
<br><br>
<input class="form-control mr-sm-2" type="text" aria-label="Search"><br>
<a class="btn btn-primary btn-ms" href="#" role="button">Dołącz</a>
</div>
</div>
And no matter if I make it
#bootstap-overrides .container-fluid {
background-color: #3b5998;
}
Or
.container-fluid {
background-color: #3b5998;
}
or
.nav {
background-color: #3b5998;
}
Background is still white, as if bootstrap was overrding it. I'm a beggineer at CSS.
EDIT:
#Component({
selector: 'home',
templateUrl: './home.component.css'})
The templateUrl field was wrong, so i fixed it. However, now the entire site appears white.
You Should organize your CSS links like this
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/custom.css"/>
First Bootstrap file and then your custom css file
If you want to change the whole class as example '.container-fluid', you could add the tag !important.
e.g.:
.container-fluid {
background-color: #3b5998 !important;
}
But in most cases it is more recommended to create child elements as you did.
You have to use your 'nav'-element as follows in your css:
#nav {
background-color: #3b5998;
}
You have to use '#' instead of '.', because you declared it as an ID- not a CLASS-element
So i had a solution to do something like this:
the problem was that everytime i had a little bigger text my button increased, and it became really ugly since i have a section full of buttons that i want to preserve the same size.
So i think a good option would be to mantain the same size for the buttons? (if there is other option would like to know :)).
So i had this:
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br><span class="fontSize">Image</span>
</button>
</div>
how can i change my solution to have the same effect i want on the button, i mean with the image and text centered related to the image mantaining the size of the button? any help i appreciate :)
Thanks
Are you looking for something like this? (I know, it's ugly)
#test{
min-width: 5px;
max-width: 5px;
}
<button id="test">test</button>
Here you go with a solution https://jsfiddle.net/r3g31e11/1/
.btn {
width: 100px;
height: 30px;
text-overflow: ellipsis;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">
Submit
</button>
<br/>
<br/>
<button class="btn btn-primary">
Testisnottoincreasebuttonwidth
</button>
Truncate the extra character use ellipse. Set height & width of the button.
.test {
width : 80px;
}
.test > span {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:40px;
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-1">
<button class="btn btn-primary-outline btn-small test"><span>Test</span></button>
<button class="btn btn-primary-outline btn-small test"><span>Test with large size</span></button>
</div>
I am just using float: left on an icon right now because I am struggling with positioning the text in my button such that the icon is in the "middle" (20% of the left) and the text is in the middle (80% of the right).
Like this:
**********************************
* Icon Text will be here *
* *
**********************************
Here is how I have the button set up:
<button class="button button-block">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
Try CSS flexbox:
#container {
display: flex;
align-items: center;
}
#container > * {
margin-right: 5px;
}
<button>
<span id="container">
<img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
<span>Add to Favorites</span>
</span>
</button>
I used a span to wrap the content because some browsers don't accept button elements as flex containers.
Browser Support
Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE 10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
How about something like this ?
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
});
.button-block {
display: inline-block;
vertical-align: middle;
}
.button-block i {
margin-right: 15px;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Pull to Refresh</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content>
<div class="tabs" style="height:auto;">
<div class="row">
<div class="col" style="padding: 0">
<button class="button button-block button-positive">
<i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>
</div>
</div>
</div>
</ion-content>
</body>
</html>
Here is an example using Font Awesome.
Add a left margin to the span to control the spacing between the two inline elements (i and span).
If you specify a width for the button, then you can set widths to the two child elements as needed.
button span {
margin-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="button button-block">
<i class="fa fa-plus-circle"></i><span>Add to Favorites</span>
</button>
.btn-cont {Margin-left: 12px;}
<button><span class="btn-cont">Hello World</span><button>
I have 3 Bootstrap buttons side-by-side, but one of them has a line break (I'm modifying them with white-space: normal). I need them all to have the same height, and vertical-centered text.
I have them like this:
And I need them like this:
I can't figure out how to do this. Any ideas?
would something like this work for you?
.option-button {
height:100%;
}
.media-object {
height: 100px;
}
<br/><br/>
<div class="media-object pull-left">
<button class="btn btn-info option-button">A</button>
<button class="btn btn-primary option-button">A<br/>B<br/>C</button>
<button class="btn btn-info option-button">A</button>
</div>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
you can use height: 100%; on the buttons but with that, you need to set the height of the containing div. hope this helps!