Simulating the behavior of display blocks

HTML similar to the example below is working perfectly, however, there seems to be an issue with Sharepoint 2013's editor. When trying to edit the link text within a block that has 'display: block' or 'float', it becomes impossible. As soon as those properties are removed, editing the link text becomes possible again. Is there a way to achieve the same effect of 'display: block' without using display or float and have it span the whole width available?

<div class="button">
        <a href="#">Link Text</a>
    </div>
csscss-floatblocksharepoint-2013

Answer №1

If you're looking to transform an inline element into a block-like structure, one way to achieve this is by utilizing the position:absolute property without relying on display or float.

However, it's worth noting that absolute positioning may not align with your desired outcome. In such cases, the most effective approach would be to incorporate the display or float property for optimal rendering.

In the event that you do opt for absolute positioning, remember to include the position:relative attribute in the parent element to ensure the proper alignment of the child element set to absolute.

Answer №2

To achieve the desired layout, consider using 

display: inline-block; width: 100%;
. It may be necessary to adjust the width to accommodate any padding or border that has been set.

(In previous experiences, I have utilized an edit mode panel and other techniques, so these unconventional styles are only applicable during editing of the page.)

Isn't SharePoint 2013's editor just absolutely fantastic? :-)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Function is raising an error with the wrong value or text

I am currently testing a form that I am in the process of developing. My goal is to have different values returned each time I click on a different item from the dropdown menu. If this explanation isn't clear, please take a quick look at my pen for cl ...

javascriptjqueryhtmlcss

Creating a horizontal line with text centered using Angular Material's approach

Implementing Angular Material, my objective is to design a horizontal line with a word positioned in the center. Similar to the one showcased here. I experimented with this code, achieving a close result, but I aim to align the lines vertically to the mid ...

cssangularjsangular-material

What is the best way to search for a CSS selector that includes an attribute beginning with the symbol '@'?

Whenever I want to target an element with a click event, I usually use the following jQuery selector: $('div[@click="login()"]') <div @click="login()"> Login </div> However, when I tried this approach, it resulted ...

javascripthtmlcssgoogle-chromeconsole.log

Select a specific element to apply a CSS selector for a button

One of the challenges I am facing involves a webpage with multiple submit buttons. My goal is to iterate through each button and click on them one by one. While I am aware that this can be achieved using xpath like this (//button[@class='submit' ...

javahtmlcssseleniumcss-selectors

The iframe is not large enough to contain all the HTML content

I'm encountering a problem with a website I'm currently developing - specifically, I am struggling to embed an HTML document into an iframe in a manner that fills the entire page. Additionally, I am utilizing Angular to retrieve the HTML document ...

javascriptcssangularhtml

Adjust the hue of the SVG sprite

I am currently using an SVG sprite as the background image for my project: .naar-logo { background: url(images/salt_sprite.svg) no-repeat -8px -78px; width: 36px; height: 49px; position: relative; top: 38px; } <div class="naar-logo ...

htmlcsssvg

Ways to center Bootstrap panel in the middle of a webpage

Is there a way to center this entire panel on the web page? I could use some guidance with this. Does anyone have recommendations for a good book to learn Bootstrap design? <div class="panel panel-default" style="max-width:500px;margin-left:auto;margi ...

htmlcssasp.net-mvctwitter-bootstrap

Using jQuery UI to dynamically add a widget based on a specific class, rather than relying on

Exploring the world of Apache Cordova and jQueryUI is a new adventure for me. I am currently experimenting with formatting the layout of my index.html using jQueryUI. As mentioned in this section of the jQueryUI tutorial, a widget can be added using the f ...

javascripthtmlcsscordovajquery-ui

Show a picture upon hovering the button

Welcome to my website. My goal: Show an image when a user hovers over the links. I must be making some silly error, but I can't pinpoint it. This is what I've attempted so far: HTML <ul class="nm"> <li><a href="#">Cork& ...

javascriptjquerycss

Enhance Vuetify pagination with personalized styles

I'm attempting to create a toolbar with pagination control aligned to the right, featuring smaller pagination control buttons. To achieve this, I took the following steps: Wrapped v-pagination in span (since v-spacer did not work without this) Adde ...

cssvuejs2vuetify.js

Add additional text using the ::after pseudo-element exclusively for a particular class

Here is the HTML code snippet I am currently working with: <style> p::after { content: "%"; } </style> <div class="counter-box"> <p data-value="185">100</p> </div> At present, my CSS applies text injection to ...

htmlcsspseudo-element

``Fixing the focus background color for mobile devices and iPads using React and Material io: A Step-by-Step

My custom button has a background and a :hover color. It works fine on the web, but on mobile devices, the color of the :hover persists even after clicking the button when the mouse is not over it. I am looking for a solution to fix this issue because the ...

cssreactjsmaterial-ui

How can I ensure my card div is responsive in Bootstrap?

My current section consists of only 6 cards, with 3 cards in a row of 2. When the screen size reduces (to mobile phone size), I want each card to be on its own row, displaying one by one as the user scrolls. Although it functions as desired when I resize ...

htmlcssresponsive-designbootstrap-5

How can you use CSS to style an image's title attribute?

I am trying to customize the text displayed when hovering over an image. Despite my efforts, the code I used doesn't seem to be working properly: <body> <img src="img.jpg" title="<span class='title'>title</span>" &g ...

htmlcss

CSS animations can make the navigation bar vanish into thin air

I recently started implementing CSS3 animations from the Animate.css library and I must say, they really enhance the look and feel of my website. The animations pair perfectly with WOW.js to create stunning effects. However, I have encountered a minor iss ...

jquerycssanimationcss-animations

What could be causing my <UL> to not properly expand around the <LI> items inside of it?

I am currently working with WordPress and have created a menu using a list structure. Here is an example of how it looks: <ul> <li>Home</li> <li>About</li> <li>ParentItem <ul> <--- The heig ...

htmlcsswordpresshtml-lists

Spooky results displayed on website from NightmareJS

Is there a way to display the output from nightmareJS onto a webpage when a button is clicked using HTML, CSS, and JS? This is my nightmareJS code: var Nightmare = require('nightmare'); var nightmare = Nightmare({ show: false}) nightmare .go ...

javascripthtmlcssnightmare

Storing the background color in a JavaScript variable

I've been experimenting with creating a fade in and out effect for a background image on a website. I've also been attempting to capture the background color of a div and store it in a variable. Here's what I have tried: elem = document.ge ...

javascripthtmlcss

Changing the orientation of a dropdown menu from horizontal to vertical

Hello, I am seeking assistance to transform the top dropdown menu layout into a vertical one similar to the menu on the left side. Any help would be greatly appreciated as I am running out of ideas! Thank you in advance! @charset "utf-8"; /* CSS Docum ...

htmlcss

Stop the Bootstrap navbar from breaking into separate lines when resizing the screen by ensuring it collapses into an icon

I have a straightforward Bootstrap Navbar that contains just a few items. When the width is less than 768, it displays in two rows. How can I make both items display in a single row at all widths without using the collapse feature? <nav class="na ...

csstwitter-bootstraptwitter-bootstrap-3