How it looks:
enter image description here
I wanted labels with dynamic size so for example 'Very strongly uncomfortable' changes
Very
Strongly
uncofortable
[input]
Im really not experienced when it comes to css
<div class="w-50 d-flex justify-content-between answer-box">
<div *ngFor="let label of labels; index as id" class="text-center question-label">
<span class="mr-2">{{label}}</span>
<div class="radio">
<label style="font-size: 2.5em">
<input type="radio" [value]="id+1" formControlName="value">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
</label>
</div>
</div>
</div>
When i somehow managed to split text, then checkboxes are on different height when there is no label.
Try something like this:
html:
<table class="cBox">
<tr>
<td width="10px" >Very Strongly uncofortable</td>
<td width="20px">Uncertain </td>
<td width="20px">No Answer </td>
</tr>
<tr>
<td><input type="checkbox"/> </td>
<td><input type="checkbox" /> </td>
<td><input type="checkbox"/> </td>
</tr>
</table>
CSS:
.cBox {
text-align: center;
padding: 5px;
}
Related
I know almost nothing about CSS.
This is my table:
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Name</div>
<input name="user[name]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}" type="text" class="cell ">
</label>
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Email</div>
<input id="email_field_403" name="user[email]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}" required="" type="email" class="cell acym__user__edit__email ">
</label>
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit" onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
The button isn't aligned with the input fields:
I have tried like a million things, like:
vertical-align: bottom
As per documentation here.
And position: absolute margin 0;
Etc. etc.
It doesn't matter: the button is always on the middle.
Can anyone help?
Thanks!
In the code submitted, HTML table is not used properly.
If you want to create the form using a table, the labels for inputs should be declared as column headers, in the thead section of the table, not in tbody. This way, your table row will contain only the inputs and the submit button and they will have the same height by default.
th {
text-align:left;
}
<table>
<thead>
<th class="acym__users__creation__fields__title">Name</th>
<th class="acym__users__creation__fields__title">Email</th>
</thead>
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<input name="user[name]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}"
type="text" class="cell ">
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<input id="email_field_403" name="user[email]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}"
required="" type="email" class="cell acym__user__edit__email ">
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit"
onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
</table>
Instead use
position: absolute;
bottom: 0px;
and also add bottom:0px;
Have you tried the margin-top attribute? It essentially puts a space on top of your subscribe button.
Basically in the css block of your button, add
margin-top: 10px;
Note that this value is fixed so it's probably not the best solution but it's a quick and easy one. Also play around with the value until its the right spot.
I'm having problems getting a table to display uniformly across browsers using Twitter Bootstrap 3.
Here's the HTML:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<table class="table table-striped table-responsive first-table">
<thead>
<tr>
<th>Ingredient</th>
<th>Amount <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Amount" data-content="This is the amount of the ingredient you want to appear on the label." aria-hidden="true"></span></th>
<th>% Carrier <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Carrier" data-content="The amount of carrier (or salt) that's used with the ingredient. This information should come from the quality assurance docs from the supplier." aria-hidden="true"></span></th>
<th>$$/Kilo <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Price" data-content="The price of the ingredient. You should get this from your supplier." aria-hidden="true"></span></th>
<th>Who Sources? <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="Source" data-content="Choose whether or not you or the manufacturer will source the ingredient." aria-hidden="true"></span></th>
<th>Pack Size <span class="glyphicon glyphicon-question-sign" data-toggle="popover" title="packSize" data-content="The minimum packsize of the ingredient supplied by the provider. You only have to fill this out if you're sourcing the ingredient yourself." aria-hidden="true"></span></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="formulaRow">
<td>
<input type="text" class="ingredient required" name="ingredient">
</td>
<div class="col-md-1">
<td>
<div class="input-group">
<input type="number" class="amount required small-input" name="amount" >
<div class="input-group-addon">mg</div>
</div>
</td>
</div>
<td>
<div class = "input-group">
<input type="number" class="carrier required small-input" name="carrier" max="100">
<div class="input-group-addon">%</div>
</div>
<p class="message">Only use numbers smaller than 100</p>
</td>
<td>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="number" class="price required small-input" name="price" size="6">
<div class="input-group-addon">.00</div>
</div>
</td>
<td>
<select class="tableDropDown" style="min-width: 100px;">
<option value=true>The Manufacturer</option>
<option value=false>Me</option>
</select>
</td>
<td>
<div class="input-group">
<input class="packSize small-input" type="number" size="8" disabled>
<div class="input-group-addon">kg</div>
</div>
</td>
<td>
<a><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a>
</td>
<td>
<a><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can also see it here: www.healthkismet.com/formula-analyzer/
It's the table that displays under the heading: "Per Serving"
What I want: For it to be evenly centered in the screen and so you don't have to scroll to the right to finish filling in the input fields.
My condundrum: It works fine in Mozilla. It also works fine in Chrome when I view it offline from the files on my computer.
But it bleeds to the right in Chrome and IE when I view it online.
I'm not sure why has the desired effect in Mozilla but not the other two.
The ultimate goal is to have it center-align if at all possible (or close to it).
Also, here are two screenshots to demonstrate what I'm talking about.
On Chrome, the table does not offset on the right and instead gets pushed out of the window:
Whereas in Firefox it justifies properly:
You are wrapping a table-cell in a div. I think that breaks the table, and is handled differently by different browsers.
Try removing <div class="col-md-1"></div> from:
<tr class="formulaRow">
<td>
<input type="text" class="ingredient required" name="ingredient">
</td>
<div class="col-md-1">
<td>
<div class="input-group">
<input type="number" class="amount required small-input" name="amount" >
<div class="input-group-addon">mg</div>
</div>
</td>
</div>
<td>...
Have a contact form that I have some options to check for contact times and methods. I had it styled correctly on Chrome, Firefox and Safari. The labels where to the left of the radio option and they were all lined up.
I have since run into the issue where the chrome style has broken and I cannot figure out what is going on as the Firefox and Safari CSS work perfectly. The page is cbasphaltmaintenance.com
<table id="contactOptionTable">
<tr>
<td>
<h1>Prefered contact method:</h1>
</td>
<td>
<input type="radio" value="home" name="contact_Method" class="contactRadioClass"/>
<label for="home">Home</label>
</td>
<td>
<input type="radio" value="mobile" name="contact_Method" class="contactRadioClass" />
<label for="home">Mobile</label>
</td>
<td>
<input type="radio" value="email" name="contact_Method" class="contactRadioClass" />
<label for="home">Email</label>
</td>
</tr>
<tr>
<td>
<h1>Prefered contact time:</h1>
</td>
<td>
<input type="radio" value="morning" name="contact_Time" class="contactRadioClass"/>
<label for="home">Morning</label>
</td>
<td>
<input type="radio" value="afternoon" name="contact_Time" class="contactRadioClass" />
<label for="home">Afternoon</label>
</td>
<td>
<input type="radio" value="night" name="contact_Time" class="contactRadioClass" />
<label for="home">Evening</label>
</td>
</tr>
</table>
Here is the css that works in safari and firefox
#contactOptionTable{
vertical-align: middle;
float: left;
padding: 0;
margin-left: 14%;
}
.contactRadioClass{
margin-top:10px;
}
I don't know what is going on here but it is bugging me. I appreciate all of the help. As you may see I'm a little wet behind the ears.
Add the following class in your CSS.
#contactOptionTable input
{
float:right;
}
You need to reduce margin-left: 5% and add width : 100% to #contactOptionTable.
However I suggest you not to use table structure here, it would be better if you create it using div's
I want to have three check boxes and their label in a single line as I have shown below.
I tried having check boxes inside table cells but the label is coming above the check box.I am a beginner in HTML.
So please provide me with a possible solution.
Thanks in advance!!!
USA[]----------------------------------ENGLAND[]----------------------------------AUSTRALIA[]
Here, by [] - I mean a check box.These three columns should uniformly occupy the html form's width.
Here i have used ---------------------------- to show that I want this much space between a check box of the first and label of the second.
you can use either table or div,span
for table
<table>
<tr>
<td>
<label>Hindi</label>
<input type="checkbox"/>
</td>
<td>
<label>English</label>
<input type="checkbox"/>
</td>
<td>
<label>French</label>
<input type="checkbox"/>
</td>
</tr>
</table>
But by using div,span you have to wright down some Style.
if you are using framework Bootstrap you can see more with less css here
Here is Fiddle
... or you can use a 1 x 1 table and keep it simple! You will be able to apply limited styling to each element using this approach.
<table>
<tr>
<td>USA</td>
<td><input type="checkbox" name="country1"></td>
<td>India</td>
<td><input type="checkbox" name="country2"></td>
<td>Greece</td>
<td><input type="checkbox" name="country3"></td>
</tr>
</table>
You can have all this elements in single div with its display:inline. With 3 child divs having uniform widths.
<div style="display:inline" style=" width:100%">
<div style=" width:33%; float:left">USA<input type="checkbox"></div>
<div style=" width:33%;float:left">ENGLAND<input type="checkbox"></div>
<div style=" width:33%;float:left">Australia<input type="checkbox"></div>
</div>
If you post the code for the table that you did, we can help you better, but you can do it like this:
<table style="width: 100%;">
<tr>
<td><div style="white-space: normal;">USA<input type="checkbox" /></div></td>
<td><div style="white-space: normal;">ENGLAND<input type="checkbox" /></div></td>
<td><div style="white-space: normal;">AUSTRALIA<input type="checkbox" /></div></td>
</tr>
</table>
You can also do like this
<div style="float:left;width:100px;">
<label>Hindi</label>
<input type="checkbox"/>
</div>
<div style="float:left;width:100px;" >
<label>English</label>
<input type="checkbox"/>
</div>
<div style="float:left;width:100px;">
<label>French</label>
<input type="checkbox"/>
</div>
Demo http://jsfiddle.net/7kzh9/1/
HTML
<form>
<div class="chk">
<label><input type="checkbox" /> USA</label>
</div>
<div class="chk">
<label><input type="checkbox" /> ENGLAND</label>
</div>
<div class="chk">
<label><input type="checkbox" /> AUSTRALIA</label>
</div>
<form>
CSS
.chk
{
float:left;
display:inline-block;
width:100px;
}
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
Fiddle
Output:
I have one row consisting of two tds. TD1 contains two texts(txt1 and txt2). txt2 in TD1 must be in line with TD2. Here's my code :
<tr>
<td width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td>
<pre></pre>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
The problem is TBN: and the input box in the other td must be in line and in mozilla its working perfectly. But in IE, the input box is going up the text TBN: and getting aligned with TB From: text. What can i do to fix this one ? Kindly help .
In case the <input> has to be at the bottom each time you can add a class to the td tag and add some CSS to it:
td.your-class
{
vertical-align:bottom;
}
Tables are supposed to have tabular data. It's not recommended to use them for lay-out.
You could use divtags instead.
<div>TB From:</div>
<div><label>TBN:</label><input type="text" vlaue="" /></div>
The divtags you can style however you like.
<tr>
<td colspan="2" width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td colspan="2">
<pre></pre>
<br/>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
http://jsfiddle.net/dolours/zvMKH/335/