Stop Element-UI from automatically applying the list-item style to li elements

I have a list of data elements that I am rendering in the following way:

<ul>
    <li v-for="el in elements">
        {{el.data}}
    </li>
</ul>

Here's how I style it in my .css file: 

ul {
   list-style-type: none;
   padding: 0;
}

li {
   display: inline-block;
   margin: 0 10px;
}

However, when I introduce a Select component from Element-UI, it changes the display property of my li element to list-item. I want to keep my list rendering as inline-block. What can I do to override the default styling applied by Element on the li elements?

Check out a working demo here: http://codepen.io/p-adams/pen/xRYoNw

javascripthtmlcssvue.js

Answer №1

To customize the styling of your list, assign a unique id to your ul element and reference it in your CSS:

ul#list1 {
  list-style-type: none;
  padding: 0;
}

ul#list1 li {
  display: inline-block;
  margin: 0 10px;
}

In your HTML code, use the following:

<ul id="list1">

To see the changes reflected, visit this updated CodePen link:
http://codepen.io/anon/pen/zoRgOx

Answer №2

Check out this code snippet:

<select name="ele_type" class="form-control">
    <div v-for="el in elements">
        <option 
            value="{{el.data}}"
        >
            {{el.data}}
        </option>
    </div>
</select>

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

Combining React with Typescript allows for deep merging of nested defaultProps

As I work on a React and Typescript component, I find myself needing to set default props that include nested data objects. Below is a simplified version of the component in question: type Props = { someProp: string, user: { blocked: boole ...

javascriptreactjstypescriptreact-props

What could be causing html-webpack-inline-source-plugin to prevent the page from refreshing after editing CSS files?

Currently, I am utilizing a plugin that embeds all CSS within the final HTML file. This method prevents the application from refreshing in development mode. Whenever I make edits to the CSS, the build process completes normally, but the styles do not updat ...

javascriptcssreactjswebpack

The ternary operator, also known as the conditional operator

One feature I have implemented is a button that can generate a random color and update the color state with this value. The color state is then used to define the background color of the div. Within the div, there is a lock/unlock button that toggles the ...

javascriptreactjs

Currently in motion post file selection

I am currently facing an issue with a button that triggers a file selector pop-up. Below is the code snippet: <button mat-raised-button (click)="inputFile.click()">Choose a file</button> <input #inputFile type="file" [style.display]="' ...

javascripthtmlangularfile-upload

Foundation 6: Alignment issues with Top Bar

Exploring Foundation 6 and trying out the sample code. I'm puzzled as to why the "Site Title" is not in alignment with the rest of the top-bar, it seems to be slightly higher up. <div class="top-bar"> <div class="top-bar-title"> ...

csshtmlzurb-foundationzurb-foundation-6

Incorporating a CSS Module into a conditional statement

Consider the following HTML structure <div className={ `${style.cell} ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`} key={colIndex}/> Along with the associated CSS styles .cell { ...

cssreactjstypescript

Refresh a chart in vue using the chart.js library

Within my Vue application, I have a function that generates a chart. This function looks like this: startChart: function (canvas, type) { // initialize chart.js var ctx = document.getElementById("myChart"); var myDoughnut = new Chart(ctx, { ...

jqueryvue.jschart.js

Alter appearance of images depending on browser window size

I am working on an angular JavaScript code snippet that uses the ng-repeat command to display a row of small images. I want to ensure that these images do not spill over into a second line when the browser window is resized. Instead, I prefer them to eith ...

javascripthtmlcssangularjs

How to Create a React Material UI Switch with Minimal Padding

I need a compact Switch component without any additional dimensions or spacing Check out this custom Switch component <Switch checked={isSubscriptionStatusActive} onChange={onHandleChangeSubscriptionStatus} disabled={subscriptionStat ...

cssreactjsmaterial-ui

Is it feasible to activate an action on a click of a Vimeo video?

Is there a way to activate an event by clicking if a video is set with background=1 and has no controls? This particular video is from Vimeo, using a plus account which allows for setting background=1. The scenario involves a Vimeo video playing on loop ...

javascriptjqueryvimeo-apivimeo-player

How can I display components using Angular CLI 5 without any visual output?

The index.html page is not displaying anything, not even the "App works" message that should appear in a basic initial project ng --version Angular CLI: 1.6.0 Node: 8.9.1 OS: darwin x64 Angular: 5.1.0 ... animations, common, compiler, compiler-cli, core, ...

javascriptangularjsbash

multiple simultaneous ajax calls being triggered

I am currently working on creating 4 cascading dropdowns, where the options in each dropdown repopulate based on the selection made in the previous one. To achieve this functionality, I decided to implement an Ajax call. The call takes the parameters, det ...

c#javascriptajaxasp.net-mvcasp.net-mvc-4

Using JavaScript/Angular to borrow a function and add additional parameters

In my scenario, I have a service function that requires a static parameter and a second custom parameter that changes based on the controller it is being used in. I am looking for a way for my controller/view to invoke this service function without havin ...

javascriptangularjscallbindcurrying

Personalized Bootstrap 4 grid system

Could someone guide me on how to create this grid layout with Bootstrap 4? I am trying to achieve a design where one column stretches from the edge of the window to the inside, while the other column is half the width of a standard .container element. ht ...

cssbootstrap-4grid

What is the best way to apply a png overlay to each img tag when hovered over?

Here is the code snippet I am working with: <div class="latest-post"> <a href="http://localhost/blaze/2011/documentaries/test-big-thumb" rel="bookmark"> <span> <img width="140" height="100" src="http:// ...

jqueryhtmlcss

Display HTML containing a <script> tag within a REACT component

Looking to embed the following HTML code within a React component: <form action="/process-payment" method="POST"> <script src="https://www.example.com/payment-script.js" data-preference-id="$$id$$"> </script> </form> I ...

javascripthtmlreactjs

Tips for integrating a progress bar into a Vuetify Snackbar

I am trying to find a sleek way to incorporate a progress bar into the Snackbar component of Vuetify. The progress bar should be synchronized with the timeout prop. I initially used setInterval for this purpose, but I'm considering directly styling th ...

vue.jsvuetify.js

Has the querystring hack become outdated?

For a long time, I have been adding a query string to my CSS link whenever I made changes that needed to be reflected on client machines: <link href="/Resources/styles/styles.css?v=1" rel="stylesheet" /> Lately, I've noticed that Chrome seems ...

htmlcssgoogle-chromebrowser

Reverse Vue-router journey

When working with vue-router, is there a way to navigate back using the declarative approach: router-link and router.go(n)? I am aware of the possibility to achieve this by utilizing <h1 @click="$router.go(-1)"></h1>, however, attempting to u ...

vue.jsvue-router

Experimenting with an Angular Controller that invokes a service and receives a promise as a

I am currently in the process of testing an angular controller that relies on a service with a method that returns a promise. I have created a jasmine spy object to simulate the service and its promise-returning method. However, my mock promise is not retu ...

javascriptangularjsunit-testingjasmine