I have set up a Google CSE search box and search results, simply as two separate div.
<div id="search-box">
<div class="search-entry">
<gcse:searchbox></gcse:searchbox>
</div>
<div class="search-results">
<gcse:searchresults></gcse:searchresults>
</div>
</div>
I want the results div to be hidden ( = not visible and not taking up any space on my page), until search results are available. Preferably just via css, and "cross-browser/platform").
I have searched this forum for a solution - without success. However, the "Ask Question" page of this forum (https://stackoverflow.com/questions/ask/advice?) appears to do exactly what I want, as follows:
<div class="ask-advice-search-container">
<input type="text" value="" class="search-title" />
<input type="button" value="Search" class="search-button" />
<div id="question-suggestions">
</div>
</div>
Unfortunately, I can't figure out the hiding-unhiding "trick". The associated css does not seem to do any (un)hiding...
I'd appreciate any help & insights!
Thanks in advance,
Fred
Related
The project I have been working on has an HTML file that looks like this:
<div id="spn-service-provider-list">
<div class="spnsearch">
<i class="spnicon spn-icon-search"></i>
<input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
</div>
</div>
I want to move spnsearch independently of the parent div, hence, wrote it outside the parent div, as:
<div class="spnsearch">
<i class="spnicon spn-icon-search"></i>
<input type="search" ng-model="spsearch" id="spsearch" placeholder="Search Providers" name="spsearch">
</div>
<div id="spn-service-provider-list">
.............
............
</div>
When I inspect the page in the browser, no change takes places. That is, spn-service-provider-list still contains the search box. Can someone please explain to me why is this happening? I am a beginner with UI development, so please bear with me if the question is elementary. Thanks!
I created a website called diditdrop.com. Within the website there is a form where the user enters a number and then submits the number. On the desktop version of the site, the form works great. On the mobile version, the form is not responsive (i.e. i tap on the screen and nothing focuses or pops up. Additionally, the button underneath it doesn't work either).
I'm not sure what to do. I've been stuck on it for a few hours now. I've pasted a snippet of my code below, however, it doesn't look too strange. If someone could take a look at my site, and then recommend a better way of implementing, I would sincerely appreciate it.
<form class = "form-inline" action="https://formspree.io/x#gmail.com" method="POST">
<div class= "form-group">
<span>
<input type="tel" id = "form1" placeholder="digits here" tabindex="1" class="boxed form-control" name="number"/><br>
</span>
<span>
<input type="submit" id = "buttonmove" class="btn boxed" value="get dat new new"name="number" />
</span>
</div>
</form>
Add the following code it will work:
add the style="float:left" to the image like below
<div id="pictureface" class="col-lg-6">
<img style="float:left" class="img-responsive" src="http://static.stereogum.com/uploads/2016/09/CtUYD4uWYAIB1MH-1475280486.jpg">
</div>
I'm still young when it comes to coding, and I've heard multiple things about organization. Some use section's and some use div's, some use a div for buttons, other use the inputs in css to change it. As someone who likes to do his code clean and simple to understand, yet correct, this sometimes bothers me.
What is the best way to make a login form, with the for example the maximum of remember me and a button, with a text under saying "You don't have an account yet? Register here".
Should I use divs, sections, or both? What are the orders of the divs/sections? Container, Login, buttons?
Example:
<div class="container">
<div class="login">
<form>
<input text>
<remember me>
<div class="buttons">
<input submits>
</div>
</form>
</div>
</div>
Is this correct? Is there a way of doing it more organized?
What the most correct, used, simple and clean way to make it?
Bootstrap makes it really easy to do forms w/ minimal styling, with the exception of font sizes, colors, etc, but they add extra elements, like the form-group so you don't have to add extra CSS. I like to always use article, header, section, footer, etc whenever I can.
I understand that div is basically a "whatever" element. Bootstrap uses divs throughout their examples, but just b/c it's a div on THEIR example, doesn't mean you cannot use something else.
It also depends a whole lot on your layout. Perhaps you have the login on one page, but you have background images, centering the login form, etc, so this will determine which types of elements that you use.
<div id="login">
<div class="form-group">
<input type="text" class="form-control" name="username" />
</div>
<div> class="form-group">
<input type="password" class="form-control" name="password" />
</div>
<div class="form-group form-inline">
<input type="checkbox" />
<label>Remember Me</label>
</div>
<div class="form-group">
<input type="submit" value="Login" />
</div>
</div>
This could easily be turned into
<article id="login">
<section class="form-group">
<input type="text" class="form-control" name="username" />
</section>
<section class="form-group">
<input type="password" class="form-control" name="password" />
</section>
<section class="form-group form-inline">
<input type="checkbox" class="form-control" />
<label>Remember Me</label>
</section>
<footer class="form-group">
<input type="submit" value="Login" />
</footer>
</article>
I tend to like the latter, but it's your decision really.
It all depends on 'what you use' and 'what you want to end with'.
If you want to add a complex css stylesheet or most of the work will be done on the server side, then you should better have a detailed composition.
In another hand, if you plan to use javascript and few css, the clearest the best.
To me, the login part (or its container, ie a header) of your page should be a section. The divs should be used to organize the inner-elements.
"The tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document."
[http://www.w3schools.com/tags/tag_section.asp]
I depends really basicly what you can handle better.
I am working on an app that uses Bootstrap. I have a column along the right side of the page (similar to the "asked", "viewed", "hot meta posts", "jobs" area on this question's page). In that column, I need to add some controls that will allow the user to enter a range of values. I want these controls to fill up the available space. They need to look something like this:
[textbox] - [textbox]
start finish
In an attempt to create this, I have the following:
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" />
</div>
<div class="col-xs-1">
-
</div>
<div class="col-xs-5">
<input tpe="text" class="form-control" />
</div>
</div>
This creates an ugly looking page. The reason its ugly is because the control doesn't fill the whole width (because only 11 of the 12 available columns are used). In addition, too much space is given to the column with the dash. For those reasons, I then tried the following:
<ul class="list-inline">
<li><input type="text" class="form-control" /></li>
<li>-</li>
<li><input type="text" class="form-control" /></li>
</ul>
This approach took up the available width. However, my textboxes are stacked on top of each other now. Is there a way to accomplish what I'm trying to do with CSS? If so, how?
Thank you!
Try the following code i hope it will solve the issue,
<div class="input-group">
<input class="form-control" type="text" placeholder="Start">
<div class="input-group-addon">-</div>
<input class="form-control" type="text" placeholder="Finish">
</div>
Im designing a website using Visual Studio 2012 ASP.NET MVC4
And it’s supposed to be like this
but it turned out to be like this
![default2][2]
I need to align the logo with the Username & Password fields and those fields should have space in between. Btw, I'm using the latest version of Twitter Bootstrap as my CSS. Thanks for helping out!
Also, these are my codes.
<header class="navbar navbar-inverse" role="banner">
<div class="container">
<img src="#Url.Content("~/Content/img/Logo-Sample.png")" alt="Image" id="logo" class="img-responsive"/>
<div class="pull-right">
<form class="navbar-form pull-right" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
</div>
</div>
</header>
Update:
I've applied Ryan's suggestion the "float stuff" and the logo is now inlined with the input fields.
But the input field went upward instead of downward. Any suggestions for this? Thanks!
Check out Bootstrap's docs for Inline forms. I believe this is exactly what you are looking for.
As a side note, check out TwitterBootstrapMVC. Your code might look cleaner with it.
So it looks like your logo and login sections are both block-level elements. They need to be inline-block OR one of them needs to be floated left or right as appropriate.
Insofar as the space between elements for your login block... I'd do a css selector to match the header login input elements and add some margin-right to them.
HTML formatting is very finicky sometimes. However, open up the markup for the asp file and put a space between those input areas' tags or put one trailing after the word in the placeholder. For the being slightly too high, I forgot the word I am looking for, but its something a bit like a table, make them both in slots for that row. Look around for what Im attempting to say as I just completely forgot the term.
(if I remember Ill come back and edit this)