I am trying to create form like typeForm.
You can find example here https://showroom.typeform.com/to/DYJEHG
I sucessfully implemented design but problem is i want to focus li which comes in vertical center of page.
I tried everything but fails, There is no tutorial on google how we can do this.
Please help.
If i am not wrong, you want the form field to be in the center(horizontally and vertically) and to be full page, right?
Here's a working example of what you might be looking for: http://codepen.io/anon/pen/ZewEMM
In that case,
To focus on one input field per scroll:
Use this small plugin called fullPage.js. This will allow you to have focus on one input field per scroll. It's really easy to use, check it out!
Here an example of your form with fullpage.js:
<form method="post" action="">
<div id="fullpage">
<div class="section formfield">
<div>
FULL NAME<br/>
<input type="text">
</div>
</div>
<div class="section formfield">
<div>
EMAIL<br/>
<input type="text">
</div>
</div>
<div class="section formfield">
<div>
MESSAGE<br/>
<input type="text">
</div>
</div>
</div>
</form>
Notice that, for ease of use and to avoid confusion, i have not used <li>.
You can also control the colors of each field section easily via JS:
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f0f0f0', '#cccccc', '#f0f0f0'], // section colors
css3: true,
scrollingSpeed: 1000
});
});
To center the form field vertically and horizontally:
Use Flexbox by wrapping the form field elements inside a div. Here's a sample CSS code:
.formfield > div {
display: flex;
align-items: center;
justify-content: center;
}
Let me know if this helps, and also feel free to ask if you find anything vague in my answer.
Related
I am trying to build a toolbar with search functions in angular.
For example :
and this divisions are like:
<div class="toolbar">
<div class="search">search field</div>
<div class="otherElements">
<div class="search-btn"><button>search</button></div>
<div class="bookmark">bookmark_icon</div>
<div class="otherIcons">other icons</div>
</div>
</div>
Here the .search will remain hidden. If i click on search-btn then .search will show up which will cover the whole toolbar. I can hide the div on button click by using [hidden] but the problem is .search doesn't cover the whole place.
Now it is something like :
if I click the search button :
what I want is :
I want the search bar cover the whole .toolbar if search button is pressed.
I have less knowledge of css
Here is a minimal example
Try using Angular ngIf instead of using css classes when trying to show or hide elements depending on some condition, like this:
<div class="toolbar">
<div class="search" *ngIf="!searchItem">search field</div>
<div class="otherElements" *ngIf="searchItem">
<div class="search-btn"><button>search</button></div>
<div class="bookmark">bookmark_icon</div>
<div class="otherIcons">other icons</div>
</div>
In your example, you would also have to put a width 100% on the .input element to make it cover the whole site, like this:
input: { width: 100% }
It seems my class is not working in my JS code. I have attempted a few ways so I'll show you what I have done.
<h2 id="firstbutton" class="firstbutton" type="button">Let's go!</h2>
This method let me style, but a button was definitely not visible.
My other way was replacing this with a "button" tag, but this did not let me style the button although I used the class.
<button id="firstbutton" class="firstbutton"> Let's go!</button>.
This way actually gives me a button, but it was tiny and was not very helpful. Remember in my CSS code I used both of the two methods:
.firstbutton {text-align: center;}
And my second one:
#firstbutton {text-align: center;}
I hope I gave enough information as reference and this question does not closed. I am trying to think of another way.... renaming perhaps?
Thank you very much!!
Your code is generally correct, cut there are several things you need to consider.
If the parent tag of your <h2> is <body> tag, then this .firstbutton {text-align: center;} code will work.
But if the parent tag of your <h2> is not <body> tag, you have to align the parent to the center. Example:
if the parent code is <div>, like this:
<div>
<h2 class="firstbutton" type="button">Let's go!</h2>
<button class="firstbutton">Let's go!</button>
</div>
you have to make it like this:
<div align="center">
<h2 class="firstbutton" type="button">Let's go!</h2>
<button class="firstbutton">Let's go!</button>
</div>
Or if you want to use CSS, you can read this great article.
Let me know if this helpful
You can make a button in two ways: using <input type="button" value="Content!"> and <button>Content!</button>.
Styling the buttons using classes and ids as you are doing works as normal.
However, if you are trying to center-align the button, you have to put the styling on the parent element, like so:
.parent {
text-align: center;
}
input, button {
color: red;
}
<div class="parent">
<input type="button" value="Content!">
<button>Content!</button>
</div>
I'm not able to change the height of the div when showing the error messages after submitting the form so that there is no overflow. I can set the height property to 1100px so that there is no overflow anymore but it looks quite ugly having so much white space.
I created a JSFiddle because it is a lot of code and since most of the code is relevant for the problem it is quite difficult to reduce it.
<div class="contact-form-wrap">
<div class="contact-form-wrap-left">
<div class="col full-width"><ul class="error-message"></ul></div>
</div>
<div class="contact-form-wrap-right ">
</div>
</div>
I tried to set the height to auto with a min-height of 760px. The div still does not grow. I changed the display property of contact-form-wrap-left to display: inline-block but since float is used this seems not to work.
https://jsfiddle.net/ArisMartinAccola/ud8x5e9o/
I hope someone can help me.
Change place of divs like this
<div class="col full-width"><ul class="error-message"></ul></div>
<form action="config.php" method="post" class="contact-form">
After that set col full-width with position relative and contact-form to relative as well. Of course, use create ID's for both of those
This is what my webpage looks like on my computer
What I am trying to do is:
move my content (buttons, table, dropdown) to the center of the webpage (dynamically and automatically depending on the screen size).
Have the webpage fit properly on mobile browsers.(i.e. have the content take up the majority of the screen space)
I am a bootstrap and css noob. The following is a jsFiddle with similar code to what my webpage has: https://jsfiddle.net/zpvrspaq/18/
How would I go about just centering one of the rows, such as:
<div class="row no-gutter">
<div class="col-xs-1"><h5 class="text-center">Your grade</h5></div>
<div class="col-xs-1"> <h5 class="text-center">% of grade</h5</div>
</div>
<div class="row no-gutter">
<div class="col-xs-1"><input type="text" class="marks form-control"></div>
<div class="col-xs-1"> <input type="text" class="grades form-control"></div>
</div>
Anything to point me in the right direction would be great.
Try not to rely too much on Bootstrap's rows and columns for sizing things like tables. col-xs-[number] should really be limited to determining the way elements line up or break onto new lines when the viewport is expanded or shrunk.
I've given #table-of-grades a display type of table and auto margins to center it, and added a new class, .table-cell, to float the cells of the table within the width of #table-of-grades
#table-of-grades {
display: table;
margin: auto;
}
.table-cell {
width:50%;
float:left;
}
I also moved everything within the #table-of-grades container, so they will fill the width of that element when the viewport is shrunk or expanded. Also notice the change in markup, i.e. I removed the rows and columns in the table itself to create a layout that doesn't rely on bootstrap's rows and columns.
https://jsfiddle.net/Lzvz60u1/
Try putting the container in a and then use a margin-left:auto; and margin-right:auto; to center the div
DEMO
It would be very simple using flex box.
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>
I am looking for the proper, simple, small code to do the following things:
Click on Element with Class Applied to it.
DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)
DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)
<div class="sitesection">
<p class="expand-one">Click Here To Display The Content <img src="images/arrow.png" width="5" height="7" /></p>
<p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.
I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.
$('.expand-one').click(function(){
$('.content-one').slideToggle('slow');
});
Demo: http://jsfiddle.net/Q4PUw/2/
I was looking at this and wanted a collapsible div that was already styled for me. Then I realized what I wanted was a single pane jquery-ui accordion.
<div id="collapse">
<h3>Collapse and Expand</h3>
<div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
collapsible: true,
active: false
});
</script>
http://jsfiddle.net/MB4ch/1/
I wanted to do this with multiple divs, each with their own trigger. Building on AlienWebguy's answer above:
HTML
<div>
<p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
<p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
<p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
<p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
Javascript
$('.expand').click(function(){
target_num = $(this).attr('id').split('-')[1];
content_id = '#expandable-'.concat(target_num);
$(content_id).slideToggle('fast');
});
CSS
.expand {
font-weight: bold;
font-style: italic;
font-size: 12px;
cursor: pointer;
}
.expandable {
display:none;
}
div {
margin: 10px;
}
https://jsfiddle.net/Q4PUw/3767/
Bad idea to use accordion.
Better is to create your own collapsible block.
Example:
function InitSpoilBlock(idClicked)
{
$(idClicked).on('click', function(e){
var textArray = ['blind','slide'];//here you can add other effects
var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];
$(e.target).parent().children(".HiderPanel").toggle(randomEffect);
});
}
so when you write such html:
<div class="HiderContainer">
More
<div class="HiderPanel">
Spoiled block of html
</div>
</div>
and after page load you will call
InitSpoilBlock('.Hider');
all blocks will be possible to collapse and hide with random animation. Or you can use one exact animation also.