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
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
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>
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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
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
Closed 9 years ago.
Improve this question
I want to add a tooltip on my code:
<a class="fa fa-facebook-square"
href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<span class="hidden">Facebook</span> </a>
This code should work. Please let me know if it does not.
<a class="fa fa-facebook-square"
href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;
data-toggle="tooltip"
data-placement="right"
title="This is a tooltip!"">
<span class="hidden">Facebook</span> </a>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am very new to CSS, and was wondering how to apply a class to a button.
For example, suppose I had this class:
.myclass
{
background-color: #ff0000;
}
How would I properly apply that to a button?
I am really new to CSS, and appreciate your help!
Simply set the button's class attribute to your CSS class:
<button class="myclass">Button text</button>
If you use <button>, you can do <button class="myclass">Hello world</button>
If you use <input />, then it is
<input name="hello" type="submit" value="Hello world" class="myclass" />