So in a project I am working on, I have the following code:
foreach (string answer in Model.Answers)
{
<div class="col-sm-2 DANNYSNEWCLASS">
<label class="PreviousAnswerLbl">
#if (answer == Model.PreviousAnswer)
{
<input type="radio" name="answer" value="#answer" checked="checked" /><span>#answer</span>
}
else
{
<input type="radio" name="answer" value="#answer" /><span>#answer</span>
}
</label>
</div>
}
and the number of elements here can change anywhere from 2 to 5, so how do I do some CSS/bootstrap trickery to make it so that the radio buttons are all centred, when currently they all seem to float to the left. All this is already inside a <div class="container"> and <div class="row" and all of that bootstrap stuff.
I want it so that, for example, if there are 5 labels, then the middle of the 3rd label is in the middle of this whole div with 2 labels on either side etc, as well as when there are only 2 labels, there is one on the left side of the screen, and one on the right, preferably without too big of a gap. Hopefully that makes sense, let me know if there is any more clarification needed. Thanks in advance
Its just a little bit of calculations required to decide on how many col-sm-* space to allot to each div. So here is a little trick. First get the number to decide on the each col width
#{
var colWidth = 12 / #Model.Answers.Count();
}
since bootstrap has 12 columned layout.
Then in your for loop you can do this..
foreach (string answer in Model.Answers)
{
<div class="col-sm-"+ #colWidth +" DANNYSNEWCLASS">
....
....
</div>
}
Note: if your count is 5 then the colWidth will be 2. that means total of only 10 columns will be occupied. So that might leave out some space on to the right. For this we can use col-sm-offset-1 which will give a offset of 1 column on left and now we will have 1 column on right. so all the divs will be centered.
So add this to your First Div
<div class="col-sm-"+ #colWidth +" DANNYSNEWCLASS "+ #Model.Answers.Count() == 5 ? "col-sm-offset-1":"" +"">
Just don't use the Bootstrap grid classes. Labels and inputs are inline elements, so you can center them like any bit of text. Just apply a wrapper div around all the labels and apply the text-center Bootstrap class.
<div class="text-center">
foreach (string answer in Model.Answers)
{
<label class="PreviousAnswerLbl">
#if (answer == Model.PreviousAnswer)
{
<input type="radio" name="answer" value="#answer" checked="checked" /><span>#answer</span>
}
else
{
<input type="radio" name="answer" value="#answer" /><span>#answer</span>
}
</label>
}
</div>
Related
The best way to explain what I'm trying to do is with this image:
Desired Output
<\b>
What I'm currently getting is this:
current output
It almost works to think of this as 7 rows of data with two columns. The problem is that in row 1 cell 2, the control needs to be the same size as 5 rows, but currently its height is only 1 row. Its height should span from Field x all the way down to Label E.
Here is an example code of one of the rows, so you can see I'm just using two different div classes, one called "row-two", and another for columns, which in this case is "col-1-12". "row-two" and "col-1-12" are re-used frequently.
<div class="row-two" >
<label for="someLabel" class="col-1-12">TheLabel:</label>
<div class="col-2-12 left-align-button">
<p-dropdown [options]="optionNames" [(ngModel)]="selectedSomething" [filter]="true" filterBy="label" [style]="{width:'80%'}" (onChange) = "onSomeChange()"></p-dropdown>
</div>
<label for="somethingElse" class="col-1-12">AnotherLabel:</label>
<div class="col-3-12">
<select multiple="true" size="12" [(ngModel)]="selectedSomething" style="width: 100%;" (ngModelChange) = "getDatesFromServer()" >
<option title="{{something.label}}" *ngFor="let something of somethings" value= {{something.value.id}}>
{{something.label}}
</option>
</select>
</div>
Credit to Jensei: the answer is CSS Grid. This example here is basically going to be my solution: https://gridbyexample.com/examples/example20/
Sorry for the confusing I caused. I did not paste my code because it is part of my big assignment. Also, I do not sure what parts of code cause the problem. So I paste the parts of the code that contains these three buttons
I want to make these three button display horizontally( Which I think is default). However, the website shows them vertically. Could anyone tell me the reason behind it? what should I do to make them horizontally.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</div>
<div id="Comparing Energy" class="tab">
<h3 style="color:darkblue;"> Units for comparing energy (Gasoline and Enthanol) </h3>
<p class="Sansserif">BTU stands for British Thermal Unit, which is a unit of energy consumed by or delivered to a building. A BTU is defined as the amount of energy required to increase the temperature of 1 pound of water by 1 degree Fahrenheit, at normal atmospheric pressure. Energy consumption is expressed in BTU to allow for consumption comparisons among fuels that are measured in different units. [think-energy.net]</p>
<pre class="Sansserif"><span style="font-family:sans-serif;">Below are some BTU content of common energy units:
1 gallon of heating oil = 138,500 BTU
1 cubic foot of natural gas = 1,032 BTU
1 gallon of propane = 91,333 BTU
</span></pre>
<p class="Sansserif"><b>Let's compare the different energy amount between burn gasoline and ethanol</b></p>
<button onclick="expandable()"><b>Calculate</b></button>
<p id="inputinfo" class="Sansserif" style="display:none"> By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: </p>
<input id="btu" style="display:none" onkeyup="myDefault()">
<button id="energybutton" onclick="energy()" style="display:none;"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none;"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none;"><b>Simple</b></button>
<p id="numb2" style="display:none">
<input type=radio name=myradio onclick=document.getElementById("btu").value=1>Small<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=4>Medium<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=6>Large<br>
</p>
<p id="BTU"></p>
<p id="defaultValue"></p>
<script>
function energy() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById('btu').value;
j = x * 115000
t = x*76700
text = " "+x+" gallon of gas produces "+j+" BTU "+x+" gallon of ethanol produces "+t+" BTU";
document.getElementById("BTU").innerHTML = text;
}
function myDefault() {
var x = document.getElementById('btu').value;
if (x <= 10)
document.getElementById("defaultValue").innerHTML = "A typical small one is 5";
else if ((x > 10) && (x <= 20))
document.getElementById("defaultValue").innerHTML = "A typical medium one is 15";
else if (x > 20)
document.getElementById("defaultValue").innerHTML = "A typical large one is 25";
else
document.getElementById("defaultValue").innerHTML = " ";
}
function wizard() {
var v = prompt("By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: ");
if (v != null) {
document.getElementById('btu').value=v;
}
}
function simple() {
document.getElementById('btu').style.display='none';
document.getElementById('numb2').style.display='block';
}
function expandable() {
document.getElementById('inputinfo').style.display='block';
document.getElementById('btu').style.display='block';
document.getElementById('energybutton').style.display='block';
document.getElementById('wizardbutton').style.display='block';
document.getElementById('slidebutton').style.display='block';
}
</script>
</div>
</body>
</html>
display: inline-block;
This should solve your problem.
Hard to say without the rest of your code present, but probably some other CSS is causing the buttons to render as block elements instead of their standard inline display mode.
You could write the following CSS rule:
#energybutton, #wizardbutton, #slidebutton {
display: inline !important;
}
And it would probably solve it, but that seems a little ugly and the !important is undoubtedly overkill. If you'd like to provide some more context I or someone else could provide a more elegant answer, but my hunch is this might work for you.
Edit:
Seeing your exit with more code the issue is obvious- in your expandable method you are changing the buttons to display: block -- this is why they are displaying with breaks between then. Instead, set the display property to inline or inline-block to achieve the desired effect.
Incidentally, it might be more robust to hide/show the buttons not directly by directly manipulating styles in JS, but instead by adding/removing a class with the desired associated CSS set.
Change the display of your buttons to 'inline' instead of 'none'.
First I would place all the buttons within a div so you can property CSS them.
<div class="title_of_div">
<button id="energybutton" onclick="energy()" style="display:none"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none"><b>Simple</b></button>
</div>
Then your CSS would look something like this:
.title_of_div a {
display: block;
float: left;
height: 50px; <!-- You enter your own height -->
width: 100px; <!-- You enter your own width -->
margin-right: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
I have two variables, one stores the chexboxes and the other stores the values checked, I found a problem to display the checkboxes and their values (checked, not checked) from the controller to the view.
I have this code on the controller
$scope.infoParticipant = functionThatGetsParticipants();
for (var i = 0; i < $scope.infoParticipant.length; i++) {
if ($scope.infoParticipant[i].ch_type == 'checkbox_multiple') {
var optionsString = $scope.infoParticipant[i].cf_multiple_optionsList;
$scope.infoParticipant[i].optionsTab = optionsString.split(";");
var optionsSelected = $scope.infoParticipant[i].v_value.split(";");
}
}
In the precedent code these should be the values
optionsString = "ch1;ch2;ch3";
$scope.infoParticipant[i].v_value = "ch1;ch2";
According to this the checkboxes :ch1 and ch2 will be checked on the next view :
<div ng-show="l.ch_type=='checkbox_multiple'">
<label >My checkboxes</span></label>
<div class="row" ng-repeat="k in l.optionsTab">
<div class=" col-md-2 modal_style_input">{{k}} </div>
<div class="col-md-2"><input type="checkbox" name="option" class="md-input" id="option {{k}}" class="wizard-icheck" value="{{k}}" icheck ng-model="" /></div>
<div class="col-md-8"></div>
</div>
</div>
My question is how to modify my controller and what to put on ng-model to have my correct chexboxes checked?
Thanks in advance.
In your case, one solution would be to use ngCheck directive in your check boxes.
<input type="checkbox" id="option {{k}}" value="{{k}}" ng-check="isOptionAvailable({{k}})" /></div>
And the isOptionAvailable(opt) is a javascript function that you add to the scope which returns true when k is present in $scope.infoParticipant[i].v_value.
EDIT: To answer your last comment, I created a plunker showing how it works
I have an HTML form that needs to collect information entered into a text box as well as options that are chosen from a set of dropdown menus. To give a little context, I am creating virtual machines that can be configured by the user on a web page. They must enter a name (arbitrary) and a hostmachine in two separate boxes in addition to selecting options from three different dropdown menus. Because I am working with clusters, there could be as many as 99 "rows" of dropdown menus representing different system configurations that will be a part of the cluster.
Is it possible (if so, advisable?) to have both the text fields and the dropdowns contained in one form? If not, how do I make sure that the submit button sends all the data to my Django server for processing as I need all of this information to ultimately come to the same place.
I currently have them in different forms, but just ignore this for now as it doesn't do anything at the moment. Also don't worry about the lack of dropdowns present in this code as the addSelect() JS function is fully functional. Just know that each added node is given a unique name (node1, node2, etc.) and goes into the div "nodes".
<body><b>Virtual Cluster Initialization</b><br></br>
<div id="container">
<div id="general">
<form method="POST" id="naming">Cluster name:<br>
<input type="text" name="cluster_name">
<br>
Host Machine:<br>
<input type="text" name="host_machine">
</form>
</div>
<form method="POST" id="node_config"></form>
<div id="nodes" form="node_config"></div>
<div id=node1">
<select name="node_type" id="node_type">Node Type</option>
(two options go here)
<select name="issp_version" id="issp_version>ISSP Version</option>
(7 or so options go here)
<select name="os" id="os">Operating System </option>
(about 20 options)
<button id="add" onclick="addSelect('nodes');">+</button>
</div>
<br></br><input type="submit"></input>
</body>
EDIT1: Added the an example dropdown for clarity. Would it be better to NOT make a new div for each node? I did this initially because it seemed like a good way to keep each node's configuration separate. Like I said, there could be up to 99 nodes, each with three dropdown menus.
Not really sure if I understand what you're asking. Showing us the code after your drop downs are added would help. Syntax wise, this wont work. Inputs should be inside forms and div doesn't have a form property.
Put everything into one form if you want it to all be in one post. If your dynamically adding new form elements you can use an array as element names.
How about something like this?
<script>
var nodeID = 0;
function addSelect() {
var html = "<div id='node_" + nodeID + "'>";
html += "<select name='node_type[" + nodeID + "]' id='node_type'><option>example</option></select>";
html += "<select name='issp_version[" + nodeID + "]' id='issp_version'><option>ISSP Version</option></select>";
html += "<select name='os[" + nodeID + "]' id='os'><option>Operating System </option></select>";
html += "</div>";
document.getElementById('nodes').innerHTML += html;
nodeID++;
}
</script>
<div style="margin-bottom:20px;"><b>Virtual Cluster Initialization</b>
</div>
<form>
<div id="container">
<div id="general">
<div>Cluster name:</div>
<div>
<input name="cluster_name" type="text">
</div>
<div>Host Machine:</div>
<div>
<input name="host_machine" type="text">
</div>
</div>
<div id="nodes">
<div>Nodes</div>
<div id="node_0">
<select name="node_type[0]" id="node_type"><option>example</option></select>
<select name="issp_version[0]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[0]" id="os"><option>Operating System </option></select>
</div>
<div id="node_1">
<select name="node_type[1]" id="node_type"><option>example</option></select>
<select name="issp_version[1]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[1]" id="os"><option>Operating System </option></select>
</div>
</div>
<div>
<button type="button" id="add" onclick="addSelect();">+</button>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
Here is a JSfiddle to help you visualize what this does:
https://jsfiddle.net/fdss08w9/2/
Example of how you might use this in Django:
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = NameForm(request.POST)
# check whether it's valid:
if form.is_valid():
# Get the number of nodes we added
for id, node_type in enumerate(form.cleaned_data['node_type']):
issp_version = form.cleaned_data['issp_version'][id]
os = form.cleaned_data['os'][id]
#do stuff with node_type, issp_version, os
I have the following HTML code and am trying to access "QA1234", which is the value of the Serial Number. Can you let me know how I can access this text?
<div class="dataField">
<div class="dataName">
<span id="langSerialNumber">Serial Number</span>
</div>
<div class="dataValue">QA1234</div>
</div>
<div class="dataField">
<div class="dataName">
<span id="langHardwareRevision">Hardware Revision</span>
</div>
<div class="dataValue">05</div>
</div>
<div class="dataField">
<div class="dataName">
<span id="langManufactureDate">Manufacture Date</span>
</div>
<div class="dataValue">03/03/2011</div>
</div>
I assume you are trying to get the "QA1234" text in terms of being the "Serial Number". If that is correct, you basically need to:
Locate the "dataField" div that includes the serial number span.
Get the "dataValue" within that div.
One way is to get all the "dataField" divs and find the one that includes the span:
parent = browser.divs(class: 'dataField').find { |div| div.span(id: 'langSerialNumber').exists? }
p parent.div(class: 'dataValue').text
#=> "QA1234"
parent = browser.divs(class: 'dataField').find { |div| div.span(id: 'langManufactureDate').exists? }
p parent.div(class: 'dataValue').text
#=> "03/03/2011"
Another option is to find the serial number span and then traverse up to the parent "dataField" div:
parent = browser.span(id: 'langSerialNumber').parent.parent
p parent.div(class: 'dataValue').text
#=> "QA1234"
parent = browser.span(id: 'langManufactureDate').parent.parent
p parent.div(class: 'dataValue').text
#=> "03/03/2011"
I find the first approach to be more robust to changes since it is more flexible to how the serial number is nested within the "dataField" div. However, for pages with a lot of fields, it may be less performant.