Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a label 'deduplication' with a checkbox. I would like to have my checkbox very close to the label.
Here is the HTML :
<div class="form-group">
<label for="dedup">deduplication</label>
<input
formControlName="dedup"
style="text-align:left;"
id="dedup"
type="checkbox"
class="form-control">
</div>
And here is the page :
I added "text-align:left" but my checkbox is still on the middle
You just need to use the example on the Bootstrap website
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="dedup" value="1">
<label class="form-check-label" for="dedup">deduplication</label>
</div>
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
CSS show/hide based on the value exists or not [duplicate]
Closed 8 months ago.
My question is not associated with a similar question Is there a CSS parent selector?. Please note the situation is different and those answers are not the solutions to my question. So here I am asking for a new one.
One of the page is loading the HTML from an iFrame URL. Here I need to show/hide the textbox wrapper based on the value exists or not condition. Due to the origin limitations or feature restrictions, we don't have an option to include the CSS class names or JavaScript code. But they will allow CSS code for the interface look and feel.
Is there any way to show/hide the parent container of an element based on the value exist or not condition? The wrapper(div) should show if the child element has no value. The wrapper should hide if the child element has some value.
Here is the sample HTML loaded in an iFrame,
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<label for="billing-firstname" class="control-label"><span class="-b-fake-parent" data-original-text="First Name ">First Name </span><span class="error" data-original-text="*">*</span></label>
<input type="text" name="firstname" id="firstname" class="form-control" value="Sridhar" autofocus="" autocomplete="given-name" data-testid="product-checkout-first-name-input" data-original-text="Sridhar">
</div>
</div>
<div class="col-sm-7">
<div class="form-group">
<label for="billing-lastname" class="control-label"><span class="-b-fake-parent" data-original-text="Last Name ">Last Name </span><span class="error" data-original-text="*">*</span></label>
<input type="text" name="lastname" id="lastname" class="form-control" value="" autocomplete="family-name" data-testid="product-checkout-last-name-input" data-original-text="">
</div>
</div>
In the above HTML, you can see the lastname field has no value, so the parent div col-sm-7 should not show.
I am looking for a solution in pure CSS. Every problem has a solution in this world.
Apreciate your help
I'm trying to get a css switch for checkboxes to work. An example can be found here:
https://www.w3schools.com/code/tryit.asp?filename=FWCNHR9N3EYO
The switch with two input elements inside the label element does not work on ie/edge. As this code is generated, I can't change this order of the elements. But there must be a css statement that ie/edge interprets different from other browsers.
This works on ie/edge:
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
This does not work in ie/edge:
<label class="switch">
<input type="hidden">
<input type="checkbox">
<span class="slider"></span>
</label>
How can I fix this?
Important: The order of the HTML elements cannot be changed as it automatically generated.
Thanks in advance!
Best regards
Roberto
Try to put input after span class like below may solve your issue.
<label class="switch">
<input type="checkbox" checked/>
<span class="slider"></span>
<input type="hidden">
</label>
By this way it is working in both IE and Edge.
You can make a test on your side that it is working as per your requirement or not.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I'm trying to work out a login module that looks like this
I've tried looking for bootstrap templates that allow this but I can't find any available. I was wondering if anyone here knows any bootstrap templates that does:
Responsive Login Dialog Box w/ Logo
Darkens the background
Been going nuts over this. Any help would be greatly appreciated. :)
There are ways around using any JS if you would prefer although you can take the modal approach. here is another suggestion.
Here is a Bootly of a similar solution
http://www.bootply.com/SeRZCS7L09
you can use the twitter bootstrap 3 for this. Because you can specify the width in your own CSS and then use the grid system to supply the rest. Have a look through the get started section o bootstrap 3.
if i was going to make this i would do the following:
HTML skipped the labels etc juut a brief example
<body>
<div id="login-form">
<h2>Login</h2>
<input type="text" class="form-control" name="password/>
<input type="text" class="form-control" name="username/>
</div>
</body>
Link my Bootstrap to get the benefits of form-control
then in my CSS sheet:
#login-form{
width: 400px;
margin:0 auto;
//etc etc etc
}
This is very basic but i feel there is no need to repeat to much as you will be able to look through the bootstrap documentation and it shows you in depth how to use the grids/columns/rows etc. using these you can easily create that look! i use it for a lot of projects.
Bootstrap 3
the darkened background could be achieved by a div with black background with maybe half opacity or less, you would make this appear via transition or JS. CSS3 Opacity
Basically you can do a modal box with the classes: modal, hide. And splitting modal box content in three different sections if you want: header, body and footer.
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p><button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
Register
</div>
</div>
For details you can check out:
Login form in modal
I am seeing an issue when viewing a website in IE8 (but which works fine when using the emulation mode in dev tools in IE 11).
In modern browsers I see what I would expect:
But in IE, I see the following:
I've added the html5 shim and respond,.js as suggested in the docs, and I've tried wrapping the controls in divs to manually size them, but I end up with gaps between the inputs that look pretty bad. Is there something obvious that I'm doing wrong here?
<form class="form-horizontal" role="form" style="max-width: 500px">
...
<div class="form-group">
<label class="control-label col-sm-2">Phone</label>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="SearchMethod" value="2" class="radio-inline" />
</span>
<input type="text" id="phone" class="form-control" placeholder="Phone" />
<input type="text" id="phoneExt" class="form-control" maxlength="4" placeholder="Ext" />
</div>
</div>
Your input group is invalid since it has two text input form-controls. Per the docs:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
So you'll need to either hack together some custom styles, or restructure your form.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
bootply (http://bootply.com/99121#)
I needs " text - inputbox - search button " placed in-a-row inline, but it shows vertical and strange view.
just change this HTML :
<div class="btn-group">
<input name="stx" class="form-control" required="" type="text" size="15" maxlength="15" value="" itemname="search">
<button class="btn btn-primary">search</button>
</div>
to this:
<div class="btn-group">
<input name="stx" class="form-control" required="" type="text" size="15" maxlength="15" value="" itemname="search">
</div>
<button class="btn btn-primary">search</button>
DEMO