A screenshot
I`m using bootstrap to create an image radio button, and I'm trying to position the radio button on the right corner of the image, tried absolute positioning but its not working, maybe I'm just missing something.
https://codepen.io/jhongeric/pen/eYNrgPP
div {
margin-left: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="custom-control custom-radio image-checkbox">
<input type="radio" class="custom-control-input myinput" id="ck2a" name="ck2">
<label class="custom-control-label" for="ck2a">
<img src="https://via.placeholder.com/350
C/O https://placeholder.com/" alt="#" class="img-fluid">
</label>
</div>
.custom-control-label::before{left:auto;right:0;}
https://codepen.io/vadivel-tlga/pen/NWqMdQX
Related
I have developed a form using Bootstrap and I need the form to behave correctly on different devices. In one part of my form I have three inputs on one row, which usually works fine. But when I emulate different devices in the browser I see that the labels are broken into two lines when the screen width is to narrow. This makes sense of course, but I need a solution to prevent this. Is it possible? I can accept that the label/icon is cropped, but not divided to several lines. The form is generated by PHP and the labels may vary in length.
My expected result is like this (labels will have an icon on their side):
But when the screen width gets too narrow it looks like this:
I don't want the icon to appear on a new line. I would rather prefer that it was hidden if there's no space for it.
In the sample code below I have forced the width to 350px to illustrate the problem. When using width 400px or more it looks good:
<html>
<head>
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container" style="max-width:350px">
<form>
<div class="form-row">
<div class="col-4">
<div class="form-group">
<label for="input-1">First label <span class='fas fa-info-circle'></span>
</label>
<input id="input-1" class="form-control" name="input1" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Second label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input2" type="text">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="input-1">Third label <span class='fas fa-info-circle'></span></label>
<input id="input-1" class="form-control" name="input3" type="text">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
First of all you have to find at which device width, it is breaking, after that you can add media query in css to hide the icon.
Like this:
#media screen and (max-width: 350px) {
.fa-info-circle {
display: none;
}
}
this will hide the icon for width 350px or less.
You can use ellipsis in the label tag. So a part of the label along with the icon will be replaced with an ... when they exceed over the width limit.
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I have a webpage utilizing the current bootstrap. It displays a label and text input box part of a form.
If I include the class="custom-control-input" to the input text field, Bootstrap hides it. Why?
If I don't include, it shows up, but it won't fulfill the full width according to its parent div tag.
The code is:
<div class="container">
<form class="needs-validation" novalidate action="submit_transgene_entry.php" method="post">
<div class="row">
<div class="col-md-2 mb-3">
<label for="comments_fieldID1">field below is shown, but won't extend full width</label>
</div>
<div class="col-md-10 mb-3">
<input type="text" id="comments_fieldID1" name="comments_fieldName">
</div>
</div>
<div class="row">
<div class="col-md-2 mb-3">
<label for="comments_fieldID2">the following field is hidden by custom-control-input</label>
</div>
<div class="col-md-4 mb-3">
<input type="text" id="comments_fieldID2" class="custom-control-input" name="comments_fieldName">
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<input type="submit" name='accept_transgene_entry' class="btn btn-primary btn-lg btn-block" value="Accept Transgene Entry" alt="Accept Transgene Entry"/>
</div>
</div>
</form>
</div>
You can see the code in action at this page
You must use the form-control class instead of custom-control-input.
I've edited your fiddle:
https://jsfiddle.net/2orbj50v/
Just add this in your CSS
#comments_fieldID1 {
width:100%;
}
Reason Behind Hiding this the class "custom-control-input" have some default css value from bootstrap like this, if you change the opacity 1 instead of 0 it will show the original field.
.custom-control-input {
position: absolute;
z-index: -1;
opacity: 0;
}
to make the input field full width just add this css
#comments_fieldID1 {
width:100%;
}
That may be because bootstrap 4 provide customized form elements for
Checkbox
Radio button
Range
Select
Upload
Toggle
And for these to work you have to wrap it around a <div> with class="custom-control custom-checkbox". The following is the example if you want to use custom-checkbox. But it won't work if you replace checkbox with text
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Custom checkbox</label>
</div>
And for your first input box, you can simply make it's with to be 100%. Like shown below:
#comments_fieldID1{
width:100%;
}
Best Answer : Use form-control for your #comments_fieldID1 element
Or you can add css in your css file :
#comments_fieldID1 {
width: 100%;
}
The text-center centers the label "check this custom checkbox" but the input remains on the left.
If you remove that custom-control-input class then you will see a new checkbox input which will be centered and the bootstrap input will still be there on the left and it will be unclickable.
I want to center the whole thing.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="custom-control custom-checkbox text-center">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
Use Bootstrap 4.1 or newer like the latest 4.2.1 release. The custom-control-label was changed as of Bootstrap 4.1 to be position:relative which will allow both the checkbox and label to be centered.
Demo
Try this markup:
<label class="custom-control-label" for="customCheck1"><input type="checkbox" class="custom-control-input" id="customCheck1" />Check this custom checkbox</label>
You can try this code,
just tell your current div 'd-inline-block' this is bootstrap class and wrap a container class and add text-center
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container text-center">
<div class="custom-control d-inline-block custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
</div>
I am having a problem with Bootstrap radio inputs in which I can't seem to get the alignment to be vertically in the middle with the text.
<div class="tab-content">
<div class="tab-pane" id="Type">
<form>
<div class="form-group">
<input type="radio"
value="Server"
checked="checked"
class="form-control"
style="width: 34px; display: inline-block" />
<label for="WindowsServer">Windows Server / PC</label><br />
</div>
</form>
</div>
</div>
Can anyone point out what I'm doing wrong or what I can do to fix this?
Got this sorted - after much playing around, I added a style:
input{
vertical-align:bottom;
}
Now the radio and text are aligned perfectly!
How can I add a CSS style to this Radio button's IMG, based on the checked="checked" characteristic?
<div id="edit-attributes-24-42-wrapper" class="form-item">
<label for="edit-attributes-24-42" class="option">
<input type="radio" class="form-radio" checked="checked" value="42" name="attributes[24]" id="edit-attributes-24-42">
<img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
<div class="radio_image_text">
Radio Button text, hidden by display:none in CSS
</div>
</label>
</div>
Ideally, I'd like to add a style class "selected" to the <img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png"> portion of the code.
You can't add a class with CSS only, but you could target the element you want with:
input[checked=checked] + img{
/* style here */
}
giving it the same style as your selected class.
jsFiddle example
Checked attribute itself qualifies for selection of radio.
input.form-radio:checked + img {
border:5px solid;
}
Fiddle
Sample Html
<div id="edit-attributes-24-42-wrapper" class="form-item">
<label for="edit-attributes-24-42" class="option">
<input type="radio" class="form-radio" value="42" name="attributes[24]" id="edit-attributes-24-42">
<img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
<div class="radio_image_text">Radio Button text, hidden by display:none in CSS</div>
<input type="radio" class="form-radio" value="42" name="attributes[24]" id="edit-attributes-24-42">
<img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
<div class="radio_image_text">Radio Button2 text, hidden by display:none in CSS</div>
</label>
</div>
Normally, each browser render the radio with its own shape.
you can use this for help styling radio buttons at the top of the below link:
http://metroui.org.ua/forms.php