Response title
This is preview!
Move this topic
Using show of jqueryui make bad position?
in Using jQuery UI
•
5 years ago
hi, as yyou can see on my demo site nenez.cf aftre you log in with steamopenid in the seciton contacto, a show form appear but in the animation have like bad position ?
1
Replies(16)
Re: Using show of jqueryui make bad position?
5 years ago
It's unlikely many here will have a Steam openID...
Can you demo your problem in some other way? The usual way is to make a jsFiddle.
should look like this https://gyazo.com/fa47001a4f0960b0c111e379a355b719 but her eon this gif you can see that before is like more down https://gyazo.com/fa47001a4f0960b0c111e379a355b719
Leave a comment on watusiware's reply
Re: Using show of jqueryui make bad position?
5 years ago
I don't see any difference. I just double checked - they both look identical. What am I looking for?
On what browser(s) does it not work as you expect? What do you expect to see? What do you see instead?
And in any case, we can't guess at what HTML and code you wrote.
Can you make a jsFiddle that shows the problem?
you can compare this 2 pics https://gyazo.com/dfc83cf6cf645d9b1f7f2f9eb0c2e817 and https://gyazo.com/c9d68ffc7e6807613ec47bb1648583bb as you can see one is more down, you cant even see the "enviar" button ;(
i cant recreate it because is using php, but this is the script
- $(document).ready(function() {
- $("#buti").click(function(){
- $( "#buti" ).hide( "drop", { direction: "left" }, "slow" );
- $( "#form1" ).show( "slide", 1000 );
- $("#closeb").click(function(){
- $( "#form1" ).hide( "drop", { direction: "left" }, "slow" );
- $( "#buti" ).show( "drop", 1000 );
- })
- })
- });
so what you think? btw i forget the css file
of the form contain
the labels
and the inputs
inputs resize: none;
- background-color: #ffffff9e;
- border: 0;
- margin: 0 auto;
- text-align: center;
- overflow: auto;
- labels{ display: block;
- text-align: center;
- font-family: sans-serif;
- color: #ffffff99;
- font-size: 30px;
- margin: 20px auto;
- font-weight: bold;
}- form1 {
- width: 700px;
- height: 250px;
- display: none;
- margin: 0 auto;
- bottom: -1000%;
- background-color: #bababa40;
- position: relative;
- border-bottom: 6px solid #bababa75;
- text-align: center;
Leave a comment on watusiware's reply
Re: Using show of jqueryui make bad position?
5 years ago
This seems like a CSS problem.
Use the inspection/debug tools in your desktop browser to diagnose and experiment.
To make a demo with jsFiddle, you can capture the HTML in your browser with "show source".
What's the difference in your code between the first screen shot and the second? Use the code that goes with the first!
We can't debug pictures. If you make a jsFiddle, we can help.
Leave a comment on watusiware's reply
Re: Using show of jqueryui make bad position?
5 years ago
The "bump" is because the button and the form are being rendered one after the other, until the end of the animation, when the button is completely hidden.
You can easily remove the bump by making the form have position: absolute;
If you can't see the entire form, it's because it had too small a height. Pick a larger height or remove height: 250px;
yea but i am using posistion relative on the form for then us eposition relative on inputs etc
Don't do it, or enjoy the bump.
As you can see in the fiddle, labels and inputs still render properly.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Using show of jqueryui make bad position?
5 years ago
so there isnt fix if i am using position absolute ? .-.
Leave a comment on Patricio Martin's reply
Re: Using show of jqueryui make bad position?
5 years ago
My fix is to use absolute.
Nobody has seen your actual HTML There may be other ways to fix the problem. But I would guess that they all have to do with making the form position: absolute. Maybe inside another div that is position: relative?
With relative the form renders with the rest of the page causing the bump.
JΛ̊KE
srry here is the html code
- <form method="GET" action="send.php" id="form1">
- <i id="closeb" class="fas fa-times"></i>
- <label class="formtext" for="steamid">Tu SteamID</label>
- <input class="inputform" name="steamidname" readonly id="steamid" type="number" value="<?php echo($steamprofile['steamid']) ?>">
- <label class="formtext" for="mens">Mensaje</label>
- <textarea required rows="3" cols="50" name="mens" class="inputform" placeholder="Cuentanos..." id="mens"></textarea>
- <input id="submitform" type="submit">
- </form>
Do you think that would make any difference? Feel free to update the jsfiddle.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Using show of jqueryui make bad position?
5 years ago
i dont think the html would make difference, i think i will change the position to relative and use margins or idk ;(
Leave a comment on Patricio Martin's reply
Re: Using show of jqueryui make bad position?
5 years ago
Or, since you are using jQuery UI, maybe a dialog would be best.
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Patricio Martin's question
{"z7664639":[14737000007576003,14737000007576005,14737000007576007],"z2950240":[14737000007573099,14737000007573103,14737000007573105,14737000007573107,14737000007573109],"z660777160":[14737000007577010,14737000007577015,14737000007577017,14737000007577019,14737000007577021,14737000007577023,14737000007577025,14737000007577027,14737000007577029]}