env:
Ipad web app, use Cordova
my html source:
<div style="text-align: right; font-size: 15px;">
<input type="checkbox" disabled>
space
</div>
when my checkbox is disabled, checkbox's left line can not be shown. Like this:
I think text-align is not suitable for input checkbox.
I resole this bug by delete text-again and use margin-left:
<div style="margin-lest: 100px; font-size: 15px;">
<input type="checkbox" disabled>
space
</div>
Related
I am working on a website for work and have two options for radio buttons. I've used <a> tags as wrappers for the text and radio button to send the user to a specific webpage of that website. The radio buttons and text work each perfectly well on Firefox. On Chrome however, the text works fine as a link. The radio buttons on the other hand do not work. The page just refreshes and nothing happens. I even decided to add a submit so it directs it to one of those pages, with no success as of now. I tried to replicate the code as close as I could to the code from the website down below.
https://jsfiddle.net/hLph4at4/1/
<form name="frmSite" style="float: left; margin-top: 5px;">
<a class="loginPg_choices" href="www.youtube.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">Take me to youtube.</span>
<br/>
</a>
<a class="loginPg_choices" href="www.google.com">
<input type="radio" name="site" value="1" id="radio_btn_1" style="float: left; clear: both;" />
<span style="float: left; margin: -2px 0 0 5px;">Take me to google.</span>
<br/>
</a>
<a href="#" type="submit" value="Submit" title="Login" style="float: right; clear: both;">
Submit
</a>
</form>
You could add an onclick attribute to your tag, e.g. onclick="window.location.href = 'https://youtube.com'"
Or, as an updated Fiddle: https://jsfiddle.net/hLph4at4/7/
That will always be called (unless the propagation is stopped), which also includes the radio button.
I am new to asp.net mvc5. I was trying to put search icon inside search bar but it appears outside the bar. can any one tell the solution? here is snapshot and code.
enter image description here
and code is here..
<div class="banner-g">
<div class="container">
<div id="user-info">
<div class="navbar-form navbar-right">
<form action="/home/browse" id="searchForm" method="get">
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-search"></i>
<input class="form-control input-sm" data-val="true" data-val-length="The field Search must be a string with a maximum length of 150." data-val-length-max="150" data-val-regex="Please only use letters, numbers, spaces, periods, commas, question/ exclamation marks, dollar sign, underscores, hyphens, apostrophes, parentheses, forward and back slashes, colon and semi colons" data-val-regex-pattern="^[0-9a-zA-Z/'() .,!?$:-;_-]+$" id="Search" name="Search" placeholder="Search Markets" type="text" value="" />
<input type="hidden" name="isSearch" value="true">
</div>
</form>
</div>
</div>
</div>
</div>
and in bootstrap file
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
}
I will be thankful for help.
You should look into using the Bootstrap input group component. You can find it documented here.
Like this:
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon glyphicon glyphicon-search" aria-hidden="true"></span>
</div>
Here is a demo.
I think you are on the right track but your issue is a two part issue. You can use .input-group-addon to place the search icon next to the search input. Then you can use css to style it to look like it is part of the search bar. Style it however your heart desires.
Here is a working demo.
Im crating a form with many fields and a checkboxes, the problem is that im trying to customize the checkbox(unsuccessfully) according with the style of my form.
As you can see in the picture, the tick of the checkbox is black, and i need it green. How can I change the color? How can I change the size of checkbox?
This is my HTML:
<div id="Cajamitad1">
<form role="form">
<div class="checkbox">
<label><input type="checkbox" value="" >
<a class="FontStyle">Vegano</a>
</label>
</div>
< div class="checkbox">
<label><input type="checkbox" value="">
<a class="FontStyle">Diabetico</a>
</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">
<a class="FontStyle">Celiaco</a>
</label>
</div>
</form>
</div>
and this my CSS:
#ContForm{
display: inline;
box-sizing: border-box;
}
.checkbox{
margin: 10px;
padding: 10px;
}
.checkbox input[type="checkbox"]{
margin-left: 5px;
}
#Cajamitad1{
margin-top: 10px;
width: 40%;
float: left;
padding-left: 200px;
}
Correct me if I'm wrong, but as far as I know this is not possible.
Here is my reasoning: if you inspect the bootstrap checkbox then you see that the checkbox itself is drawn by an <input type="checkbox"> and you have very limited control over that. Some browsers let you change the size of the checkbox but not all of them.
So the only thing you can do is to make your own checkbox, e.g. by using two images and some css.
Or often more mobile friendly are just two buttons side by side "yes" and "no". Then if you click one it becomes active, like some kind of toggle button.
group to align a label and an input box. The idea is to put the label and the input box in different lines. The code snippets are like:
<form>
<div class="form-group">
<label for="input">Please enter names, separated by space:</label>
<div>
<div class="col-xs-8">
<input type="text" class="form-control" id="input" placeholder="Enter up to 10 names to search" ng-model="vm.searchRaw">
</div>
<div class="block-align-right">
<button class="btn btn-primary" style="width: 120px" ng-click="vm.search()" ng-disabled="vm.notEntered()">Search</button>
</div>
</div>
</div>
</form>
The divs inside the form group is mainly to align the input box and the button to one line. Now the problem is: the left edge of the label and the left edge of the input box don't align; the input box shifts to the right a bit. Without using padding how can I fix this? Or is it built in for the form-group? Thanks!
Use this type
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
Add class to label. like:
<label class="col-xs-10" for="input">Please enter names, separated by space:</label>
Will solve your issue.
Because bootstrap class will add padding-left:15px.
Check image below.
Working Fiddle
Seems like you are using bootstrap. Just modify the <label> line as follows:
<label for="input" class="col-xs-12">Please enter names, separated by space:</label>
I'm trying to create an input form on a web page, and I want all of the input elements to be lined up along a certain column. My idea was to use absolute positioning to just shift all of the input elements over to a specific point on the page. It's working fine, except for one problem: the input elements are overlapping with each other a little bit, vertically.
Here's a MVCE:
<!DOCTYPE html>
<html><head>
<style>
span.right_align {
display: inline;
position: absolute;
left: 80px;
}
div.form_container {
position: relative;
}
</style>
<title>World's Best GUI</title></head>
<body type="text/css" style="background-color: #F7D879; font-family: Georgia, serif">
<div class="form_container">
<form name="guiForm" method="post" action="return false;">
Input 1: <span class="right_align"><input type="text"></span><br>
Input 2: <span class="right_align"><select autocomplete="off">
<option value="yes">Yes</option>
<option value="no">No</option></select></span><br>
Input 3: <span class="right_align"><input type="text" size="50"></span><br>
Input 4: <span class="right_align"><input type="text"></span>
</form>
</div>
</body>
</html>
As far as I can tell, the problem is because the font is smaller than the size of the input box, but it's the size of the font that determines where a new line "begins". If you comment out or remove everything in the right_align class, they stop overlapping (but they also stop lining up so nicely).
I'll also note that the reason I went for the span-class solution is because I need to 1) have some lines dynamically disappear and reappear, depending on the current state of a drop-down, and 2) dynamically create new input items that will also line themselves up nicely. This seemed like a solution that would interfere very little with the current workings of my web page.
Is there a simple way to fix this? Should I be creating these columns in an entirely different way? I'm open to totally new ideas as well.
EDIT: someone suggested I create a jsfiddle, so I did: http://jsfiddle.net/uy9comxk/
EDIT 2: there will be lines where I have multiple inputs that have to appear beside each other on the same line (for date inputs). I didn't include them because it would have increased the MCVE size by a lot.
In your css, use a line-height and it will work:
div.form_container {
position: relative;
line-height: 25px;
}
With a fiddle
Since you're using a form, you should use the label tag and set the width of each - ideally a little longer than than width of the inputs' names to account for longer ones. Using the label for the inputs will also fix the overlapping issue of the inputs.
CSS:
label {
display: inline-block;
width: 80px;
}
input {
margin-left:10px;
}
HTML:
<form name="guiForm" method="post" action="return false;">
<label for="input1">Input 1:</label> <input name="input1" type="text"><br>
<label for="input2">Input 2:</label> <input name="input2" type="text"><br>
<label for="input3">Input 3:</label> <input name="input3" type="text"><br>
<label for="input4">Input 4:</label> <input name="input4" type="text"><br>
<label for="input5">Input 5:</label> <input name="input5" type="text"><br>
</form>
http://jsfiddle.net/ub3bw1rv/