I have a simple task to add space between buttons in a dialog box like in the example code below obtained from http://bootboxjs.com/examples.html. Just imagine that there is more than 1 button is this example. Like save, delete, cancel, confirm.
bootbox.dialog({
title: "This is a form in a modal.",
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<form class="form-horizontal"> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="name">Name</label> ' +
'<div class="col-md-4"> ' +
'<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' +
'<span class="help-block">Here goes your name</span> </div> ' +
'</div> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
'<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
'Really awesome </label> ' +
'</div><div class="radio"> <label for="awesomeness-1"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
'</div> ' +
'</div> </div>' +
'</form> </div> </div>',
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function () {
var name = $('#name').val();
var answer = $("input[name='awesomeness']:checked").val()
Example.show("Hello " + name + ". You've chosen <b>" + answer + "</b>");
}
}
}
}
);
I would like to know how to increase the spacing between the buttons so that they are placed more far apart and look spacious and the UI of the dialog box is more beautiful. I am not so good at these stuff. I have searched a lot. Please help me. Your help will be much appreciated. Thank you very much.
Please give some code and live example if possible. Thank you again.
You can use or margin property to add spacing between buttons on a webpage.
Using :
You can use between the closing tag of first button and opening tag of second button just like shown below.
<button>Button 1</button> <button>Button 2</button>
you can add more for adding more space.
Using margin attribute :
You can add spacing between two objects by adding margin on its sides. The CSS code is as follows,
.btn_name{
margin-left:10px;
}
to add space on left side or you can add space on right side by using the following code,
.btn_name{
margin-right:10px;
}
Another soltuion that may be quite elegant is to use {" "}. It is more readable than the cryptic . :)
<button>Button 1</button> {" "} <button>Button 2</button>
Related
I have a simple jQuery question. I have a Web App that looks like the following:
The HTML for the page is here:
<div id="hwAddition">
<div id="itemNumber" style="text-decoration: underline; font-size: large;">Item #</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="hwDescription" style="text-decoration: underline;">Description</label>
<form:textarea id="hwDescription" type="text"
class="form-control short" path="hwDescription"
name="hwDescription" placeholder="Description" maxlength="100"
rows="2" style="resize: none;" />
</div>
<div class="form-group col-md-4">
<label for="hwSerialNumber" style="text-decoration: underline;">Serial
#</label>
<form:input type="text" class="form-control" path="hwSerialNumber"
name="hwSerialNumber" placeholder="Serial #" maxlength="100" />
</div>
<div class="form-group col-md-4">
<label for="hwModelNumber" style="text-decoration: underline;">Model
#</label>
<form:input type="text" class="form-control" path="hwModelNumber"
name="hwModelNumber" placeholder="Model #" maxlength="100" />
</div>
</div>
<hr />
</div>
</div>
My issue lies with the "Item #" label. I'm trying to simply append a value after the markup so that the labels say "Item #1", "Item #2", and so on. The counting procedure is working and the jQuery is shown here:
var count = 1;
$(function() {
$("#hwAddition").attr('id', 'hwAddition' + count);
$("#itemNumber").attr('id', 'itemNumber' + count);
$("#itemNumber").append(count);
});
$('#hwAdditionButton').click(
function() {
var clonedObj = $("#hwAddition" + count).clone().attr('id', 'hwAddition' + (count+1));
clonedObj.find("#itemNumber" + count).attr('id', 'itemNumber' + (count+1));
clonedObj.insertAfter("#hwAddition" + count);
$("#itemNumber").append(count);
count++;
});
For some reason though, the .append() methods are adding nothing to the end of the labels. What am I doing incorrectly?
At the 5th and 12th rows, you do:
$("#itemNumber").append(count);
You're searching for #itemNumber without a "+ count", if I understand correctly you've changed both the original's and the clone's IDs to be itemNumber + count.
Also, the proper way to append text is:
$('#itemNumber' + count).append(document.createTextNode(count));
But why using append? in your case you can do:
$('#itemNumber' + count).text("Item #" + count);
I have a function, thats create with jquery some hidden input fields:
$('#seatBookings').append('<div class="alert alert-info">' + $('#selectParticipantSeat option:selected').text() + '</strong>, gebucht auf Sitzplatz: <strong>' + $(this).data('seatNumber') + '</strong><input type="hidden" name="rowid[]" value="' + $('#' + seat).data('rowid') + '"><input type="hidden" name="colid[]" value="' + $('#' + seat).data('colid') + '"><input type="hidden" name="seatparticipant[]" value="' + $('#selectParticipantSeat option:selected').text() + '"></div>');
This will be placed here:
<form method="post" action="{$register_link}" id="register">
...
<div id="seatBookings">
<h5>Du hast folgende Sitzplatzkonfiguration festgelegt:</h5>
</div>
....
</div>
</form>
But when I click the submit button in the POST Variable is not one dynamic field.
What I am doing wrong?
I want to reset the count when the user removes the item. For example, I have these images:
Picture 1
In picture 1, we have Title, Title 1 and Title 2
Picture 2
In picture 2 all the items are removed.
Picture 3
In picture 3, we have Title 3 and Title 4.
What I want is when user clicks on add button after removing all the items, it should start again from Title 1 and Title 2 rather than Title 3 and Title 4 as in picture 3.
My Code:
<div class="append">
<button type="button" id="addRow" class=" btn btn-success float-right">Add Title
</button>
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title[]" class="form-control" id="row_0"
placeholder="Enter Product Title">
<a class="btn btn-danger remove" onclick="deleteTitleRow();">X</a>
</div>
</div>
$("#addRow").on('click', function () {
count++;
addTitleRow(count);
});
function addTitleRow(x) {
let addTitle = '<div class="form-group">\n' +
'<label for="title">Title ' + x + '</label>\n' +
'<input type="text" name="title[]" class="form-control" id="row_' + x + '"\n' +
' placeholder="Enter Product Title">\n' +
'<a class="btn btn-danger remove" onclick="deleteTitleRow();">X</a>\n' +
'#if($errors->has('title'))\n' +
' <p class="error alert alert-danger">{{$errors->first('title')}}</p>\n' +
'#endif\n' +
'</div>';
$(".append").append(addTitle);
}
function deleteTitleRow() {
$("body").on("click", "a.remove", function () {
$(this).parents(".form-group").remove();
});
}
You must calculate title count when add and remove events called. Check below code:
$("body").on("click", "button.remove-row", function() {
$(this).parent().remove();
calculateTitles(); // Call when removed row for title count calculation.
});
$("body").on("click", "button.add-row", function() {
let addTitle = '<div class="form-group titles">' +
'<label for="title" class="row-title"></label>' +
'<input type="text" name="title[]" class="form-control" placeholder="Enter Product Title">' +
'<button class="btn btn-danger remove-row">X</button>' +
'</div>';
$(".append").append(addTitle);
calculateTitles(); // Call when added row for title count calculation.
});
function calculateTitles() {
// Find all titles, add label text as 'Title {index}', add one to index because it's starting from zero.
$('.titles').each(function(index, title) {
$(title).find('label.row-title').text('Title ' + (index + 1));
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="append">
<button type="button" class=" btn btn-success float-right add-row">Add Title</button>
<div class="form-group titles">
<label for="title">Title 1</label>
<input type="text" name="title[]" class="form-control" placeholder="Enter Product Title">
<button class="btn btn-danger remove-row">X</button>
</div>
</div>
I have this set of html:
<div class="container-fluid">
<div class="panel panel-default ">
<div class="panel-body">
<form id="coupon_checkout" action="http://uat.all.com.my/checkout/couponcode" method="post">
<input type="hidden" name="transaction_id" value="4245">
<input type="hidden" name="lang" value="EN">
<input type="hidden" name="devicetype" value="">
<div class="input-group">
<input type="text" class="form-control" id="coupon_code" name="coupon" placeholder="Coupon Code">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Enter Code</button>
</span>
</div>
</form>
</div>
</div>
I want to get the transaction id value. How do i get it?
I have try using this code:
var value = wkWebView.evaluateJavaScript("document.getElementByName('transaction_id')", completionHandler: nil)
print("value:\(value)")
But the output is return nothing:
value:( )
Two things - you need an "s" in the getElementsByName code and it returns a collection of elements - you need to specify which - in this case there is only 1, but you still need to specify it and get the value of the element:
...document.getElementsByName('transaction_id')[0].value....
I think it's a typo, you should use getElementsByName instead of getElementByName.
Second thing:
Shouldn't it be "document.getElementsByName('transaction_id').value" rather than "document.getElementByName('transaction_id')"
You can also use it like if heaving issues:
webView.evaluateJavaScript("document.getElementsByName('someElement').value") { (result, error) in
if error != nil {
print(result)
}
}
I have just popped it into this snippet and provided the value in a jquery approach (since you are using Bootstrap - you must also be using jQuery) and the normal javascript method - both work so it must be something to do with the swift content. - also in your output - are you sure that the "\" is not escaping the "("? - should it be print("value:(value)") or escape both print("value:\(value\)") or alter the quotes print("value:"(value))
$(document).ready(function(){
var transaction_idValue1 = $('[name=transaction_id]').val();
console.log(transaction_idValue1);
var transaction_idValue2 = document.getElementsByName('transaction_id')[0].value;
console.log(transaction_idValue2);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="panel panel-default ">
<div class="panel-body">
<form id="coupon_checkout" action="http://uat.all.com.my/checkout/couponcode" method="post">
<input type="hidden" name="transaction_id" value="4245">
<input type="hidden" name="lang" value="EN">
<input type="hidden" name="devicetype" value="">
<div class="input-group">
<input type="text" class="form-control" id="coupon_code" name="coupon" placeholder="Coupon Code">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Enter Code</button>
</span>
</div>
</form>
</div>
</div>
Using SwiftSoup
let html = "<div class=\"container-fluid\">"
+ "<div class=\"panel panel-default \">"
+ "<div class=\"panel-body\">"
+ "<form id=\"coupon_checkout\" action=\"http://uat.all.com.my/checkout/couponcode\" method=\"post\">"
+ "<input type=\"hidden\" name=\"transaction_id\" value=\"4245\">"
+ "<input type=\"hidden\" name=\"lang\" value=\"EN\">"
+ "<input type=\"hidden\" name=\"devicetype\" value=\"\">"
+ "<div class=\"input-group\">"
+ "<input type=\"text\" class=\"form-control\" id=\"coupon_code\" name=\"coupon\" placeholder=\"Coupon Code\">"
+ "<span class=\"input-group-btn\">"
+ "<button class=\"btn btn-primary\" type=\"submit\">Enter Code</button>"
+ "</span>"
+ "</div>"
+ "</form>"
+ "</div>"
+ "</div>"
let document: Document = try SwiftSoup.parse(html);//parse html
let elements = try document.select("[name=transaction_id]")//query
let transaction_id = try elements.get(0)//select first element ,
let value = try transaction_id.val()//get value
print(value)//4245
I am trying to combine 3 inputs of input text and binding the data to another input text.
<input type="text" class="textbox" name="country" id="loc_country" value="Gershon" ng-model="location.country"/>
<input type="text" class="textbox" name="city" id="loc_city" ng-model="location.city"/>
<input type="text" class="textbox" name="street" id="loc_street" autocomplete="off" ng-model="location.street"/>
<input type="text" class="textbox" name="result" id="result"/>
Here the first 3 inputs need to added to the 4 input automatically with binding
You should set the value HTML attribute of the text box. You can do it inline like so:
<input type="text" class="textbox" name="result" id="result" value="{{location.street + ' ' + location.city + ' ' + location.country}}"/>
Or you can use a computed property. Here is an example:
HTML:
<div ng-app>
<div ng-controller="SomeCtrl">
<input ng-model="textProperty"/>
<input value="{{getCalculatedText()}}"/>
</div>
</div>
JS:
function SomeCtrl($scope) {
$scope.textProperty = "some text";
$scope.getCalculatedText = function() {
return $scope.textProperty+ " is now calculated";};
}
Please see my example answer here: https://jsfiddle.net/em0ney/bc3chrog/2/
function ExampleController($scope) {
$scope.location = {country: 'Australia', city: 'Sydney', street: 'Pitt St'};
$scope.concatLocationComponents = function() {
return $scope.location.street + ' ' + $scope.location.city + ', ' + $scope.location.country;
};
}
Good luck with formatting the result.
Thanks,
Elliott