I am having a weird problem with CSS.
I am trying to achieve the following.
I can have people search for a name or a part of a quote in a database and I would like to display this into a box (in this case a form ,which is easy for styling).
Problem is, the total box should have a gradient green color, but not the entire fetched data is retrieved with a green layout.
I have debugged and it seems to work just great:
I have both echo and alerted my output and it is just a normal form with table rows in it..
Here's the result outcome:
pastebin.com/AZAv6bpX (broken)
Here's my css:
pastebin.com/NATwyki6 (broken)
Here's what it looks like:
Notice the table rows still continue-ing after the gradient has stopped.
I have adjusted the table entry margins, for the div (results) they are placed in. So I am 100% sure the outcome is as I want it.
So basically I got:
code from pastebin here
And this weird layout.
Can anybody please help me out?
Either take your float:left off of your table or set overflow:auto on your form.
jsfiddle link
Because your form contents are set to float, they are taken out of the flow, and so your container will not wrap around them.
The simple fix for your css would be to add in the following;
form br { clear:both }
and then make sure that you fix the final </br> in your form to be <br /> instead.
Related
I have a basic 2 column table for a form. In the left column are the labels, and in the right column are the inputs. When the user submits the form, if there are errors I want to display them directly to the right of the input in which the error was relating to. Could anyone provide an example of how to position a div next to the table row without shifting the columns across?
You could have the <div> representing the error inside of the <tr>. If there is no error it could just be empty. You can use a js templating framework like Mustache.js to pass arguments into your <div>.
I would encourage the use of Flex Grid. This is a CSS ruleset that will help you layout your form. You can still use two column format, with the only change being the you will probably want to reduce the size of the first column relative to the second column, to leave room for an error message.
Another option would be to use abandon tables and use CSS Grids instead.
Take a look at these links for more information:
http://flexboxgrid.com/
https://css-tricks.com/dont-overthink-flexbox-grids/
https://css-tricks.com/snippets/css/complete-guide-grid/
I would like to achieve effect visible on the screenshot below that is content of the table cell (that blue cell with Michal Aniol...) should be fully visible but cell's width should stay the same.
How do I do that?
I am open for solutions requiring heavy use of javascript as the rest of the application and also table itself will be generated by dojo.
Having colspan > 1 is not an option because it will not work in other cases. I really want to use just single cells as this will help me with other functionality.
Screenshot http://uppix.net/4/d/9/8cfc6aba556405f910871598afa10.png
Markup and css: http://jsfiddle.net/sGkpq/
style.less http://pastebin.com/waXWDf4J
To make my question self-contained in case links die as #Sparky672 pointed:
I wanted to have table cells of same size and if content in a cell is bigger than the cell itself then content should still display and flow to the next cell. So text in a cell if longer than the cell then it should overflow to the next cell overlaying its content.
Just remove overflow-x: hidden from table.reservation-table td. The text will continue past the end of the cell.
Of course, if you want it to work when the name is longer than the cells behind it (eg, Michal only booked one day) that would be more complicated, but probably doable.
Is it possible to calculate if an element is at the start of a new line within a <p>? For example take a look at this screenshot:
You'll see that the Twitter button has a slight margin to it. This is fine when it's following a word, but I was wondering if there was a hidden CSS gem that'd allow me to say "if you're the first 'thing' on a line then lose your margin-left".
Edit: The answer was p button:first-child or p > button, but neither work. See the comments.
You might want to set the margin to 0 all the time and then make sure the button always has a space before it. (Edit: won't work either, since a space is not enough. Again, see the comments.)
It is possible to do this calculation programmatically using JavaScript, but I'm not aware of any CSS tricks that will do it for you.
The basic JavaScript algorithm for doing this is to append an invisible node to your document with the same text styling as your paragraphs of text. Then you gradually add text to it, checking its width after each addition to see where the linebreaks are. Then when you've worked out what the width of the final line is, you check to see if that width would put the twitter button on the next line by itself, and update the CSS styles appropriately to remove the margin. This needs to be done for each <p> on the page that includes a twitter button.
It's not the most straightforward approach (in fact, Mr. Lister's solution is far simpler and produces a comparable effect as long as the margin is not more than a few pixels wide), but it's not quite as bad as it sounds, either.
Here's an example:
http://jsfiddle.net/fBUnW/6/
a quick introduction :
facebook has changed the LIKE (count) button
into something like :
LIKE (count)
[ -------------------- clic = open a Big zone bottom / right --------------------]
problem :
Its nice BUT ....
you forgot that a lot of website are using the like button in "toolbars". Page example
Header
Left column Tooblbar, include fb:like -------------------- Right column
Document content
Footer
and lot of structured pages/ blocs are using "overflow:hidden" !! So it makes the displayed widget randomly truncated everywhere (right, bottom...) depending of its environnement.
Its impossible to remove all the overflow:hidden from the containers blocks, to satisfy a widget update.
What can we do. Some sites where clean, now they look drafts, with all button opening truncated stuff...
any solution ?
If you want to use the Facebook plugin, the only solution seems to be to change the HTML/CSS so overflow:hidden can be removed. Alternatively, you could try to use a service that forwards the user actions to social networks for you and offers different methods of website integration.
If you're not using overflow: hidden for semantic reasons, you could always change it to overflow: visible or just remove it. I'm assuming that the fix isn't that simple...
A quickfix that wouldn't require you to modify your CSS would be to place your FB Like button outside of any containing elements that have overflow: hidden or overflow: auto and use absolute positioning to get it where you want it.
I have a table with width of 250 px, I am creating this table using a stringbuilder, but when I add long strings to table data, the data renders as one long line, it does not stay in table.
When I use firebug I see that the table is 250 px, but data does not wrap within it.
Help pls!
thanks!
EDIT: was using whitespace:nowrap; from another CSS which was messing it all up. thx for help
You can prevent a table from expanding for long strings by giving it the style table-layout: fixed.
Couple of things that you may try:
Inject a style into the td that is behaving bad: style="word-wrap:break-word;"
Check out the following to see if it helps: Word-wrap in an HTML table
Hope it helps!