I am trying to append a Search button to an input search field which is not working properly.
I am not able to trace the error as I am new to bootstrap.
I have set up an example on jsFiddle
I am trying to make it work in an asp.net webform based website
Below is the code snippet
<div id="search-wrapper" class="span3 offset5">
<div class="span3 input-append">
<asp:TextBox ID="txtSearch" placeholder="Search" runat="server"></asp:TextBox>
<asp:Button ID="btnSearch" CssClass="btn" runat="server" Text="Go!" />
</div>
</div>
Go Button doesn't append properly with the input field. as shown in this example
I have made some minor changes to css to make it work with max-width:1000px.
Rest is almost same. I even tried to use botstrap css directly from CDN but it doesnt make different to the button
UPDATE:
I tried changing .btn css
.btn {
display: inline-block;
*border-left: 0 none #e6e6e6;
border-right: 0 none #e6e6e6;
border-top: 0 none #e6e6e6;
border-bottom: 0 none #b3b3b3;
display: inline;
padding: 4px 12px;
This line to padding: 6px 12px;. This minutely fixed it in FF but other browser it make problem worse.
Works here, a bit of a bad design: http://jsfiddle.net/azF8w/54/
<div class="input-prepend">
<span class="add-on"><button>Go</button></span>
<input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
Related
I have used a asp:RequiredFieldValidator to validate a textbox. It works fine. But i need to change the position of the error message.
<div class="form-group">
<label for="txtGarageName" class="col-sm-2 control-label">Garage Name</label>
<asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control" Width="50%" ID="txtGarageName"></asp:TextBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server"
ControlToValidate="txtGarageName"
ErrorMessage="Garage name is a required field."
ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
When i use this error message display starting from directly under the label.
What i need to do is get the error message to display either in front of the text box or align it with the TextBox start point which means to alighn it more to right. I have tried using a css code as well as putting
margin-left=""
which i saw as solutions in the internet. Neither worked properly.
Using the col-md-6 or span6 CSS class for your TextBoxes will work for you
<asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control span6" ID="txtGarageName"></asp:TextBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server"
ControlToValidate="txtGarageName"
ErrorMessage="Garage name is a required field."
ForeColor="Red">
</asp:RequiredFieldValidator>
Use the grid system
http://getbootstrap.com/css/#grid-example-basic
If you prefer a simple (non bootstrap) solution you should still use some placeholders for better formatting. An example that i found (not mine)
http://jsfiddle.net/dqC8t/1/
#wrapper {
width: 500px;
border: 1px solid black;
overflow: auto;
}
#first {
float: left;
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
margin: 0 0 0 302px;
}
I want to create a user menu, that looks like this:
When I create such a menu with bootstrap, its full width and not aligned under the button.
So it looks like this:
So how could I create such a menu with bootstrap?
I can't believe what I'm going to write, but you can't assume people knows your source code, you have to share what have you done. When you share the code, the community will be please to help. You can read this is real important: How do I ask a good question?. Don't think I'm a guy who thinks he know it all, you should check my reputation, at the beginning I asked a lot of similar questions to what are you asking.
Regarding your question. This article can be a lot of help. I'm sharing a small demo on how it looks.Demo: http://jsbin.com/figak/1 the design and everything is ugly, but it has what you want.
This is basically what I added. A form to the navbar-right.
I hope this helps you.
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</ul>
</li>
</ul>
Bootstrap is not enough for such case. Although it's really awesome framework, it won't do everything for you. My advice would be to read about javascript and client's side DOM manipulation.
In your case, I'd create special container with the form in it. Add then bootstrap's class hide to it so it won't appear at start and bind some action (click or hover) to icon which should trigger the menu show up.
I suggest to use jQuery
I work with Foundation, never with Bootstrap, but if all else fails you can make it absolute positioned:
.menu { position: absolute; top: 40px; left: 40px; width: 300px; }
...or you can keep it relative positioned (assuming that's what it is):
.menu { position: relative; width: 300px; margin-left: 40px; }
Change .menu to whatever the actual class is and you're good to go, you may have to override some functions. If the bootstrap class is still being applied you can add !important to the end of your class like so width: 300px !important; and it will work. Just keep in mind that should be last resort.
You can 'inspect element' in any new browser to see the code being used by bootstrap and then override those classes in your css file.
You can use media queries to keep the width at 100% on small screens but make it 300px on screens larger than 400px like so:
#media only screen and (min-width: 400px) {
.menu { position: relative; width: 300px; margin-left: 40px; }
}
Hope this helped!
I am working on a new homepage at http://www.bkd.com/new-test-2.htm
We have a search bar that was previously built by a different developer who is no longer here.
I am trying to make the search bar further to the right of the screen but also still be responsive. I am not sure what I am doing wrong. I have tried a lot of different things and when I make the browser smaller it just jumps below the navigation. This is what I do not want to happen.
Here is the coding for the whole light grey bar:
<div class="clear"></div>
<div class="span-8">
<a class="left" style="padding: 0px 0px 0px 0px; margin-left: 80px;" href="/">
<img src="/images/common/header/logo.png" border="0"></a> </div>
<div style="margin-top:25px;" class="span-0 last">
<form action="/search/">
<input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">
<input type="text" name="zoom_query" value="Search" style=" background- image:url(/images/common/search/search-field-new.png); background-repeat: repeat-x; margin: 0; line-height:26px; height: 26px; width:200px; color:#666; background-color:#fff; border:none; outline:hidden; border-radius: 7px; float:right; padding: 0px 0px 0 10px; margin-left: 0px;" onFocus="this.value=this.value.replace(/^Search$/, '')">
</form>
</div>
Can anyone tell me what I am doing wrong or a better way to achieve what I am trying to do. Please let me know if I need to provide any more information.
Thank you in advance!
-Marcy-
The search bar is breaking down because the marker icon beside it has an unnecessary margin of 220px, giving the whole search div a width of 462px which causes it to break down on lower screen size.. change the following
<input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">
to
<input type="image" src="/images/common/search/search-icon-new.png" style=" float:left; outline:none" alt="Search">
to move the search bar to the right, apply float:right to the container div as follows:
<div style="margin-top:25px; float:right" class="span-0 last">
i suggest using external stylesheets instead of applying inline style, external stylesheets are likely to be cached, hence loading might become faster on consecutive visits. Also it makes your html more readable as well.
I've created a few pages in Firefox and everything was looking as it should. Made a quick flip to Chrome and Safari and noticed that my opt-in form in the header of this page is not displaying as it should. I would like for the entire opt-in div to be inside the header div. From what I can tell it is in the header div in Firefox, but pretty much every other browser shows it below the main navigation.
Here is the CSS for the header and the opt-in form that should be in it:
.header{height: 302px;min-width: 100%; background-color: #265f8b;
margin: 0 auto;}
.opt-in {height: 280px; width: 800px;background-color: #c7e877;float: right;
margin-right: 200px;margin-top: 10px;border:5px solid #8db530;
border-radius: 10px;position: relative;}
Here is the HTML:
<div class='header'>
<img style='border: 1px solid black;' src='images/main-logo.jpg'></img>
<div class='opt-in'>
<p>Enter your name and email below to get
<span style='font-weight: bolder;'>Free Instant Access</span> to the most comprehensive
guide available on how to ..</p>
<p><span style='font-weight: bolder;'>Over 10,000 people</span> have enjoyed my eBook and receive
a weekly newsletter with exclusive tips!</p>
<table>
<form method='post' action='opt-in-form.php'>
<tr><td><input type='text' name='name' value='Enter Name...' /></td></tr>
<tr><td><input type='text' name='email' value='Enter Your Email...' /></td></tr>
<input class='opt-in-button' type='image' src='images/opt-in-button.png' alt='Submit Form' />
</table>
</form>
<img class='book-cover' src="images/book-cover-new.png"></img>
</div>
</div>
You'll notice that I have included it in the header div and have a float right on it.
http://fairchildwebsolutions.com/packattack/index.php
The top left logo needs a float: left. that should solve the problem.
Float the logo img left.
float:left
Also specify a width for the img element too. width:auto will do also.
There are a million issues with sprites and IE8 i've read about online, however, they all seem to deal with the issue of the sprites not showing up at all. Mine is showing up, its just showing the wrong piece of the sprite. It works fine in all other browsers.
Heres the CSS
div.searchForm input[type=text] {
border: 0;
padding: 0 10px;
margin: 0;
background: url(../img/sprite.png) 0 -125px no-repeat;
background-size: 115% 235px;
width: 600px;
height: 30px;
float: left;
font-size: 12px;
color: #fff;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
and the html:
<section id="secondary6">
<h1 class="hidden">Search</h1>
<div class="clearfix">
<div class="grid_4">
<nav class="grid_2 secondary">
<h1 class="hidden">Search Secondary Navigation</h1>
</nav>
<div class="searchForm">
<input type="text" placeholder="search">
<input type="button">
<input type="submit" class="hidden" >
</div>
</div>
</div>
</section>
basically you click the search button, and it displays a search bar that should be hidden otherwise. Like I said it works in other browsers.
IE8 doesn't support background-size (see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility), so that's what you'll have to work around. Depending on your needs, you might try IE7.js (which works with other versions of IE) or a conditional comment to adjust the position of the image for IE8. Or, just make sure your raw image doesn't need to be re-sized.
What happens when You assign class or ID to particular text input field?
for example..
div.searchForm input.classInput {
/* css code here */
}
Also ...
..where is element form tag wrapper, form name, form action ?
The input fields should not reside in a document on a way You presented.. without form tag..
Which software actually generated this code for You?
Is it dreamweaver?
Basic and proper example of valid HTML input form ..
<form id="formID" name="formName" method="post" action="#">
<input type="text" name="textUno" value="" />
<input type="text" name="textDue" value="" />
<button type="submit" name="do_processing"> Go! </button>
</form>