I have HTML like below and all is displaying grand, the problem is that due to a problem with Sharepoint 2013's editor your unable to edit the link text but as soon as I remove display: block I can edit the link text, the same happens using float.
My question is there a way to emulate the affect of display: block where it will span the whole width that is available to it without using display or float?
<div class="button">
Link Text
</div>
There is one option to make an inline element to be like a block by using position:absolute without using display or float.
But I hope absolute positioning doesn't fit your want. Thus, the final conclusion is that you must use display or float property to render it correctly.
If you even use absolute then don't forget to keep position:relative to your parent element from which you want to be the element as absolute.
You could try display: inline-block; width: 100%;. You might need to alter the width to take into account any padding or border you've set.
(In the past I've used an edit mode panel and other tricks, so these hacky styles only apply when the page is being edited.)
SharePoint 2013's editor is so utterly awesome isn't it? :-(
Related
I'm using flex property for my custom blockquotes, here's demo:
http://jsfiddle.net/buda9/pumZH/3/
Everything works fine when I use plain text in it. But when I add or layout isn't so nice :) I made a temporary fix by using display: block but then my icon in :before pseudo element isn't vertically aligned and I need this icon to be in the middle
blockquote {
display:flex;
}
Trying to fix this for the last 2 days
Your demo is little confusing, but I can tell you that this is not a good use case for Flexbox layout. It is not intended for things like this one. Better use old methods for this like floats, absolute positioning,etc. You need to wrap your content inside a blockqoute in some block-level box to trigger correct behavior of flexbox layout.
HERO IS UPDATED DEMO: http://jsfiddle.net/pumZH/4/
Is this what you want ?
Is there any downside to converting img from inline-block elements into block objects with the display: block CSS property?
Most of the time, I want them to be block elements. Any useful inline aspects that I am losing? (Perhaps I am not seeing some as useful?)
Should all images be converted into block elements by default? Why are they inline-block elements according to spec?
P.S. I am asking this with considerations for layout via positioning & floats, and surrounding elements.
Well considering that a block will force anything after to line break, there is only one scenario where it would be bad:
If you plan to have another inline element (text, another image, span, etc) beside it
There is one downside :
If you plan to horizontally center an image applying "text-align:center" to the parent element, you cannot display the image as block or inline-block.
Put img { display: block; } in your CSS and forget about it. In the extremely rare instance that you need something different write an exception.
One hack found for block display:"block".
I had this image and the wavesurfer audio wave which I wanted as inline.
But, the display:"block"; in the js of wavesurfer was not allowing it.
What I did was, saved this cdn file locally and changed the display to inline and position to absolute which solved my issue. The change is supposed to be done where the wave element is created.
Hope this helps someone. Thanku wavesurfer creators for such an amazing js.
I'm trying to make a HTML "showcase". I am thinking of using elements like this:
<div id="index-showcase-tabs">
<div id="index-showcase-tabslide">
<div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
<div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
...
<div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
</div>
</div>
The showcase items are floated left, and I don't know their precise width, nor the number of them.
Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).
How would I do that?
PS: There's not much css for the items yet. I only gave the slider a specific heigth:
#index-showcase-tabslide
{
height: 34px;
}
Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/
For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.
check out this sexy control:
http://jsfiddle.net/SoonDead/U6QdQ/20/
this way made for my project, but I think it does what you want.
The tricks are:
Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.
Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.
(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)
So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.
There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.
I'm trying to do something pretty simple: an <a> tag with a background image. The code is found here, http://jsfiddle.net/QWatA/
The problem is that for some reason I can't set the width of the <a> tag in this code. If I had just a normal background and set it with a width it works fine. However seems like if I do it this way I have no control over the width. Ideally I want all the links to have highlights of the same width.
The reason I'm doing this is that I want a different background image for each of the links, so I'm forced to define all those a.class1, a.class2 stuff.
Thanks!!
Add display:inline-block; to your 'a' elements. By default 'a' is display:inline and so does not establish box with width/height.
http://jsfiddle.net/QWatA/1/
yea c-smile beat me to it just put display: block in your css, however if your going to do a.class1, a.class2 and so on with new pictures put it in your ul li a instead of in the a.class1 a.class2 and so on then you only have to write the code once.
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?