I'm using SurveyProject for my poll and have the question with 2 answers with this html structure:
1 answer:
<tr class="answerStyle">
<td class="cellValign">
<span id="SurveyControl_Question18__as50577__ai72_as50577"><div>
<div id="grbD">
<input name="SurveyControl$Question18_as50577:_grp18" class="globalRadioButton" id="SurveyControl_Question18__as50577__ai72_as50577_ctl00" type="radio" value="SurveyControl$Question18$_as50577$_ai72_as50577$ctl00">
<label class="globalRadioButtonLabel" runat="server" associatedcontrolid="SurveyControl_Question18__as50577__ai72_as50577_ctl00">NO</label>
</div>
</div>
</span>
</td>
</tr>
2 answer:
<tr class="answerStyle">
<td class="cellValign">
<span id="SurveyControl_Question18__as50577__ai71_as50577">
<div>
<div id="grbD">
<input name="SurveyControl$Question18_as50577:_grp18" class="globalRadioButton" id="SurveyControl_Question18__as50577__ai71_as50577_ctl00" type="radio" value="SurveyControl$Question18$_as50577$_ai71_as50577$ctl00">
<label class="globalRadioButtonLabel" runat="server" associatedcontrolid="SurveyControl_Question18__as50577__ai71_as50577_ctl00">yes<br>comment:</label>
</div>
</div>
</span>
</td>
</tr>
As I can't change html, I want to apply style with css for second answer's input with id #SurveyControl_Question18__as50577__ai71_as50577_ctl00, but everything that I tried doesn't work...
I tried:
input[name="SurveyControl$Question18_as50577:_grp18"] {
float: left;
margin-top: 20px;
}
#SurveyControl_Question18__as50577__ai71_as50577_ctl00 {
float: left;
margin-top: 20px;
}
#SurveyControl_Question18__as50577__ai71_as50577 input {
float: left;
margin-top: 20px;
}
And some others, but the only thing which works is:
#grbD input {
float: left;
margin-top: 20px;
}
But this also affects the first answer's input as it uses the same div's id.
Any ideas?
You can try using these selectors.
.answerStyle:nth-child(2) #grbD input {
float: left;
margin-top: 20px;
}
Or
.answerStyle:not(:first-child) #grbD input {
float: left;
margin-top: 20px;
}
Related
This my first question, so I hope that I ask it correctly.
Matthew Cain has created a great example of a fancy radio button using html and css which can be seen at https://www.templatemonster.com/blog/style-checkboxes-radio-buttons-css/. In it he uses this code:
body {
margin: 0;
padding: 0;
font-family: 'PT Sans', sans-serif;
font-size: 1.3em;
font-weight: bold;
color: #fff;
}
#first {
background-color: #4B4D65;
}
#second {
background-color: #FF8A66;
}
.section {
padding: 100px;
padding-left: 150px;
}
.section input[type="radio"],
.section input[type="checkbox"]{
display: none;
}
.container {
margin-bottom: 10px;
}
.container label {
position: relative;
}
/* Base styles for spans */
.container span::before,
.container span::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/* Radio buttons */
.container span.radio:hover {
cursor: pointer;
}
.container span.radio::before {
left: -52px;
width: 45px;
height: 25px;
background-color: #A8AAC1;
border-radius: 50px;
}
.container span.radio::after {
left: -49px;
width: 17px;
height: 17px;
border-radius: 10px;
background-color: #6C788A;
transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
left: -27px;
background-color: #EBFF43;
}
<section id="first" class="section">
<div class="container">
<input type="radio" name="group1" id="radio-1">
<label for="radio-1"><span class="radio">Coffee</span></label>
</div>
<div class="container">
<input type="radio" name="group1" id="radio-2">
<label for="radio-2"><span class="radio">Tea</span></label>
</div>
<div class="container">
<input type="radio" name="group1" id="radio-3">
<label for="radio-3"><span class="radio">Cappuccino</span></label>
</div>
</section>
When I debug it in Chrome I see
<span class="radio"> == $0
::before
"Coffee"
::after
</span"
Here is my HTML:
<body class="my_PageBg" data-usepopupcontrols="no">
<div class="my_DesktopContainer my_temp_unselect" style="display: none;">
<div tabindex="1" class="container"
id="radio1" style="transform-origin: center 50%; left: 20px; top: 40px; width: 660px; height: 100px;
overflow: auto; position: absolute; z-index: 1; direction: ltr; transform: inherit; transform-style: preserve-3d;"
contenteditable="false">
<tbody>
<tr>
<td style="padding: 0px; white-space: nowrap;">
<label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)" for="radio10" name="radio1">
<input name="radio1" tabindex="1" id="radio10" onclick='OnResetDownChainControls("radio1",event)' type="radio" checked="" value="Value1"/>
Val1
</label>
</td>
</tr>
<tr>
<td style="padding: 0px; white-space: nowrap;">
<label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)" for="radio11" name="radio1">
<input name="radio1" tabindex="1" id="radio11" onclick='OnResetDownChainControls("radio1",event)' type="radio" value="Value2"/>
Val2
</label>
</td>
</tr>
<tr>
<td style="padding: 0px; white-space: nowrap;"><label style="cursor: default;" onkeydown="onTreeLabelKeyDown(event)" for="radio12" name="radio1">
<input name="radio1" tabindex="1" id="radio12" onclick='OnResetDownChainControls("radio1",event)' type="radio" value="Value3"/>
Val3
</label>
</td>
</tr>
</tbody>
I am trying to do the same to the Text "Val1", "Val2", "etc.
Please note that I can not change the html since it is coming from an external call.
What css selector can I use?
::after and ::before pseudo-elements do not apply to replaced-elements or void-elements.
But you can use a <span> to achieve the desired effect. Example:
.my-special-class:before {
content: '[before] ';
}
.my-special-class:after {
content: ' [after]';
}
.my-special-class:before,
.my-special-class:after {
color: red;
}
<span class="my-special-class">Val 1</span>
Obviously, you can name the class to whatever you want and change the selectors accordingly.
Note: if you want to use pseudo-elements as graphics (to give them size, position, background-image, border, background, etc – without actual content) you must still specify content: '' (empty string). Without setting content, the pseudo-element will not render, regardless of display, visibility or opacity.
Most CSS attributes that can be applied to a normal DOM element can be applied to pseudo-elements.
<label>s can have pseudo's, but that would mean the :before gets placed before the <input>, which is included in the <label>. If you want to place the :before after the <input> (which cannot have pseudo's), you have to wrap the text node in a <span>, as in the example.
Also note that, even though the spec defines pseudo elements officially with double colon notation (::pseudo-element), all browsers supporting double colon notation also support the legacy single colon notation, while a few legacy versions (IE pre v9, FF pre v1.5, Opera pre v7) only support the single colon notation. For this reason, most people use the single colon notation (which is, officially, wrong, but technically right, at least for now).
I have rows consisting of two elements that I'd like to align by the second element (they're input boxes, and it's nice to have them all line up vertically). The solution I behaves exactly how I want when the elements fit onto one line, I don't want to be using the width of the first element to set the horizontal position. This starts to act weird in small windows or on mobile (when the width of the label is more than 45% of the screen it starts wrapping again).
What would be the proper way to achieve the same result?
FIDDLE
HTML:
<label>Test</label>
<input type="number" value="0">
<br />
<label>Test longer</label>
<input type="number" value="0">
<br />
<label>Test longest text</label>
<input type="number" value="0">
<br />
CSS:
label {
display: inline-block;
float: left;
width: 45%;
text-align: right;
padding: 2px;
margin: 2px;
}
input {
display: inline-block;
float: left;
width: 200px;
padding: 2px;
margin: 2px;
}
You can use flex properties to display rows and columns and remove float
<div class="flex">
<label>Test</label>
<input type="number" value="0">
</div>
<div class="flex">
<label>Test longer</label>
<input type="number" value="0">
</div>
<div class="flex">
<label>Test longest text</label>
<input type="number" value="0">
</div>
in css
.flex {
display:flex;
}
label {
width: 45%;
text-align: right;
padding: 2px;
margin: 2px;
}
input {
width: 200px;
padding: 2px;
margin: 2px;
}
#media(max-width:200px){
.flex{
display:block;
}
}
and use media queries for screen below 200px(or your preference) to make the text and input appear vertically
I have following two Buttons at the end of my view:
<table>
<tr>
<td>
<div class="Left"><input type="submit" value="Test" class="button"/></div>
</td>
<td>
#if (Model.Test != null)
{
#Html.Partial("_BackButton", Model.Test)
}
</td>
</tr>
</table>
_BackButton Partial View:
#model Test.Model.Shared.Test[]
#if (this.Model != null && this.Model.Length > 1)
{
<div class="Right">
#this.Model[this.Model.Length - 2].BackButtonLabel
</div>
}
And her the two classes in the css file:
div.Left {
padding-right: 20px;
float: left;
display: inline-block;
}
div.Right {
float: right;
display: inline-block;
}
But unfortunately the two buttons are not on the same level:
Do I have a problem with the partial view here or is it the float attribute?
How can I work around this problem, so the buttons appear in the same line?
If the button class does not contain inline-block or similar, the vertical margins defined in it will not work for inline elements like <a>. So the margins get applied only to the <input>.
Simplified example:
table,
td {
border: 1px solid;
vertical-align: top;
}
.button {
border: none;
color: #FFF;
background: #66F;
margin: 15px 10px;
}
<table>
<tr>
<td>
<input class="button" type="button" value="input">
</td>
<td>
<a class="button" href="button">a</a>
</td>
</tr>
</table>
So the solution is to remove the margin from the styles, or put display:inline-block in.
I am making a title bar for a table. It has to be contained inside a table row just because the rest of the page has been designed for a table (which I cannot change at this stage).
What I want to do is create a block inside the table row that contains some text, a few buttons (as images) and some input boxes and a dropdown selection option.
I've been playing round with divs and floating them which works well enough but the inputs and image buttons are not aligning nicely so I played with using spans instead which works kinda nicer but still not aligning as I need it to. It all needs to fit inside the blue bar and the small white gap between the the blue bar and the grey strip shouldn't be there...
Heres what it looks like at the moment...
Here is my code with the block using divs and its essentially the same with spans
<td colspan='8'> <-- this is the start of the table cell that i have to work inside
<div style="width: 100%; ">
<div class="tableHeadRow" style="float: left; background-color: #002b59; padding: 5px 5px 0px 5px; width: 678px;">
<form method='post' name='tranLookup'>
<input type='hidden' name='dates' value='range' />
<input type='hidden' name='op' value='viewTransactions' />
<span style="margin-right: 10px; color: #ffffff; ">Transaction History</span>
<div class="printerButtonWrapper flow" style="margin-right: 10px; display: inline-block;">
<a id="printButton" href="#toPrint">
<img src="images/accounts.png" alt="Printer View" class="clip printerButton" />
</a>
</div>
<div style="margin-right: 10px; display: inline-block;">
<input placeholder="From date: " type='text' id='fromDate' name='fromDate' class="textbox calText" style='width: 80px;' value="startDate">
<span style="color: #ffffff"> - </span>
<input placeholder="To date: " type='text' id='toDate' name='toDate' class="textbox calText" style='width: 80px;' value="endDate">
</div>
<div style="margin-right: 10px; display: inline-block; ">
<span style="color: #ffffff;">Transactions per page:</span>
<select name='qty' id="transactionQuantity">
<option value='10'>10</option>
<option value='25' selected="selected">25</option>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='200'>200</option>
</select>
</div>
<div class="goWrapper flow" style="cursor: pointer; display: inline-block; ">
<a onclick='document.tranLookup.submit();'><img src='images/accounts.png' alt='Go' class='clip go' /></a>
</div>
</form>
</div>
<div class="blueCornerWrapper flow" style="float: right; display: inline-block; ">
<img src='images/common.png' alt='' class='clip blueCorner' />
</div>
<div style="clear: both;" ></div>
</div></td> <-- heres the end of the table cell
Frustratingly I had this all sorted once but I didn't commit code and I lost it all so now I am trying to get it back to its nice aligned state unfortunately it was a couple months ago now and I cant remember what I did...
Does anyone have some awesome mad skills to help me line these up nicely?
Let's get started by cleaning up your code.
Let's have a fiddle! http://jsfiddle.net/a3985/
Have a play with this. I gave the td a transactionSelection ID. There is no need for a div, the form will do. I have removed the img tags leaving just the links. You should have the images placed in your css like this for example:
#transactionSelection #goSubmit { background: url(image.jpg) no-repeat; }
HTML
<td colspan='8' id="transactionSelection">
<form method='post' name='tranLookup'>
<legend>Transaction History</legend>
<input type='hidden' name='dates' value='range' />
<input type='hidden' name='op' value='viewTransactions' />
<input placeholder="From date: " type='text' id='fromDate' name='fromDate' class="textbox calText" style='width: 80px;' value="startDate">
<input placeholder="To date: " type='text' id='toDate' name='toDate' class="textbox calText" style='width: 80px;' value="endDate">
<label for="transactionQuantity">Transactions per page:</label>
<select name='qty' id="transactionQuantity">
<option value='10'>10</option>
<option value='25' selected="selected">25</option>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='200'>200</option>
</select>
<button onclick='document.tranLookup.submit();' id="goSubmit">Submit</button>
</form>
CSS - Place this in an external sheet if possible or in your head. Because you are dealing with legacy code I would recommend all css being restricted to #transactionSelection which is the id of the td.
#transactionSelection legend, #transactionSelection label, #transactionSelection select { margin: 2px 0 0; float: left; }
#transactionSelection input { float: left; margin: 2px 10px; }
#transactionSelection label { margin-right: 10px; }
#transactionSelection #printButton { display: block; float: left; height: 20px; width: 50px; padding: 2px; margin: 0 20px; background: #F00; }
#transactionSelection #goSubmit { display: block; float: left; height: 20px; width: 50px; padding: 2px; margin: 3px 20px; background: #F00; border: none; float: left; }
This is a good starting point if you would really like to clean this up.
Sam
Before I reveal a solution, I just want to say that it would make things way easier for you(and everyone else) if you wrote your css on a separate sheet. Also, it's best not to use tables anymore, but you probably already knew that ;)
What I did was I used display:inline-block; for the child elements, so that they are treated as text, and I used text-align:center; for the parent div. And to fix your alignment issues, I used vertical-align:middle;. I then gave the div with the blue background a greater height and now it looks good.
See for yourself.<----THIS IS THE FIDDLE
.tableHeadRow{
text-align:center;
height:30px;
}
span,.printerButtonWrapper,#printButton,.clip printButton,input .textbox calText,select #transactionQuantity,img {
display:inline-block;
vertical-align:middle;
}
I am trying to align label : control, label: control in 2 rows.
But text in my 2nd row moves to little bit right as below image. How can I align label and control in same line for second row also? These are generic forms so I dont want to add any height added to class. Any help would be highly appreciated.
Here is my Code
<div class="editor-label"><label for="DocumentSignature">This is a test label with big text below and below</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Document Signature Services Request URL field is required." id="DocumentSignature" name="DocumentSignature" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="DocumentSignature" data-valmsg-replace="true"></span></div>
<div class="editor-label"><label for="DealSummary">This is next div text which moved to right</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Deal Summary Template URL field is required." id="DealSummary" name="DealSummary" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="DealSummary" data-valmsg-replace="true"></span></div>
.editor-label {
max-width: 150px;
font-weight: 200;
font-size: 14pt;
letter-spacing: 0.01em;
line-height: 22pt;
float: left;
display: block;
}
.editor-field {
padding-bottom: 10px;
line-height: 22pt;
font-size: 10pt;
clear: right;
}
.label {
width: 180px;
display: block;
text-align: right;
margin-right: 15px;
}
Please see here for JsFiddle Demo
You have to wrap single row with one parent div and then clear all float at that div.
HTML:
<div class='single_row'>
<div class="editor-label"><label for="DocumentSignature">This is a test label with big text below and below</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Document Signature Services Request URL field is required." id="DocumentSignature" name="DocumentSignature" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DocumentSignature" data-valmsg-replace="true"></span></div>
</div>
<div class='single_row'>
<div class="editor-label"><label for="DealSummary">This is next div text which moved to right</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Deal Summary Template URL field is required." id="DealSummary" name="DealSummary" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="DealSummary" data-valmsg-replace="true"></span></div>
</div>
CSS:
.editor-label {
max-width: 150px;
font-weight: 200;
font-size: 14pt;
letter-spacing: 0.01em;
line-height: 22pt;
float: left;
display: block;
}
.single_row{ clear:both;}
.editor-field {
padding-bottom: 10px;
line-height: 22pt;
font-size: 10pt;
clear: right;
}
.label {
width: 180px;
display: block;
text-align: right;
margin-right: 15px;
}
Add a container that will contain both .editor-field and .editor-label. Without this, it will be very difficult if not impossible to make then work together.
<div class="editor-element">
<div class="editor-label">...</div>
<div class="editor-field">...</div>
</div>
Make this container "contain" the floated elements, so either add overflow: hidden, some kind of float or clearfix to it:
.editor-element {
overflow: hidden;
}
jsFiddle Demo