Thanks again for anyone who can help me with what should be a seemingly easy problem! I just can't figure it out for the life of me. I am creating a sign up page that includes two areas. I want these input areas to be inline with an icon that comes up while it is checking the database.
I have everything setup and I think my html is proper. I have created a row that contains both the input box and the whirly loader I got from the internet. The only problem is when I run it the whirly loader is way too big and is not totally in line with the input box.
here is my html:
<div class="row">
<div class="col-xs-10">
<input type="text" class="form-control" id="usernameOrEmail" placeholder="Shattr Username or Email">
<label id = "usernameLabel"></label>
</div>
<div class="col-xs-2">
<div class="whirly-loader" id="usernameSpinner" style="display: none;">Loading...</div>
</div>
</div>
I then go in and point to the "whirly-loader" class, but nothing changes no matter what I set my width and height to. This may be too weird a question but if anyone has any suggestions that would be awesome. Here is my css:
.whirly-loader{
height:10%;
width:10%;
}
Your animation icon is set as a background to the whirly-loader selector? If yes, then just add background-size: cover and it should fit defined height and width.
BTW. Always paste your fiddle. It's easier to help.
Related
I am implementing a responsive html page. I cannot reproduce the case on fiddle, so I published the page on "www.000webhost". Here is the link : https://test1flamant.000webhostapp.com/. Please use it on Firefox and let me know if this link does not work
The issue is that the text "Find your home" on the first page is not any more centered on the first image under an innerWidth that is approximately 695px. The text, under this limit, remains with a constant left margin.
I have the same issue with the form on the below second image under approximately the same limit.
To help you, I displayed clientWidth and innerWidth at the top of the page. Please don't pay attention to the other details on the page, as I am concentrating only on this issue.
Here is the relevant portion of html portion of code relative to this issue
<div class="homePageImage1" style="background-size:cover;">
<div class="position2 horizontal-center textAlignCenter lineHeight117 pinyonscriptregular120dieseFFFFFF">
Find Your Home
</div>
</div>
<div class="homePageImage2">
<div class="position3 horizontal-center" [formGroup]="searchFormGroup">
<div class="position4 border2 textAlignCenter backgroundwhite poppinsextrabold14diese372300">
Search
</div>
<span class="position5 width100percent" >
<input class="floatLeft dimension1 border3 poppinsregular16diese372300" type="text" placeholder="Dans quelle ville ? Quartier ?" formControlName="ville">
<input class="floatLeft dimension2 border4 poppinsregular16diese372300" type="text" placeholder="Votre budget max" formControlName="prixMax">
<div class="floatLeft dimension3 textAlignCenter lineHeight48 backgroundPrimary poppinsbold12diese372300">SEARCH</div>
</span>
</div>
<div class="position6">
Advanced search
</div>
</div>
If you only want the text "Find Your Home" to be always centered, you can first remove the "position: relative" property from the ".homePageImage1" class.
And add the #media rule to enable the property only if the window width is higher than a certain width (I found 1006px on my side).
It will look like :
#media (min-width:1006px) {
.homePageImage1 {
position: relative;
}
}
So the text will be centered according to the windows under 1006px.
I've got a problem as in this Question
CSS Two Columns of Lists - responsive merge into one column
The problem with this solution is when the items have different heights. Put in a <br> and you see what i mean. I am looking for a solution where the side by side cells have automatically the same height.
I created a fiddle that shows how the result should look like.
http://jsfiddle.net/w4n9da10/
Is it somehow possible to create this without using JavaScript or doubling the markup, like i did in my example?
Thanks in advance
Utilizing a responsive framework such as Bootstrap will make your life a whole lot easier when it comes to doing something like this. However, I understand, sometimes it is not permitted by the client's environment or other restrictions. But, the concept remains. So all you have to do is use the browser inspector to see which classes are being used and their properties and use those only. But again, if you can use bootstrap, I recommend it.
I am attaching a demo HERE
And here is the code
<div class="wrapper">
<div class="col-md-6 col-xs-12">
<div id="1" class="col-md-12">1</div>
<div id="2" class="col-md-12">2</div>
<div id="2" class="col-md-12">3</div>
</div>
<div class="col-md-6 col-xs-12">
<div id="3" class="col-md-12">4</div>
<div id="4" class="col-md-12">5</div>
<div id="2" class="col-md-12">6</div>
</div>
</div>
Good luck
I am using bootstrap (Twitter-Bootstrap 3) in a quiz style application and I use bootstrap buttons for the answers of the quiz. My problem is that sometimes the answers are quite long, and instead of wrapping the text to the width of the col that the buttons are placed in, the text just keeps going in one line and goes over the col and the width. Is there an easy way to fix this (Note that I canot define set widths as the length of the answers change)? Showing the code is a bit difficult, as it uses javascript to populate the answer buttons, but I will show a screen shot and the resulted populated HTML (after the javascript has populated the question and answers):
Here is the resulting HTML:
<div class="row">
<div style="float: none; margin: 0 auto;" class="col-sm-7">
<div class="panel panel-default">
<div class="panel-heading">Quiz 4 - This is the quiz 4 description</div>
<div class="panel-body" id="question" style="display: block;"><font color="#AAAAAA"><strong>Code: </strong>80559</font><br><br><font color="#888888"><strong>Instruction: </strong>Based on the provided correct answer, select the answer choice that correctly gives the required evidence from the text. Once the timer runs down you will be forced to move onto the next question.</font><br><br><div class="alert alert-info"><strong>Question: </strong>express a negative sentiment in humorous terms</div></div>
<div class="panel-footer clearfix">
<div class="row">
<div class="col-sm-1" id="submit"></div>
<div class="col-sm-11" id="answers" style="display: block;"><button onclick="submitAnswer(22)" class="btn btn-default btn-sm">negative sentiment: You couldn't pay me to watch that....that's how I feel / humorous terms: beach reading without the beach, airport reading without the airport...</button><br><br><button onclick="submitAnswer(23)" class="btn btn-default btn-sm">negative sentiment: they are just the wrong amount of time / humorous terms: they don't have the compressed energy of a short story</button><br><br></div>
</div>
</div>
</div>
</div>
I would think that bootstrap should be wrapping the button text within the div automatically, but it doesn't. I have been looking for solutions but I haven't been able to find anything that covers this problem particularly. Any help would be appreciated. I don't want to use <a href='#" ...> because it is important that the page not reload or be redirected when the button is pressed. Only the onclick function submitAnwers() should be called with no redirect.
The btn class in Bootstrap 3 contains 'white-space:no-wrap;', so the buttons will not wrap on mutliple lines. You can change this using a simple CSS override like:
.btn {
white-space: normal;
}
Demo: http://www.bootply.com/90082
This is an old question with an old answer. The answer solves the problem, but you can get ugly word breaks, where the button breaks in the middle of a word, seemingly wherever it wants to.
My answer forces the button to wrap between words, providing for a nice, clean, and responsive button.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
Click Here
Hope it helps someone in the future.
Thanks in advance for any help you can provide! I created a map tool that seems to work well; I get a map, a draggable route, multiple waypoints, and a complete, dynamic directions_panel. I want users to be able to print this webpage and get the map_canvas and the directions_panel. In testing, the print preview used to include the map_canvas, but somewhere along the way, the map_canvas stopped appearing when I print the webpage. How can I get it to show up when I print?
Here's my HTML.
<div id="map-route-page">
<div id="map_canvas"></div>
<div class="clear"></div>
<div class="map-buttons">
<input type="submit" id="showform" value="Edit Map">
<input type="submit" id="printpage" value="Print this Page">
</div>
<div class="clear"></div>
<div id="directions_panel"></div>
</div>
Update: Messing around with the CSS, I found that the map becomes printable if I remove the "position:relative" and "-webkit-transform: translateZ(0);" from the #map_canvas. Unfortunately, this makes the whole printed page look strange (map is too large and out of position.) Is there another tag or CSS I should add to fix this?
Phew! After a ton of trial-and-error, I found a solution. While I had specified the width and height of my #map_canvas in my main.css file, I had not specified these attributes in my print.css file. I did not edit either the position:relative or the -webkit-transform attributes in order to make this work for me.
I have always struggled designing css forms, I can never get the input and label side by side. Do you have any words of wisdom that may help me.
I usually use a 10px margin on the bottom but cannot get them aligned
My Common form:
Name:
Email:
Phone:
Message:
text area
I know I'm going to get backlash for this from people who think that the only possible way to do things is with pure CSS, divs, spans, etc. However, your form is tabular. You have a column of titles, and a column of input fields. In this case, because of the tabular layout, a valid solution could be tables.....GASP!
Tables are not valid for page layout...let me repeat that again, tables are not valid for layout. However, you've got an element of a page, you're not doing a full page layout. You can easily use <th> elements to style the labels for the inputs, which is quick and simple. Overall, the table (tabular) solution would be less verbose than many of the CSS layouts given, which from a pure HTML standpoint is a win. It will continue to work and layout properly even when the server gets backed up and can't load the external CSS document. To all those who believe that tables are never ok, let me remind you that this solution will validate with W3 100% of the time provided your table is properly structured. And it's far more cross browser compatible, with no box-model issues in the "crabby" legacy browers. Certainly continue to progressively enhance with CSS as is best practice.
Theory and practice, especially in the web world, are two entirely different things. In theory, all of us should be producing 100% HTML5/CSS3/Semantic/SEO Optimized...blah blah blah. In practice, theory only goes as far as the first customer complaint. Progressive enhancement is key to survival. When a webform breaks in a big corporate setting, money is lost and people get fired. For that reason, the International Bank I recently did work for had requirements that demanded all its webforms were tabular (assembled with tables) It's hard to argue with a portfolio of sites whose users generate the company hundreds of millions of $$$ annually.
<style>
ul.anyclassname{
padding:0;
}
ul.anyclassname li{
list-style-type:none;
clear:left;
}
ul.anyclassname li label{
width:300px;
float:left;
}
.inputs{
float:left;
}
</style>
<form>
<ul class="anyclassname">
<li>
<label>Name:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Email:</label>
<div div class="inputs"><input type="text"></div>
</li>
<li>
<label>Phone:</label>
<div div class="inputs"><input type="text"></div>
</li>
</ul>
</form>
I usually do this:
<div>
<label for="txtname">Name:</label>
<input type="text" id="txtname" name="txtname"/>
</div>
<div>
<label for="txtEmail">Email:</label>
<input type="text" id="txtEmail" name="txtEmail"/>
</div>
<div>
<label for="txtPhone">Phone:</label>
<input type="text" id="txtPhone" name="txtPhone"/>
</div>
etc...
Then with my CSS:
label { width: 100px; display: inline-block; }
Something along those lines. Nothing fancy, but they are side-by-side and with the surrounding div you get a block level element to give you a line return after each pair.
I wrote a complete form in this answer: how can we make forms like this with css & html? . It has the html markups and the css classes you need to start.
The code is also in a fiddle here: http://jsfiddle.net/vSqR3/64/ (Now with the nice addition of the for attribute, thanks Kyle!)
You will find in that link not only how to put one markup next to the other, but how to set sizes and borders for each.
I strongly suggest you to play on the jsfiddle.net website. You'll be able to modify and test immediately all your changes.