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>
Related
im trying to click this specific button but it seems its not working can someone help me?
heres what i wrote
obj.FindElementByXPath("//button[#class='btn btn-warning waves-effect m-1' and #id='btn-create-beneficiary' and text()=' Create Beneficiary']").Click
<div role="tabpanel" class="tab-pane fade in active" id="benef_tab">
<div class="d-flex m-b-15" style="justify-content: flex-end;">
<button class="btn btn-warning waves-effect m-1" id="btn-create-beneficiary" data-toggle="modal" data-target="#createModal" style=""> Create Beneficiary</button>
<button class="btn btn-success waves-effect m-1" data-action="encoding-complete" style="display: none;"><i class="material-icons">done_all</i> Mark as Completed</button>
<button class="btn btn-warning waves-effect m-1" data-action="return-beneficiaries" data-id="15945" style="display: none;"><i class="material-icons">assignment_return</i> Return For Re-check</button>
<button class="btn bg-teal waves-effect m-1" data-action="undo-completeness" style="display: none;"><i class="material-icons">replay</i> Undo</button>
</div>
<div class="table-responsive">
<div id="benefTable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="dt-buttons"><a class="dt-button buttons-excel buttons-html5 btn bg-pink waves-effect" tabindex="0" aria-controls="benefTable" href="#"><span>Excel Download</span></a></div><div id="benefTable_filter" class="dataTables_filter"><label>Filter Result <small class="text-muted">(ID,NAME)</small>:<input type="search" class="form-control input-sm" placeholder="" aria-controls="benefTable"></label></div><div id="benefTable_processing" class="dataTables_processing" style="display: none;"><div style="display: flex; align-items: center;">
<div class="preloader pl-size-xs">
<div class="spinner-layer pl-red-grey">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
VBA
First, set your reference to the Selenium WebDrive in the References tool...
Then the following code:
''*************************************************
Dim MyButton as Selenium.WebElement
Set MyButton = Obj.FindElementByCSS("#btn-create-beneficiary")
MyButton.Click
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.
In short, I'm interested in downloading search results from this website, but I'm running into a pop-up that asks for input. How do I submit that form using Python 3 (no Machanize) so that I can get to the search results?
This page: http://www.oreillyauto.com/site/c/search/Brake+Pads+&+Shoes/C0068/C0009.oap?model=G6&vi=1432754&year=2006&make=Pontiac
...has this form:
<div id="forcedVehicleQuestions" class="forcedUserInput" style="display: block; position: absolute; left: 50%; top: 40px; z-index: 6000; margin-left: -199px; margin-top: 0px;">
<div class="forcedContents clearfix">
<a class="btn-remove" onclick="closeForced('Search','question');">
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape-remove"></use></svg>
</a>
<form name="forcedQuestionsForm" id="forcedQuestionsForm">
<h2 class="sans">
More Product Info Required
</h2>
<p id="questionText" class="questionText">
Brake Pads - Position
</p>
<div id="forceQuestionsRadio">
<div class="form-row">
<label class="questionRadio checkbox-radio" id="questionRadio" for="Front">
<input type="radio" id="Front" name="answer" value="10219">
Front
</label>
</div>
<div class="form-row">
<label class="questionRadio checkbox-radio" id="questionRadio" for="Rear">
<input type="radio" id="Rear" name="answer" value="10290">
Rear
</label>
</div>
<div class="form-row">
<label class="questionRadio checkbox-radio" id="questionRadio" for="Show all">
<input type="radio" id="Show all" checked="" name="answer" value="-1">
Show all
</label>
</div>
</div>
<input id="questionSubmit" type="button" class="btn btn-green btn-shadow" value="Continue" onclick="setQuestionAnswer('Brake Pads - Position',document.forms['forcedQuestionsForm'].elements['answer'],'Show all');">
<div id="forcedVehicleQuestionsLoading" class="loading load-sm">
<div class="spinner"></div>
</div>
</form>
</div>
</div>
...but there's no method= so POST and GET don't seem to work. I'm pretty sure I understand how to set the radio buttons, so all I'm really interested in is how to get the onclick= behavior to happen.
So far, this is what I'm using:
#import HTTP libraries
import requests
#import HTML parsing libraries
import bs4
url = 'http://www.oreillyauto.com/site/c/search/Brake+Pads+&+Shoes/C0068/C0009.oap?model=G6&vi=1432754&year=2006&make=Pontiac'
answerURL = 'http://www.oreillyauto.com/site/ConditionSelectServlet?answer=-1'
print("Making request")
session = requests.Session()
session.headers.update({'referer': url})
r = session.get(answerURL)
print(r.status_code)
oreillyList = bs4.BeautifulSoup(r.text, "lxml")
print("Writing response...")
logfile = 'C:/Users/mhurley/Portable_Python/notebooks/' + output + '.log'
with open(logfile, 'w') as file:
file.write(oreillyList.prettify())
print("...done writing "+logfile)
This code retrieves the HTML for the page, but without any search results.
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>
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>