I'm developing a Grails app and I'm having a problem with the CSS rules applied to a view. Consider this GSP code:
<div id="radio" style="height: 30px">
<div class="fieldcontain">
<label style="float: left; width: 25%; overflow: hidden">
<g:message code="recepcionDeComplejoInstance.tipoDeMineral.label" default="Tipo De Mineral" />
</label>
</div>
<div class="ui-button" style="float: left; width: 75%; overflow: hidden; text-align: start">
<input type="radio" id="radioComplejo" value="complejo" name="radio" checked="checked"><label for="radioComplejo">COMPLEJO</label>
<input type="radio" id="radioPlomoPlata" value="plomoPlata" name="radio"><label for="radioPlomoPlata">PB-AG</label>
<input type="radio" id="radioZincPlata" value="zincPlata" name="radio"><label for="radioZincPlata">ZN-AG</label>
<input type="radio" id="radioCobrePlata" value="cobrePlata" name="radio"><label for="radioCobrePlata">CU-AG</label>
</div>
</div>
<div id="radio2" style="height: 30px">
<div class="fieldcontain">
<label style="float: left; width: 25%; overflow: hidden">
<g:message code="recepcionDeComplejoInstance.naturalezaMineral.label" default="Naturaleza Mineral" />
</label>
</div>
<div class="ui-button" style="float: left; width: 50%; overflow: hidden; text-align: start">
<input type="radio" id="radioSulfuro" value="sulfuro" name="radio2" checked="checked"><label for="radioSulfuro">SULFURO</label>
<input type="radio" id="radioOxido" value="oxido" name="radio2"><label for="radioOxido">OXIDO</label>
</div>
</div>
This is the result:
There are two CSS classes used in the view:
fieldcontain, that is the default CSS provided by Grails.
ui-button,declared in the JQuery UI Lightness file
(jquery-ui-1.10.3.custom.css)
As you can see the Naturaleza Mineral radio buttons don't have the appearance of the Tipo De Mineral radio button considering that the same CSS rules are being applied to both radio button groups.
Why is this happening?
It is because you have enable jquery-ui radio button style from javascript by calling buttonset():
$( "#radio, #radio2" ).buttonset();
Follow this plunker example.
Related
Bootstrap 4.
<div class="form-group">
<label asp-for="Enabled" class="control-label"></label>
<input asp-for="Enabled" class="form-control" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
I have a form (see image). I would like the check box to be underneath the word "Enabled" not centred like the other full width controls.
If I set "width: auto;" on the checkbox, this does the job, but then displays a small checkbox (I want a large one). See image.
<div class="form-group">
<label asp-for="Enabled" class="control-label"></label>
<input asp-for="Enabled" class="form-control" style="width: auto;" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
My question is, how can I get a large left aligned checkbox on my form?
I am also searched before for the same issue, but not satisfied with the above answer that's why I have done my research and I found a good solution. Just add class "col-sm-1"
in the input tag, you are done.
<div class="col-8">
<input asp-for="IsUrgent" type="checkbox" class="form-control col-sm-1" />
<span asp-validation-for="IsUrgent" class="text-danger" />
</div>
you can also use like this if you are not satisfying with class name
input[type="checkbox"]{
width: 30px; /*Desired width*/
height: 30px; /*Desired height*/
cursor: pointer;
-webkit-appearance: none; /* if you want check inside box then remove this line*/
appearance: none; /* if you want check inside box then remove this line*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label asp-for="Enabled" class="control-label">Enabled</label>
<input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
</form>
Its not tidy by setting an height and width for the checkbox should do the trick.
.checkbox-large {
width: 25px !important;
height: 25px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label asp-for="Enabled" class="control-label">Enabled</label>
<input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
</form>
I have tried everything but I can't place checkbox right to the label. I could move the checkbox to the right of label, if it is general type of checkbox. But I could not do the same with custom-checkbox type.
<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">Label</label>
</div>
The custom checkbox is created with pseudo elements so their positioning needs to be adjusted relative to the label.
.custom-control.custom-checkbox{padding-left: 0;}
label.custom-control-label {
position: relative;
padding-right: 1.5rem;
}
label.custom-control-label::before, label.custom-control-label::after{
right: 0;
left: auto;
}
<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 mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Label</label>
</div>
The earlier #serg-chernata answer doesn't seem to work for me with custom-switch. Here's an example i got working.
CSS
div.custom-control-right {
padding-right: 24px;
padding-left: 0;
margin-left: 0;
margin-right: 0;
}
div.custom-control-right .custom-control-label::after{
right: -1.5rem;
left: auto;
}
div.custom-control-right .custom-control-label::before {
right: -2.35rem;
left: auto;
}
HTML
<div class="custom-control custom-control-right custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Right switch element</label>
</div>
JsFiddle
https://jsfiddle.net/2cmbq9r0/
Screenshot
Edit: changed left:initial to left:auto to make it work with IE11.
If you are okay with...
Greater distance between the label and checkbox
Using the basic form-check class instead of custom-control
then one alternative is using a col-right class to move the checkbox to the far side of your form. In some cases, I have found that aligning labels and input elements on the far-left and far-right, respectively, provides a nice consistent look
<div class="row form-row">
<div class="col">
<label class="form-check-label" for="customCheck">Label</label>
</div>
<div class="col-right">
<input type="checkbox" class="form-check-input" id="customCheck" name="example1">
</div>
</div>
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
I've got this piece of code:
<h2>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
</div>
Which produces this:
But I want to add a button in the place of this red box:
(What do I need to do?)
Edit: It should not be the submit button
try this code and style color it as you want.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
ref : https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
i guess you can work with cols, sth like:
<div class="form-group">
<div class="col-md-12">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" id="workout-keywords">
</div>
<div class="col-md 4">
<span class="btn btn-default">Button</span>
</div>
</div>
You can use position absolute to position the button above the input and then use padding right for the input to prevent the text to get hidden by the absolute positioned button. Try something like this:
<h1>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
<button type="submit">Submit</button>
</div>
.form-group {
position: relative;
padding: 0;
input {
padding-right: 60px;
height: 25px;
line-height: 25px;
width: 100%;
}
button {
position: absolute;
right: 0;
top: 0;
width: 60px;
line-height: 25px;
text-align: center;
z-index: 300;
}
}
I think you can achieve what you want to with display flex, input-group and a trick on input-group-addon class/element. Take a look.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline" style="width:300px;margin:10px;">
<div class="form-group">
<label class="sr-only" for="test">input here something</label>
<div class="input-group" style="display:flex;">
<input type="text" class="form-control" id="test" placeholder="input here something">
<button type="button" class="input-group-addon btn btn-primary" style="width:50px;">go</button>
</div>
</div>
</form>
Hope this helps.
I am creating a questionnaire (I have little coding expertise) and am completely stuck with the styline in IE.
Firefox and Chrome both work perfectly but Internet Explorer won't center the content, the input fields are also overlapping the text areas.
I know the is a place for questions and not so much coding help but I thought someone might be able to notice something obvously wrong and save me a massive headache!
<body>
<style type="text/css">
#wrap {
width:800px;
margin:0 auto;
background-color:white;
height:auto;
margin-top:-16px;
}
#left_col {
float:left;
width:400px;
}
#right_col {
float:right;
width:400px;
}
body {
background-image:url(questionnaire-background.png);
font-family: calibri, verdana;}
</style>
<div id="wrap">
<center>
<br>
<h1>HR Newsletter Questionnaire</h1>
<div>
<p style="margin-top:20px">What is your name?</p><br>
<p><input type="text" name="name" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p>Is the HR Newsletter something you would like to receive?<p><br>
<p><input type="text" name="like_to_receive" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p>Comments:</p><br>
<p><input type="textarea" name="comments" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></textarea></p>
</div>
<div>
<p>What do you like from the current HR Newsletters?</p><br>
<p><input type="text" name="what_do_you_like" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p>What do you do like or would like to be seen removed from the HR Newsletter?</p><br>
<p><input type="text" name="not_like" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p>What would you like to be seen added to the HR Newsletter?</p><br>
<p><input type="text" name="added" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p style="margin-bottom:-22px">How often would you like to see the HR Newsletter?</p><br>
<p>
<input type="radio" name="how_often" value="weekly">Weekly
<input type="radio" name="how_often" value="fortnightly">Fortnightly
<input type="radio" name="how_often" value="monthly">Monthly
<input type="radio" name="how_often" value="quartely">Quarterly
<input type="radio" name="how_often" value="yearly">Yearly<br></p>
</div>
<div>
<p style="margin-top: 40px; margin-bottom:-22px">Would you prefer the HR Newsletter to see more of less of the following:</p><br>
<p>
<input type="radio" name="would_you_prefer" value="more_pictures">More pictures with less text
<input type="radio" name="would_you_prefer" value="more_text">More text with less pictures
<input type="radio" name="would_you_prefer" value="both">A balanced mixture of both<br></p>
</div>
<div>
<p style="margin-top: 40px; margin-bottom:-22px">How long would you like the HR Newsletter to be?</p><br>
<p>
<input type="radio" name="how_long" value="9">Less than 9 pages
<input type="radio" name="how_long" value="10_15">10 – 15 Pages
<input type="radio" name="how_long" value="15">15 + Pages<br></p>
</div>
<br><br><br><br>
<div>
<p><input type="submit" value="Send" style="margin-bottom: 43px; margin-top:-46px; width: 50%">
<input type="reset" value="Clear" style="margin-bottom: 43px; margin-top:-46px; width: 50%"><br></p>
</div>
</center>
</div>
<body>
The easiest solution (and this is not really the best way to go about this, for the record) would be to add the following line in your CSS:
body { text-align:center; margin:0px auto; }
I checked this in IE 9.0.8.