I have been trying the documentation of dijit textbox, but there seem to be no proper documentation on how to do text-align: right css style settings.
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="firstname" />
If I add the "align: right" the parse fails. I also tried via CSS but the text-align seem to not be reflected.
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, align: right" id="firstname" />
I also tried text align via css style but it does not parse well.
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="style: { width: '150px'; text-align: right}" id="firstname" />
I don't know if it is possible to set text alignments using data-dojo-props attribute. However you can solve your problem using CSS selectors:
HTML:
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, align: right" id="firstname" />
CSS (examples):
input[name="firstname"] {
text-align: right;
}
or
#firstname {
text-align: right;
}
another elegant approach would be, to create an attribute selector querying the align: right value of your data-dojo-props attribute. With this selector you can reach all of your input items once.
input[data-dojo-props*="align: right"] {
text-align: right;
}
Here you can find an jsfiddle example.
UPDATE:
I have done some further investigations and I came to the conclusion that it is a syntax problem why the dojo parsing fails.
The following piece of code works without parsing errors:
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, style:'text-align: right'" id="firstname" />
but the result is not as expected:
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox"
id="widget_firstname" role="presentation" widgetid="firstname" style="text-
align: right;"><div class="dijitReset dijitInputField dijitInputContainer">
<input class="dijitReset dijitInputInner" data-dojo-attach-
point="textbox,focusNode" autocomplete="off" name="firstname" type="text"
tabindex="0" id="firstname" value="Testing Testing"></div></div>
because the styling will applied to the wrapper div.
I my opinion the best way to handle your requirements is to work only with CSS stylings without using the data-dojo-props attribute.
Dojo supports right aligned text inputs natively through bi-directional text support https://dojotoolkit.org/reference-guide/1.10/quickstart/internationalization/bi-directional-text.html
This is intended to reverse the text direction of a portion or the entire page (including inputs) by setting the dir tag on an element:
<body dir="rtl">
<!-- Widgets Here -->
</body>
However, that probably isn't what you want. Try this CSS:
.dijitInputContainer .dijitInputInner {
text-align: right;
}
Related
Is it possible that the user could select from the utility dropdown (see picture below) a search option which will effect the search text field?
Or is it possible merge the dropdown and search text field together?
I think you will be able to do this leveraging input-groups. But the docs also mention:
Avoid using elements here as they cannot be fully styled in
WebKit browsers.
HTML to integrate a <select> in the navbar:
<form class="navbar-form navbar-left select-search" role="search">
<div class="input-group">
<span class="input-group-addon">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</span>
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Then apply the following CSS:
.select-search .input-group-addon {
padding: 0;
border: 0;
}
.select-search .input-group .input-group-addon > select.form-control {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
Demo: http://www.bootply.com/8zPGZ9ySOl
I found this works well in chrome, but in firefox the select arrow got some button like styling:
I'm not sure how to fix the style of the select arrow here. Style the select with -moz-appearance:none or -moz-appearance:menulist won't help. Possible related to: Clearing the background of a <select> element's pulldown button with CSS
I want to create a new style for forms in my Twitter Bootstrap site and I want to keep with the SMACKS / OOCSS conventions.
This is the default form:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<!-- More coontent in form here -->
If I want to override the input style it would seem to me to keep with conventions to add a class of form-control-newstyle:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<!-- More coontent in form here -->
However I also want to style the label. Should I add a new style to the label or to the div.form-group?
.form-group wraps around form groups label and an input, it acts like a .row in a .form-horizontal and otherwise, when the form stacks on smaller viewports there's some vertical space so it all doesn't squish together.
The default label style that goes on all labels is:
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
To do
.form-group label {}
Would affect all labels if you've properly formatted your forms.
If you just want to isolate it to a specific label you can make a class for that label and assign a class to just that label. If you want to affect all labels you can just modify the label element.
You can also make a new parent class for anything wrapping around that form and address the label styling like that.
<html>
<body>
<section id="click" class="content mCustomScrollbar _mCS_1">
<div id="mCSB_1" class="mCustomScrollBox mCS-dark" style="position:relative; height:100%; overflow:hidden; max-width:100%;">
<div class="mCSB_container" style="position:relative; top:0;">
<form id="registration" action="http://abcd.com/setup/user-registration/index" method="post" name="registration">
<article class="frm-content">
<div class="leftsection">
<div class="form-element">
<fieldset>
<label>
<input id="firstname" type="text" maxlength="50" value="" name="firstname" style="border: 1px solid red;">
<label>
<span class="required">*</span>
First Name:
</label>
<input id="firstname" type="text" maxlength="50" value="" name="firstname" style="border: 1px solid red;">
<span id="error_firstname" class="errormsg" role="alert">Please use only letters,numbers, period, single space and underscore</span>
</fieldset>
</article>
</div>
</section>
</body>
</html>
I Above code I want to find Please use only letters,numbers, period, single space and underscore message. The xpath for that is /html/body/section[2]/div/div/form/article/div/div/span but it is not accessing by gettext() method. Pls how to access this ????
getText() method fetches only visible (i.e. not hidden by CSS) innerText of respective element. Which might be a cause for the problem.
Please try the following to check if element is displayed.
Driver.FindElement(By.id("error_firstname")).isDisplayed();
You can add WebDriverwait till that element is displayed and then fetch the text from that element.
WebDriverWait Driver_Wait=new WebDriverWait(Driver, 10); //10 denotes Total_Secs to wait
Driver_Wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("error_firstname")));
Hope this helps.
By using the id "error_firstname" we can only get the values in span which has id as error_firstname..
So use the id "click" which serves the best
I tried tweaking the CSS coding and no prevail. Things i want:
search box with border radius of 5px
enlarge the search icon with out getting it dispalced
both search box and search icon evenly placed around the div
HTML CODE:
<div class="search"
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button">
</form>
</div>
</div>
CSS CODE:
.search{position:fixed;
height:25px;
width:194px;
top:189px;
left:14px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;}
Notice: Your class="search" div is not closed !!
Here is the code that should work and fullfill all the three conditions of yours
<div class="search">
<div class="searchbox">
<form action="/search" method="get" class="search_form">
<input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button">
</form>
</div>
Css Code:
.search{position:absolute;
height:28px;
width:190px;
top:140px;
left:100px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;
}
form#input{
display:inline-block;
}
.searchbox{
}
.search_text{
margin-top:4px;
margin-left:5px;
border-radius:5px;
text-align:center;
}
.button{
margin-top:5px;
margin-left:2px;
position:absolute;
height:20px;
width:20px;
}
.button:hover{
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
opacity: 3;
}
Working JSfiddle Demo - http://jsfiddle.net/vg8Mn/
Hope this helps :)
I tried the code from the project to change the size of the select box:
<strong>Result Div :</strong>
<div id="formResult" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>
<strong>Topics Div :</strong>
<div id="topics" class="result ui-widget-content ui-corner-all"></div>
<s:form id="form" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>Select Box as Autocompleter</legend>
<div class="type-select">
<label for="echo">Echo: </label>
<sj:autocompleter
id="customers"
name="echo"
list="%{customers}"
listValue="name"
listKey="id"
selectBox="true"
selectBoxIcon="true"
onChangeTopics="autocompleteChange"
onFocusTopics="autocompleteFocus"
onSelectTopics="autocompleteSelect"
cssStyle="width:100%;"
/>
</div>
<div>
<sj:submit
targets="formResult"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</div>
</fieldset>
</s:form>
<br/>
but it doesn't work. I don't know what is the problem with this code.
Looking at generated HTML neither cssStyle nor cssClass of <sj:autocompleter> tag is set to actual input field. But you can use plain CSS to style this input field. Put your <sj:autocompleter> inside of some element to change only specific input then you can use something like that:
.type-select .s2j-combobox-input {
width: 100%;
}
Where type-select is class of wrapper element and s2j-combobox-input is the class of generated input field for the <sj:autocompleter>.