when I am using two button sets, they do not display on same line. Is there a way to display both of these on the same line? Here is my code
html:
<div id="view">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Regular</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Investments</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">All</label>
</div>
<div id="lod">
<input type="radio" id="lod_S" name="radio" checked="checked" /><label for="radio2">Summary</label>
<input type="radio" id="lod_D" name="radio" /><label for="radio3">Detail</label>
</div>
javascript:
$('#view,#lod').buttonset();
Thanks in advance for the help.
The default styling for div elements causes one to be below the other. You can substitute span here.
jsFiddle
Or use CSS to change the styling of your divs:
<style type="text/css">
#view, #lod {
display: inline;
}
</style>
Related
When I use a text-input type , i can just give it a value and use that, even on another page
example:
<input type="text" class="form-control" name="name" value="<?php echo $row['name'];?>">
Can I do the same with a textarea?
example :
<textarea class="form-control" rows="3" cols="123" name="comments" value="<?php echo $row['comments'];?>" ></textarea>
This is my code in where I retrieve an existing row of information from a given ID. The info consists of a name, emailaddress and comments :
<form method="post">
<div class="row gy-2 text-left">
<div class="row">
<div class="col-auto gy-2">
<label>Name</label> <br>
<input type="text" class="form-control" name="name" value="<?php echo $row['naam'];?>">
</div>
</div>
<div class="row">
<div class="col-auto gy-2">
<label>Email address</label><br>
<input type="email" class="form-control" name="email" value="<?php echo $row['email'];?>">
</div>
</div>
<div class="row">
<div class="col-auto gy-2">
<label>Tell me about it</label><br>
<style>
textarea {resize: none;}
</style>
<textarea class="form-control" rows="3" cols="123" name="comments" value="<?php echo $row['comments'];?>" ></textarea>
</div>
<div class="row">
<div class="col-auto gy-3">
<button class="btn edit btn-info border border-dark" name="Update">Update</button>
</div>
</div>
</div>
</form>
For the textarea element, it goes between <textarea> and </textarea> tags:
<textarea><?php echo $row['comments'];?></textarea>
The <textarea> element does not use an HTML attribute named value like the <input> element does.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
However, when the HTML markup which contains a textarea element is parsed by the browser, an HTMLTextAreaElement object is created. This DOM element object, which represents the state of the textarea element on the web page does have a JavaScript object property named .value, which gives access via JavaScript to the text which the textarea element contains.
This JavaScript code logs the text that is contained in a textarea element:
console.info(document.querySelector('textarea').value);
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement
Im try build a form to upload images, but when use csrf this donw work for me and, I was reading that need this code in you form enctype tag:
<form method="post" action="/?_csrf=<%=csrfToken%>">
this work for me but if want save one image only, but if want Edit or Delete, don't work, because use override method ?_method=PUT and return a URl with me CSRF
http://localhost:3030/stories/5bafe7a5abe3a7110c5f386b?_csrf=wkhEeV2x-06M_KPnZRoSTPJ3mUZSnuZ6dl7s
Cannot POST
<form class="col s12" action="/stories/{{storieEdit.id}}?_csrf={{csrfToken}}" enctype="multipart/form-data" method="POST">
<input type="hidden" name="_method" value="PUT">
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input type="file" name="fileUpload" onchange="previewFile()">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
<img src="/uploads/{{storieEdit.image}}" alt="Image" style="width: 25rem;">
</div>
</div>
</div>
</form>
any suggestions
Thanksfor read me
For multiple images you need to add to your form enctype atribute like this: enctype="multipart/form-data"
For method override you need to add method type as well as csrfToken to action query string:
action="/stories/{{storieEdit.id}}?_method=PUT&_csrf={{csrfToken}}"
I have similar code and works fine.
Bellow you can find the required changes directly in your code.
<form class="col s12" enctype="multipart/form-data" action="/stories/{{storieEdit.id}}?_method=PUT&_csrf={{csrfToken}}" enctype="multipart/form-data" method="POST">
<input type="hidden" name="_method" value="PUT">
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input type="file" name="fileUpload" onchange="previewFile()">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
<img src="/uploads/{{storieEdit.image}}" alt="Image" style="width: 25rem;">
</div>
</div>
</div>
</form>
My html looks like this:
<div class="row">
<div class="col-md-7">
<ul class="breadcrumb">
<li id="get_data">Get data</li>
<li id="sampling_task">Sampling</li>
<li id="confirm_task">Confirmation</li>
</ul>
<div class="container-fluid">
<form action="#" method="post" enctype="multipart/form-data" role="form" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="id_fileA" class="col-sm-3 control-label" style="text-align: left">
Select dataset A<span class='required_label'>*</span>
</label>
<div class="col-sm-9">
{{ form.fileA|attr:"class:form-control" }}
</div>
</div>
<div class="form-group"></div>
<div class="form-group">
<label for="id_fileB" class="col-sm-3 control-label" style="text-align: left">
Select dataset B<span class='required_label'>*</span>
</label>
<div class="col-sm-9">
{{ form.fileB|attr:"class:form-control" }}
</div>
</div>
<div class="form-group"></div>
<div class="form-group" id="sample_btn" style="display: none">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="button" name="theButton" id="sample-step" value="Start Sampling" class="btn btn-success btn-large disabled" style="border-radius: 5px;">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3" id="sample_msg" style="display: none;">
<p id="sample_text" style="font-size: medium">
Some ABCD message
</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3" id="get_sample_confirm_msg" style="display: none;">
<p>
<input type="button" style="height: 40px; width: 140px; border-radius: 5px" name="YesButton" id="accept-step" value="Accept & Continue" class="btn btn-success disabled">
<input type="button" style="height: 40px; width: 140px; border-radius: 5px" name="NoButton" id="cancel-step" value="Cancel Sampling" class="btn btn-danger disabled">
</p>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-5">
</div>
</div>
The backend is a javascript and on button click, it do processing and if something fails the javascript code update the message.
var error = "<div class='alert alert-danger'><p>We encountered an error while sampling: <br /><strong>Sampling failed!!</strong></p>"; error += "<p>Please <a href='mailto:abcd#gmail.com'>contact us</a> if this error persists.</p>";
error += "</div>";
$('#sample_msg').html(error);
Now, in my selenium code if I do this:
sample_msg = self.driver.find_element_by_id('sample_msg')
I get an empty list result. What I want is to do is read the error in the "sample_msg" class if any and I have tried few things but its not working out. Help is appreciated. Thanks.
If you want to get access to hidden text you might need to use below code:
sample_msg = self.driver.find_element_by_id('sample_msg').get_attribute('textContent').strip()
Note that text property allows to get text from visible elements only
As you are trying to extract the error message Some ABCD message it is contained within a <p> tag which have parent <div> tag with style attribute set as display: none;. So to extract the text you can use the following code block :
element = driver.find_element_by_xpath("//div[#class='form-group']/div[#id='sample_msg']")
driver.execute_script("arguments[0].removeAttribute('style')", element)
print(driver.find_element_by_xpath("//div[#class='form-group']/div[#id='sample_msg']/p").get_attribute("innerHTML"))
So, you have to wait for sometime after clicking the button and once some message appears then you need to extract that message.
Try below:-
WebDriverWait wait = new WebDriverWait(webDriver, timeoutInSeconds);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id));
or
wait.until(ExpectedConditions.elementToBeClickable(By.id));
to be precise.
See also:
org.openqa.selenium.support.ui.ExpectedConditions for similar shortcuts for various wait scenarios.
org.openqa.selenium.support.ui.WebDriverWait for its various constructors.
You can check the python syntax also on the above links.
I'm trying to make a simple Bootstrap searchbar (with bootstrap 3.3.7), but always the glyphicon-search is more little than the form...
With all Bootstrap navbar examples, the result is the same, as the following :
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
Do I really need to add some CSS to that ?
To change size and color of your glyphicon:
.glyphicon-search.white {
font-size: 1.2em; // slightly bigger
color: #fff; // white
}
In your html
<i class="glyphicon glyphicon-search white"></i>
After having removed critical features such as input-xlarge and input-large, what is the substitution for it in bootstrap 3?
Of course I could use col-lg-12 etc but that is giving an error in tab pane.
I could also use style = "width:30px;" but then It would loose its responsiveness unlike input-xlarge.Any suggestions etc?
In Bootstrap 3, .form-control (the class you give your inputs) has a width of 100%, which allows you to wrap them into col-lg-X divs for arrangement. Example from the docs:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
See under Column sizing.
It's a bit different than in Bootstrap 2.3.2, but you get used to it quickly.
You can use these classes
input-lg
input
and
input-sm
for input fields and replace input with btn for buttons.
Check this documentation http://getbootstrap.com/getting-started/#migration
This will change only height of the element, to reduce the width you have to use grid system classes like col-xs-* col-md-* col-lg-*.
Example col-md-3. See doc here http://getbootstrap.com/css/#grid
<form role="form">
<div class="form-group">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">col-xs-3</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
<label for="ex3">col-xs-4</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>
</form>
i solved with a max-width in my main css-file.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a simple solution with little "code"
<div class="form-group">
<div class="input-group col-md-5">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px">
</div>
<input type="button" name="SIGNUP" value="SIGNUP">
</div>